Semantic HTML

Instead of building every page out of nameless <div>s, HTML offers tags that describe what a section of a page actually is.

Example: a page built from semantic tags

<header>
  <h1>My Blog</h1>
  <nav><a href="#">Home</a> | <a href="#">About</a></nav>
</header>

<main>
  <article>
    <h2>My First Post</h2>
    <p>Semantic tags make this structure obvious without reading any CSS.</p>
  </article>
</main>

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

<header> marks the top of a page, <nav> marks navigation links, <main> marks the primary content (there should only be one per page), <article> marks a self-contained piece of content, and <footer> marks the bottom. Visually, these behave almost identically to a plain <div> — but semantically they help screen readers jump directly to "the main content" or "the navigation" the same way sighted users visually scan a page for those same landmarks, and they help search engines understand a page's real structure instead of guessing from a wall of identical divs.