What are semantic HTML tags and why should you use them?

January 08, 2025 · Category: HTML & CSS

Short answer

Semantic HTML tags clearly describe their meaning to both the browser and the developer. Examples include <header>, <nav>, <article>, and <footer>, as opposed to non-semantic tags like <div> and <span>.

How it works

Browsers, screen readers, and search engines parse semantic tags to understand the structure and importance of content. A <nav> element indicates a block of navigation links, while <article> signals a self-contained piece of content. This structural clarity allows assistive technologies to build a meaningful outline of the page for users with disabilities.

Example

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>Post Title</h2>
      <p>Content here...</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2025</p>
  </footer>
</body>

Why it matters

Using semantic HTML improves accessibility for screen readers, enhances SEO by helping search engines understand content hierarchy, makes code easier to read and maintain, and often reduces the need for extra ARIA roles or class names.