Skip to content
techsnow

Semantic HTML

Semantic Layout Tags

Semantic tags describe what a part of the page is, not just how it looks. Compare these two:

<!-- non-semantic -->
<div class="header">...</div>

<!-- semantic -->
<header>...</header>

Both look the same, but <header> tells browsers, search engines and screen readers exactly what the content is.

A typical page layout

<body>
  <header>
    <nav>Menu links</nav>
  </header>

  <main>
    <article>
      <h1>Blog post title</h1>
      <p>...</p>
    </article>
    <aside>Related posts</aside>
  </main>

  <footer>© 2026 TechSnow</footer>
</body>
TagMeaning
<header>Introductory content: logo, title, navigation.
<nav>A block of main navigation links.
<main>The main content. Use only one per page.
<article>Self-contained content that makes sense alone: a post, a product card.
<section>A themed group of content, usually with a heading.
<aside>Side content: sidebars, related links.
<footer>Footer of the page or a section.