When I built my first multi-page portfolio, I thought "if it looks right, it works." Then I ran Lighthouse and WAVE on my site — and realized looking right and being accessible are two different things .

Here's what I learned about semantic HTML, the accessibility issues I found, and how I fixed them.

What is semantic HTML (and why it matters)?

Semantic HTML means using the tag that describes what the content is — not just how it looks.

A <div> says nothing. A <nav> says "this is navigation." A <header> says "this is the top of the page." A <main> says "this is the primary content."

Why it matters:

Screen readers use semantic tags to let users jump straight to the main content or navigation.

Search engines understand your page structure better.

Other developers (including future you) can read the code and instantly know what each block does.

Accessibility tools like Lighthouse and WAVE can only help if your structure is meaningful.

In short: semantic HTML makes your site usable by more people, with…