New Sectioning Elements in HTML5

---

🔹 Introduction to Semantic Elements

• Semantic elements are HTML tags that clearly describe their meaning to both the browser and the developer.
• Examples: <header>, <footer>, <article>, <section>, <nav>, <aside>.
• They improve readability, SEO (Search Engine Optimization), and accessibility for screen readers.
• Earlier in HTML4, most pages used <div> with id="header", id="footer". Now, HTML5 has dedicated tags.

✅ Example of semantic vs. non-semantic:

<!-- Non-semantic (old way) -->
<div id="header">Welcome</div>

<!-- Semantic (HTML5 way) -->
<header>Welcome</header>

---

🔹 <header> and <footer>

• <header> → Represents the top section of a page or a section. Usually contains logo, title, navigation, and introductory content.
• <footer> → Represents the bottom section of a page or a section. Usually contains copyright, contact info, links, social media icons.

✅ Example:

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

<footer>
  <p>&copy; 2025 My Blog. All rights reserved.</p>
</footer>

---

🔹 <article> and <section>

• <article> → Represents independent content that could stand alone.

  • Example: A blog post, news article, or forum post.

• <section> → Represents a thematic grouping of content.

  • Example: Chapters of a book, different sections in an article.
  • Sections can contain headings and paragraphs.

✅ Example:

<article>
  <h2>Benefits of Exercise</h2>
  <p>Regular exercise keeps you healthy and active.</p>

  <section>
    <h3>Physical Benefits</h3>
    <p>Improves strength, stamina, and flexibility.</p>
  </section>

  <section>
    <h3>Mental Benefits</h3>
    <p>Reduces stress and improves concentration.</p>
  </section>
</article>

---

🔹 <nav> and <aside>

• <nav> → Represents navigational links.

  • Typically includes menus, tables of contents, or navigation bars.

• <aside> → Represents content that is indirectly related to the main content.

  • Example: Sidebar, advertisements, related links, author bio.

✅ Example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">10 Tips for Healthy Living</a></li>
    <li><a href="#">Best Morning Exercises</a></li>
  </ul>
</aside>

---

✅ Key Benefits of New Sectioning Elements

• Make code cleaner and structured.
• Improve SEO ranking as search engines understand the role of each section.
• Help screen readers (for visually impaired users) navigate content easily.
• Reduce unnecessary <div> usage.

---

👉 For your exam, always remember:

• <header> and <footer> → Top and bottom.
• <article> → Independent content.
• <section> → Grouped content.
• <nav> → Navigation.
• <aside> → Sidebar or extra info.