Semantic Structure

A page is more than a run of headings and paragraphs. It has regions: a header at the top with the site's name and menu, the main content, perhaps a sidebar, and a footer at the bottom. A sighted visitor recognises those regions at a glance from their position and look. Everyone and everything else needs to be told. HTML has an element for each region, and using those elements instead of anonymous boxes is called writing semantic HTML: HTML whose elements say what each part means.

Think of the signs in a large building: Reception, Stairs, Exit. Take them down and the rooms look exactly the same, but finding your way becomes guesswork, and for someone who cannot see the layout, nearly impossible. Semantic elements are those signs. They change nothing about how the page looks and everything about how it can be navigated.

The Landmark Elements

Five elements name the big regions of a page. Assistive software, such as screen readers, calls them landmarks, because they are the fixed points you steer by.

A header holds what introduces the page or site: usually its name and its main menu. A nav holds a set of navigation links, such as the menu of the site's pages. A main holds the content that is unique to this page, the reason the visitor came, and there is exactly one per page. A footer holds what closes the page: who made it, contact details, legal links. An aside holds content related to the page but not part of its main flow, such as a box of related links.

One detail is worth knowing now. A header or footer placed directly inside the body is a landmark for the whole page. The same elements can also appear inside an article or a section, where they belong to that part alone and are not page landmarks.

section and article: Two Kinds of Group

Inside main, content often falls into groups. HTML offers two elements for them, and the difference is about independence.

An article is a piece that makes sense on its own, even if you lifted it out of the page: a blog post, a news story, a single project card on a portfolio. A section is a themed part of something larger, such as "About me" or "Recent work" on a home page, and it should have a heading that says what the theme is. If you cannot think of a heading for a group, it is probably not a section.

div and span: Boxes with No Meaning

Sometimes you need a box around some content for no reason except to style it, say to put a coloured background behind three paragraphs. For that, HTML has div, a box that starts on a new line, and span, a box that sits inside a line of text. Neither one means anything; each is a wrapper and nothing more.

That makes them the honest choice when nothing else fits, and they are used on nearly every site. The trouble starts when they are used for everything. Here is the same small page written twice.

<div class="top">
  <div class="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <h1>Notes on Baking</h1>
  <p>What I learned this year.</p>
</div>
<div class="bottom">
  <p>Updated every Sunday.</p>
</div>

<header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Notes on Baking</h1>
  <p>What I learned this year.</p>
</main>
<footer>
  <p>Updated every Sunday.</p>
</footer>

Put either version in a page and the browser shows exactly the same thing: two bulleted links, a large heading, a line of text, and a line at the bottom. None of these elements has any look of its own; each is a plain box that starts on a new line. The difference is entirely in the structure. The first version is four boxes whose class names mean something only to the person who wrote them. The second tells any software reading it which part is the menu, which is the content and which is the footer.

Who Reads the Meaning?

The first reader is a screen-reader user. Most screen readers can list a page's landmarks and jump to any of them with a keystroke, so "go to the main content" skips the header and menu in one step. On the div version there is no landmark to jump to, and the listener has to find the content some other way, often by hearing the whole menu again on every page.

The second reader is software that tries to find the content of a page on its own, such as a browser's reader view, which strips a page down to its text, and the programs search engines use to read pages. Landmarks are strong clues for them about which part matters.

The third reader is you, and anyone who edits the page after you. A nav element reads as the menu instantly; a div with a class name has to be read and trusted. In later chapters, the CSS and JavaScript you write will hook into these same elements.

Your Site's Skeleton

Now the three pages of your site get their regions. Each one gets the same header, holding the list of links from topic 3 inside a nav, then a main for that page's own content, then a footer. Here is the body of index.html; the head stays as it is.

<body>
  <header class="site-header">
    <nav class="site-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Your Name</h1>
    <p>I build small, useful things for the web.</p>
  </main>
  <footer>
    <p>© Your Name</p>
  </footer>
</body>

The class attributes on the header and the menu are names for Chapter 3 to style by; they change nothing yet. Give projects.html and contact.html the same header and footer, and move each page's own heading and paragraph into its main. Then open the preview and look closely. The page is exactly as it was, plus one new line at the bottom with a copyright sign and your name. The change you cannot see is the one that matters.

To see it, DevTools helps, and topic 6 opens it properly. Its Accessibility pane, which Chapter 12 uses in depth, shows each landmark with the role a screen reader will announce: the nav as navigation, the main as main.