🏗 Day 7 — Semantic HTML Elements & ARIA Roles

on

🏗️ Day 7 — Semantic HTML & Structure

Welcome to Day 7! Today, you’ll discover how to give your HTML more meaning using semantic elements. Semantic HTML makes your web pages easier to read, maintain, and understand — not only for developers but also for browsers and screen readers.

📘 1️⃣ What is Semantic HTML?

Semantic elements clearly describe their meaning in the code itself. Instead of using generic <div> or <span> for everything, we use meaningful tags such as <header>, <footer>, and <article>. 

<header>Website Header</header>
<nav>Navigation Links</nav>
<main>
  <article>Main Article</article>
</main>
<footer>Footer Information</footer>

📂 2️⃣ Benefits of Semantic HTML

  • Improves readability for developers
  • Helps browsers understand content structure
  • Improves accessibility for screen readers
  • Enhances SEO by giving context to search engines

📋 3️⃣ Common Semantic Elements

<header> — Defines introductory content or navigation
<nav> — Holds navigation links
<main> — Main content of the document
<section> — Logical grouping of content
<article> — Self-contained piece (like a blog post)
<aside> — Sidebar or secondary info
<footer> — Bottom section of the page
<figure> and <figcaption> — For images and captions

🧱 4️⃣ Building a Semantic Page Layout

<header>
  <h1>My Personal Blog</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>The Joy of Learning HTML</h2>
    <p>Semantic HTML helps you code with purpose.</p>
  </article>
</main>

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
    <li><a href="#">HTML Forms</a></li>
  </ul>
</aside>

<footer>
  <p>© 2025 Rahul Naidu</p>
</footer>

🧩 5️⃣ Section vs Article

<section> groups related content under one heading, while <article> represents an independent item like a post or comment. Use <section> for organization and <article> for reusable, standalone content.

🧩 6️⃣ Figure and Figcaption

<figure>
  <img src="coding.jpg" alt="Coding workspace">
  <figcaption>A developer's workstation</figcaption>
</figure>

🧠 7️⃣ Practice Task

  1. Create a webpage using <header>, <main>, and <footer>.
  2. Inside <main>, include one <article> and one <aside>.
  3. Add an image with <figure> and <figcaption>.
  4. Ensure headings and paragraphs are semantically correct.

🧮 Mini Quiz

  • Q1: Which tag defines the main content of a page?
  • Q2: What tag is used for related secondary content?
  • Q3: What’s the difference between <section> and <article>?

🎯 Summary

You’ve learned how to structure content meaningfully using semantic HTML. Semantic tags are crucial for modern web development and ensure your website is readable, accessible, and professional. Next, we’ll add media and iframes to make pages more interactive.

Comments

Post a Comment