Semantic HTML5

Use semantic elements to give meaning to your content, improving accessibility and SEO.

Semantic Elements

<header>
  <h1>Website Title</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
→
[Header area with site title]\n[Navigation menu]

Key semantic tags:

  • <header> - Introductory content
  • <nav> - Navigation links
  • <main> - Primary content
  • <article> - Self-contained composition

Page Structure

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
    <aside>Related info</aside>
  </main>
  <footer>Copyright</footer>
</body>
→
[Semantic page structure with distinct areas]

Benefits of semantic HTML:

  • Improved accessibility for screen readers
  • Better SEO through meaningful structure
  • Easier code maintenance
  • Enhanced styling possibilities

Common Errors

<!-- Overusing divs -->
<div id="header">...</div>
<div class="nav">...</div>

<!-- Misusing sections -->
<section>
  <h2>Title</h2>
  <p>Content</p>
</section>

Remember: Not every group of elements needs a semantic tag. Use <div> for styling wrappers without semantic meaning.

Practical Use: Blog Layout

<header>
  <h1>Tech Insights</h1>
  <p>Latest technology news</p>
</header>

<nav>
  <a href="/ai">AI</a>
  <a href="/web">Web Dev</a>
  <a href="/security">Security</a>
</nav>

<main>
  <article>
    <h2>CSS Grid Revolution</h2>
    <section>
      <h3>Benefits</h3>
      <p>Simpler layouts...</p>
    </section>
  </article>
</main>

<footer>
  <p>&copy; 2023 Tech Insights</p>
</footer>
→
[Blog with semantic structure and clear sections]

Your Task: News Portal

Create a semantic page with:

  1. Header with site title
  2. Navigation menu with 3 links
  3. Main content area with an article
  4. Footer with copyright information
  5. At least one section within the article
Section 1/5Semantic Elements

Semantic Elements

Key semantic tags:<header> - Introductory content<nav> - Navigation links<main> - Primary content<article> - Self-contained composition

Semantic HTML5

Use semantic elements to give meaning to your content, improving accessibility and SEO.

Semantic Elements

<header>
  <h1>Website Title</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
→
[Header area with site title]\n[Navigation menu]

Key semantic tags:

  • <header> - Introductory content
  • <nav> - Navigation links
  • <main> - Primary content
  • <article> - Self-contained composition

HTML Editor

Preview