Understanding Semantic HTML — Cleaner & Accessible Web Pages

krishan — Mon, 07 Apr 2025 13:18:11 GMT

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

s and s, you use:

— intro/header content
— site navigation
— grouped content sections
— independent content like blog posts or product cards
— related or side content (like sidebars)
— footer content
&
— 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

to group independent content:

<article>
  <h2>Google Chromeh2>
  <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 Browsersh1>
  <article class="browser">
    <h2>Mozilla Firefoxh2>
    <p>Open-source browser by Mozilla. Second most popular since 2018.p>
  article>
article>

And here’s how I used

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

Semantic tags

Understanding Semantic HTML — Cleaner & Accessible Web Pages