HTML Semantic Elements

HTML semantic elements describe the role of their content. A <nav> clearly holds navigation and a <footer> clearly holds footer content, whereas a <div> says nothing. Semantic markup helps search engines, screen readers and other developers.

Common Semantic Elements

  • <header>: introductory content or a site banner
  • <nav>: a block of major navigation links
  • <main>: the unique main content of the page (only one visible per page)
  • <article>: a self-contained piece, such as a blog post or product card
  • <section>: a thematic group of content, usually with a heading
  • <aside>: related side content like a sidebar
  • <footer>: closing info such as copyright and contact links

A Semantic Page Layout

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic Layout</title>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  header, footer { background: #1e293b; color: white; padding: 12px; }
  nav a { color: #93c5fd; margin-right: 12px; }
  .wrap { display: flex; gap: 16px; padding: 12px; }
  main { flex: 3; } aside { flex: 1; background: #f1f5f9; padding: 8px; }
</style></head>
<body>
  <header>
    <h1>Daily Dev Blog</h1>
    <nav><a href="#">Home</a><a href="#">Posts</a><a href="#">About</a></nav>
  </header>
  <div class="wrap">
    <main>
      <article>
        <h2>Why Semantic HTML Matters</h2>
        <p>Published <time datetime="2026-10-01">1 October 2026</time></p>
        <p>Meaningful tags make pages easier to understand.</p>
      </article>
    </main>
    <aside><h3>Popular</h3><p>CSS Grid basics</p></aside>
  </div>
  <footer><p>&copy; 2026 Daily Dev Blog</p></footer>
</body>
</html>

Article vs Section

Use <article> when the content would make sense on its own, for example if syndicated in an RSS feed. Use <section> to split a document into themed parts, each with its own heading. An article can contain sections, and a section can contain articles.

Other Useful Semantic Tags

<figure> and <figcaption> wrap images with captions, <time> marks dates in machine-readable form, <mark> highlights text, and <details> with <summary> creates a native expandable panel.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>details</title></head>
<body>
  <details>
    <summary>What is semantic HTML?</summary>
    <p>HTML that uses elements according to their meaning.</p>
  </details>
</body>
</html>

Frequently asked questions

Why use semantic HTML?

It improves accessibility for screen readers, helps search engines understand your page structure, and makes code easier to maintain.

Do semantic elements look different from div?

Mostly no. Elements like section and article render like a plain div; their value is the meaning, not the appearance.

Can a page have multiple header and footer elements?

Yes. Besides the page header and footer, each article or section may have its own header and footer.