Semantic HTML5 — header, nav, main, article, section, footer

What is Semantic HTML?

Every HTML tag is either semantic (has meaning) or non-semantic (has no meaning). Compare:

<!-- Non-semantic: tells you nothing about the content -->
<div id="nav">...</div>
<div id="main-content">...</div>
<div id="footer">...</div>

<!-- Semantic: the tag itself describes what it contains -->
<nav>...</nav>
<main>...</main>
<footer>...</footer>

The semantic version is better in every way: search engines understand it, screen readers navigate it correctly, and other developers can read it instantly.

Key HTML5 Semantic Elements

Tag	Use it for
`<header>`	Top of a page or section: logo, site title, main nav
`<nav>`	Navigation links: menus, breadcrumbs, pagination
`<main>`	Primary page content — use only once per page
`<section>`	A themed group of content: About, Features, Pricing
`<article>`	Self-contained content: blog post, tutorial, news article
`<aside>`	Related but secondary content: sidebar, tips
`<footer>`	Bottom of page: copyright, links, social media
`<time>`	Dates and times (helps search engines parse dates)

A Complete Semantic Page

<body>
  <header>
    <h1>Zero2Tech</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/tutorials">Tutorials</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h2>Learn Coding from Zero</h2>
      <p>Free tutorials for every skill level.</p>
    </section>

    <section id="tutorials">
      <h2>Latest Tutorials</h2>
      <article>
        <h3>What is CSS?</h3>
        <p>Published <time datetime="2025-06-01">June 1, 2025</time></p>
        <p>CSS styles your HTML pages...</p>
        <a href="/css-basics">Read More</a>
      </article>
    </section>
  </main>

  <aside>
    <h3>Popular Topics</h3>
    <ul>
      <li><a href="/html">HTML</a></li>
      <li><a href="/css">CSS</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2025 Zero2Tech. All rights reserved.</p>
  </footer>
</body>

SEO Benefit: Google gives extra weight to content inside <article> and <main>. A proper semantic structure can directly improve your search rankings.

Try It Yourself

Rebuild your about-me.html using semantic structure: <header> with nav, <main> with two <section>s (About and Skills), an <aside> with social links, and a <footer>.

❓ Frequently Asked Questions

Search engines use semantic tags such as header, main and article to understand the structure of a page. This improves both crawling and ranking.

No. Use a div when there is no suitable semantic tag, usually as a wrapper for styling. For meaningful sections, prefer semantic tags.