Semantic HTML

Meaning versus looks

Two pages can look identical and still be built very differently. In one, every piece is a div with a class chosen for how it looks. In the other, headings are headings, lists are lists and the article is an article. A person looking at both sees the same thing. A screen reader, a search engine, a reader mode in a browser and a browser extension that translates or summarises only see the markup. For them, the second page is far easier to understand.

That is semantic HTML: picking the element whose meaning matches your content. Meaning is the element's job. Looks are CSS's job.

The sectioning elements

You met header, nav, main and footer in the previous lesson. Three more describe the content area:

• article: a self-contained piece that would make sense on its own or in another place: a blog post, a news story, a product card, a comment.
• section: a thematic group of content, normally with its own heading: "Features", "Pricing", "Contact".
• aside: content related to the main content but separate from it: a sidebar, a pull quote, a box of related links.

<main>
  <article>
    <header>
      <h1>How to choose a laptop for college</h1>
      <p>Published 8 March 2026</p>
    </header>

    <section>
      <h2>Start with your budget</h2>
      <p>Decide what you can spend before you read any reviews…</p>
    </section>

    <section>
      <h2>Screen and battery</h2>
      <p>A bright screen matters more than extra gigabytes…</p>
    </section>

    <aside>
      <h2>Related reading</h2>
      <ul><li><a href="/learn/html/links/">How links work</a></li></ul>
    </aside>
  </article>
</main>

article or section?

A quick test: could this be lifted out and published on its own? If yes, article. If it is a chunk of a larger whole, use section. A page can nest them, as above: an article made of sections, or a "Latest posts" section made of articles.

If you are not sure and there is no heading for the group, the element you want is probably a plain div. A section without a heading is usually a sign you meant div.

Try it

<article>
  <h2>Why bread rises</h2>
  <p>Yeast eats sugars in the dough and releases gas that makes it expand.</p>
  <aside style="background:#fef3c7;padding:8px;border-radius:6px">
    <strong>Tip:</strong> warm water wakes yeast up faster than cold.
  </aside>
</article>

Elements that carry meaning inside text

Semantics go all the way down to single words:

• strong marks strong importance; em marks stress emphasis.
• time gives a machine-readable date: <time datetime="2026-03-08">8 March 2026</time>.
• address holds contact information for its article or page.
• figure and figcaption pair an image with its caption.
• mark highlights text for reference, like a search term in results.

Choose by meaning, not by the browser's default look. If you want something to look bold without it being important, use CSS rather than strong; if you want something indented, use CSS rather than blockquote.

What you gain

• Accessibility. Screen reader users can navigate by landmark, heading and list. A page of unlabelled div boxes offers them nothing to navigate by.
• Search. Search engines use headings, articles and dates to understand a page. You do not get a ranking bonus for tags, but clear structure helps them read it correctly.
• Maintenance. <article> is easier to find and understand six months later than the fifth <div class="box2">.
• Reader modes and tools. Browsers' reader view usually looks for article or main to decide what to show.

Common mistakes

• Turning every div into section. A section should have a heading and a reason to exist.
• Using article for any random box, rather than self-contained content.
• Using elements for their default look, such as blockquote just to indent or h3 just to make small bold text.
• Skipping heading levels or using several h1 elements in unrelated places.
• Forgetting that semantics are not a substitute for text: an image of text is still invisible to everyone but the eye.

Exercise

Mark up a recipe page body: a main containing an article with a header (title and date), a section titled "Ingredients" with a list, a section titled "Method" with an ordered list, and an aside with a serving tip.

<main>
  <article>
    <header>
      <h1>Masala chai</h1>
      <p><time datetime="2026-03-08">8 March 2026</time></p>
    </header>
    <section>
      <h2>Ingredients</h2>
      <ul><li>2 cups water</li><li>1 cup milk</li><li>2 tsp tea leaves</li><li>1 tsp chai masala</li></ul>
    </section>
    <section>
      <h2>Method</h2>
      <ol><li>Boil the water with the masala.</li><li>Add the tea and milk.</li><li>Simmer for three minutes and strain.</li></ol>
    </section>
    <aside><p>Serve with a pinch of ginger for a stronger flavour.</p></aside>
  </article>
</main>