Understanding Semantic HTML — Cleaner & Accessible Web Pages

---

This week I explored Semantic HTML as part of my frontend learning journey.

📌 What is Semantic HTML?

Semantic HTML uses tags that convey meaning about the content inside them. Instead of generic <div>s and <span>s, you use:

• <header> — intro/header content

• <nav> — site navigation

• <section> — grouped content sections

• <article> — independent content like blog posts or product cards

• <aside> — related or side content (like sidebars)

• <footer> — footer content

• <figure> & <figcaption> — for images, diagrams, or code blocks with captions

✅ Why Use Semantic HTML?

• Accessibility: Helps screen readers and assistive tech understand content structure

• SEO: Search engines can better interpret your page

• Maintainability: Cleaner, more meaningful code for developers

🧪 Practice

I created a simple blog layout using only semantic tags. Here's a quick example using <article> to group independent content:

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008.</p>
</article>

You can also nest them, like this:

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Open-source browser by Mozilla. Second most popular since 2018.</p>
  </article>
</article>

And here’s how I used <aside> for extra, relevant content:

<aside>
  <p>The Epcot Center is a theme park at Walt Disney World Resort...</p>
</aside>

📂 GitHub: Semantic HTML Practice + Notes
(Feel free to clone the repo and follow along!)

Stay tuned as I continue sharing what I learn each week. 🙌

#frontenddevelopment #html #semantic #a11y #buildinpublic #webdev #krishanCode