HTML Semantic Elements

So far you have marked up individual pieces of content: headings, paragraphs, lists, tables and forms. Real pages also have larger regions – a site header, a menu, the main content, a sidebar, a footer. HTML semantic elements describe these regions by their purpose. This lesson brings together everything from HTML Introduction to HTML Forms into complete, well-structured pages.

What does “semantic” mean?

A semantic element tells the browser, search engines and assistive technology what its content is. Compare <div class="menu"> with <nav>. Both can look identical, but only <nav> tells a screen reader “this is navigation”. The class name means something to you, but nothing to the browser.

Before these elements existed, pages were built from dozens of nested <div> elements, sometimes called “div soup”. Semantic elements replace most of those with names that explain themselves.

The main page regions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pondy Walks</title>
  <style>
    body { font-family: sans-serif; margin: 0; }
    header, main, footer { padding: 0.5rem 1rem; }
    .site-header { background: #fdebd0; }
    .logo { font-weight: bold; margin: 0; }
    nav ul { list-style: none; display: flex; gap: 1rem; padding: 0; }
    article { border: 1px solid #ccc; padding: 0.5rem; margin-bottom: 0.5rem; }
    aside { background: #eef; padding: 0.5rem; }
    footer { background: #333; color: #fff; }
  </style>
</head>
<body>
  <header class="site-header">
    <p class="logo">Pondy Walks</p>
    <nav aria-label="Main">
      <ul>
        <li><a href="#walks">Walks</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Heritage walks in Pondicherry</h1>

    <section id="walks">
      <h2>Our walks</h2>
      <article>
        <h3>White Town morning walk</h3>
        <p>Two hours through French-era streets and colonial villas.</p>
      </article>
      <article>
        <h3>Tamil Quarter evening walk</h3>
        <p>Traditional houses with thinnai verandas and busy markets.</p>
      </article>
    </section>

    <aside>
      <h2>Good to know</h2>
      <p>Walks start early to avoid the afternoon heat.</p>
    </aside>
  </main>

  <footer id="contact">
    <p>Contact: [email protected]</p>
    <p><small>© 2026 Pondy Walks</small></p>
  </footer>
</body>
</html>

Notice that the page still has a single <h1>, and headings follow a logical order inside each region. Semantic elements do not change heading levels for you – browsers and screen readers rely on the actual <h1>–<h6> you write, so keep the outline from HTML Headings, Paragraphs and Formatting.

Landmarks and accessibility

Screen readers turn some of these elements into landmarks. A user can press a key to list them – banner, navigation, main, complementary, content info – and jump straight to the one they want. That is a huge time saver compared with listening to the whole page from the top.

• <header> (when not inside an article or section) becomes the banner landmark.
• <nav> becomes navigation; <main> becomes main.
• <aside> becomes complementary.
• <footer> (when not inside an article or section) becomes content info.
• <search> becomes search – see below.

If a page has more than one <nav>, give each a short aria-label such as “Main” or “Footer” so users can tell them apart.

article or section?

This is the question beginners ask most. Use a simple test: could this content be shared or reused on its own, for example in a news feed? If yes, use <article>. If it only makes sense as a part of the page, and has a heading, use <section>. If you only need a box to style, neither is right – use a <div>.

Smaller HTML semantic elements

Some semantic elements work at the text level:

• <time datetime="2026-01-15">15 January</time> gives dates and times a machine-readable value.
• <address> holds contact information for the page or article author.
• <figure> and <figcaption>, from HTML Images, group media with captions.
• <search> wraps a search or filter form. It is supported by all major browsers and automatically creates a search landmark.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog post</title>
</head>
<body>
  <search>
    <form>
      <label for="q">Search the blog</label>
      <input type="search" id="q" name="q">
      <button type="submit">Search</button>
    </form>
  </search>

  <article>
    <header>
      <h1>Five monsoon getaways near Bengaluru</h1>
      <p>Published <time datetime="2026-07-02">2 July 2026</time></p>
    </header>
    <p>When the rains arrive, the Western Ghats turn green and misty...</p>
    <footer>
      <address>Written by <a href="mailto:[email protected]">Anitha K</a></address>
    </footer>
  </article>
</body>
</html>

When to use div and span

<div> (a block) and <span> (inline) are generic containers with no meaning at all. That is exactly what makes them useful: when you need a wrapper only for styling or scripting, and no semantic element fits, use them. A card grid wrapper, a coloured word or a layout column are typical examples.

HTML semantic elements also help search engines understand your pages; the blog post Semantic HTML for SEO covers that side in more detail. To lay these regions out side by side, you will use CSS Grid. Next, you will add media to your pages in HTML Audio and Video.

Further reading

• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main
• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article
• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search
• html.spec.whatwg.org/multipage/sections.html
• w3.org/WAI/ARIA/apg/practices/landmark-regions