Semantic Elements: header, nav, main, section, article, aside, footer

11 min read

HTML with Meaning

Semantic elements clearly describe their purpose to both the browser and developers. Using them correctly improves accessibility, SEO, and code readability — compared to using <div> for everything.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Blog Post</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h1>My First Post</h1>
        <p>Published on <time datetime="2026-07-24">24 July 2026</time></p>

        <section>
          <h2>Introduction</h2>
          <p>This is the intro section of the article.</p>
        </section>

        <section>
          <h2>Main Content</h2>
          <p>More detailed content goes here.</p>
        </section>
      </article>

      <aside>
        <h2>Related Posts</h2>
        <ul>
          <li><a href="/post-2">CSS Basics</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 My Blog</p>
    </footer>
  </body>
</html>

When to Use Each Element

<header> — Introductory content for the page or a section. Usually contains the logo, site title, and navigation.
<nav> — A block of navigation links. Can appear in the header or a sidebar.
<main> — The dominant content of the page. Only one <main> per page.
<section> — A thematic grouping of content. Should have its own heading.
<article> — Self-contained content that could be distributed independently (blog post, news article, comment).
<aside> — Content tangentially related to the main content (sidebar, pull quote, related links).
<footer> — Footer for the page or a section. Often contains copyright, contact info, and secondary links.

Ready to test yourself?

Practice HTML— quiz & coding exercises