Day 5: Semantic HTML Tags | Web Development Series

📘 Day 5: Semantic HTML Tags

Semantic HTML uses meaningful tags that clearly describe their purpose in the structure of a webpage. These tags make your code more accessible, SEO-friendly, and easier to maintain.

---

🔍 What Are Semantic Tags?

Unlike generic tags like <div> and <span>, semantic tags describe the content they hold. They help search engines and screen readers better understand your content.

📦 Common Semantic HTML Tags

• <header> – Top section (logo or nav)
• <nav> – Navigation links
• <main> – Main content
• <section> – Group of related content
• <article> – Independent post or news
• <aside> – Sidebar or extra content
• <footer> – Bottom section

📄 Example Layout

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a> | <a href="#">About</a>
</nav>

<main>
  <section>
    <h2>About Me</h2>
  </section>
  <article>
    <p>This is a blog post.</p>
  </article>
</main>

<aside>Sidebar content</aside>

<footer>
  <p>Copyright © 2025</p>
</footer>
    

🧠 Why Use Semantic HTML?

• ✅ Improves accessibility
• ✅ Boosts SEO
• ✅ Easier to read and maintain

🧪 Practice Task

• Create a layout using <header>, <main>, and <footer>.
• Add a <section> and an <article> inside <main>.

🚀 What’s Next?

In Day 6, we’ll start our first Mini Project: Personal Portfolio Page using everything you’ve learned!

Coming Soon: Day 6 - Portfolio Mini Project