Level:Beginner

Semantic HTML

Semantic HTML means using elements that clearly describe their meaning. This improves SEO, accessibility, and readability for both humans and browsers.

What is Semantic HTML?

  • Semantic elements describe what content is, not just how it looks.
  • Example: <header> means “page header” instead of using a plain <div>.
  • Semantic HTML helps screen readers navigate pages and helps search engines understand your structure.

Why It Matters

  • SEO: Search engines can understand what’s important.
  • Accessibility: Users can jump between sections using headings and landmarks.
  • Maintainability: Your code is cleaner and easier to read.

Common Semantic Elements

  • <header> — top of a page or section (logo, title)
  • <nav> — navigation links
  • <main> — main content of the page (use once)
  • <section> — related content grouped together
  • <article> — self-contained content (blog post, news, card)
  • <aside> — side content (tips, ads, related links)
  • <footer> — bottom of a page or section

Semantic Layout Example

Semantic HTML Layout Examplehtml
<!-- Semantic page layout example -->
<header>
  <h1>w3camp Blog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/tutorials">Tutorials</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>What is Semantic HTML?</h2>
    <p>Semantic elements describe the meaning of content.</p>
  </article>

  <section>
    <h2>Course Sections</h2>
    <p>Sections group related content on a page.</p>
  </section>

  <aside>
    <h3>Quick Tips</h3>
    <p>Use <main> once per page and one <h1> title.</p>
  </aside>
</main>

<footer>
  <p>© 2026 w3camp</p>
</footer>

Preview

localhost:3000
Loading preview...