Semantic Tags

Semantic tags describe what their content actually is, not just how it should be grouped. header represents introductory content, nav represents navigation links, main represents the page's primary content, and footer represents closing information like copyright.

Other tags include <section> for a grouped theme of content, <article> for a self-contained piece, and <aside> for related but separate content, like a sidebar. <header> marks introductory content or navigation, and <footer> marks closing content like copyright info.

Other useful ones include <nav> for navigation links, and <figure> with <figcaption> for an image and its caption. Together, these describe what content actually is, instead of relying on generic divs.

<header>

  <h1>My Blog</h1>

  <nav>

    <a href="#">Home</a>

    <a href="#">About</a>

  </nav>

</header>

 

<main>

  <article>

    <h2>Blog Post Title</h2>

    <p>Post content goes here.</p>

  </article>

</main>

 

<footer>

  <p>Copyright 2026</p>

</footer>

Explanation: Even without styling, you can read this code and immediately understand the page layout. That readability is the whole point of semantic tags, both for other developers and for tools like screen readers and search engines.