Reading

HTML Structure: Elements, Tags, and Your First Real Page

HTML (HyperText Markup Language) doesn't tell a browser how something should look — it tells the browser what something is. A heading, a paragraph, a link, an image: HTML's entire job is labeling content with real meaning, which is exactly why a screen reader for a blind user, a search engine, and a browser can all correctly understand the same page.

Elements and tags: the real building blocks

An HTML element is a real, complete unit like <p>Hello</p> — an opening tag (<p>), the actual content ("Hello"), and a closing tag (</p>). The tag names describe what the content is, not how it looks: <p> means "this is a paragraph," <h1> means "this is the single most important heading on the page."

<h1>Welcome to My Site</h1>
<p>This is a real paragraph of actual text content.</p>

The real, required skeleton of every HTML page

Every real HTML document needs this exact structure to be valid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World</h1>
  <p>This is my very first real web page.</p>
</body>
</html>

<!DOCTYPE html> tells the browser this is a modern HTML document. <html> wraps the entire real page. <head> holds information about the page that isn't itself displayed (the page's title, which shows in the browser tab, and — later — links to CSS files). <body> holds everything a real visitor actually sees.

Headings: a real, meaningful hierarchy

HTML gives you six real heading levels, <h1> through <h6>, in strict order of importance — not size. A real, correct page has exactly one <h1> (the page's main topic), and headings nest logically below it (an <h3> should genuinely be a subtopic of the <h2> above it), the same way a real, well-organized document's headings would.

Real, common text elements

<p>A paragraph of real text.</p>
<a href="https://example.com">A real link to another page</a>
<img src="photo.jpg" alt="A real, accurate description of the photo">
<ul>
  <li>An unordered (bulleted) list item</li>
  <li>Another real item</li>
</ul>
<ol>
  <li>An ordered (numbered) list item</li>
  <li>Comes after the first, in real sequence</li>
</ol>

The alt attribute on <img> is genuinely not optional in real, professional work — it's what a screen reader reads aloud, and what shows if the image itself fails to load. A real, accurate description ("A golden retriever puppy sitting in grass"), not a lazy placeholder ("image"), is the actual standard.

Attributes: real, extra information on a tag

An attribute adds real, extra detail to an element, written inside the opening tag: href tells a link where to go, src tells an image which file to load, alt provides real alternative text. A tag can have several real attributes at once.

Nesting: elements inside elements

Real HTML pages nest elements inside each other constantly — a <li> inside a <ul>, a <strong> inside a <p>. The real, strict rule: an inner tag must close before the outer one does. <p>Some <strong>bold</strong> text</p> is correctly nested; <p>Some <strong>bold</p></strong> is genuinely broken HTML.

This week's practical habit

Build the real skeleton page above in a file named index.html, then open it directly in your browser (double-click the file) — seeing your own real, unstyled HTML rendered for the first time is worth actually doing, not just reading about.