Lesson 4: Semantics

Semantic HTML means using tags that describe the meaning of the content, rather than its default appearance.

Using generic <div> and <span> tags gives no context to search engines or screen readers. Wrapping content in semantic tags like <header>, <main>, <nav>, and <footer> lets browsers and automation tools understand your page outline instantly.

Here is a non-semantic layout.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
</div>

Now let’s look at the same content using semantic elements.

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h2>five words</h2>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

The second version is much easier to read and structures the document logic for machines.

Helping screen readers#

When a browser opens a webpage, it translates your HTML into a structure that screen readers can understand. Screen readers are software programs that read web pages out loud for visually impaired users.

If you use generic <div> tags everywhere, the screen reader just sees a flat list of text. But if you use semantic tags, the screen reader can tell the user exactly where the navigation menu is, allowing them to jump directly to the main content.

HTML is accessible by default. Our job is to protect that default behavior by choosing the correct elements.

The role attribute#

The role attribute tells screen readers what an element is for when there is no standard HTML tag available. Regular semantic tags have these roles built in automatically. For example, a <nav> tag is automatically recognized as a navigation menu.

You can override an element’s role using the role attribute, but it is always better to use the native semantic element instead.

For example, you can write <p role="button">Click Me</p>, but the browser will not let keyboard users tab to it or press Enter to click it. If you use a native <button> tag, the browser handles focus and click actions automatically.

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

The role attribute is a helpful fallback, but native tags are simpler.

Semantic elements#

Choose your tags based on semantic meaning and functionality, not default styling. Appearance is CSS’s job. Writing clean, structured markup makes it much easier to style your page later.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).