Why Semantic HTML is a Superpower for Your Website

As I’ve been building my personal portfolio during the IYF Season 11 program, I realized that writing code is about more than just making things look "right"—it’s about making them accessible for everyone. The secret is Semantic HTML.

What is Semantic HTML?

Semantic HTML uses tags that provide meaning to the web page rather than just layout instructions. Tags like

, , , , and tell the browser and screen readers exactly what content they are interacting with.

If you use

for everything, you are handing a screen reader a blank map. Semantic tags act like a GPS, allowing users with visual impairments to navigate your site efficiently.

Before vs. After

The difference is clear when comparing structure:

Before (Non-Semantic):

HTML

My Portfolio

Home | About | Contact

Welcome to my site...

After (Semantic):

HTML

My Portfolio

• Home
• About
• Contact

Welcome to my site...

Fixing Accessibility Issues

During my accessibility audit (Task 2.3), I identified three key areas to improve:

Missing alt Attributes: I had images without descriptions. I fixed this by adding context, such as alt="Portrait of Gladwell Muthoni, web development student", ensuring screen readers can describe images to visually impaired users.

Lack of Semantic Structure: My initial gallery relied on generic containers. Switching to

and tags organized my project list logically, helping assistive technology categorize the content.

Heading Hierarchy: I was using

tags for visual styling rather than logical structure. I corrected this to follow a strict

to

hierarchy, which helps screen readers outline the page properly.

My portfolios URL

https://github.com/gladwellmuthoni/iyf-s11-week-01-gladwellmuthoni.git