Semantic HTML and Accessibility: What I Learned

Faith — Sat, 31 Oct 2026 11:06:55 +0000

When I started building my portfolio, I made every part of the page with <div> tags. A <div> is just a box, and it doesn't tell the browser what is inside it.

Semantic HTML means using tags that describe what the content is, like <header>, <nav>, <main> and <footer>. People who are blind use screen readers, and these tags tell the reader what each part of the page is, so they can jump straight to the menu or the main content. Search engines also understand the page better, and the code is easier to read.

Alt text is another important part. It is a short description inside an image tag. Without it, a screen reader has nothing meaningful to read, so a blind person misses what the image shows.

Before and after

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

The page looks the same, but now every part has a meaning.

Three problems I fixed

Missing menu. My contact page had no navigation, so a person using a keyboard or screen reader couldn't reach the other pages. I added a <nav> to every page.
A broken email link. My "Get in touch" link pointed to a fake address, your-email@example.com. I changed it to my real email so the link works.
A hidden focus outline. My form CSS removed the outline that shows which field is selected. People who use a keyboard need it, so I deleted that line.

See it live

https://fairyfaiyth.github.io/iyf-s12-week-02-fairyfaiyth/

What I learned

I learned that tags like <nav> and <main> tell screen readers what each part of a page is. I also learned that small fixes, like a working email link and a visible focus outline, make a website easier for everyone to use.

Before this week I did not think much about how a page sounds to someone who cannot see it. Now I check that every page has a menu, working links and a clear structure.

Why Semantics Matter: My Journey Into Web Accessibility

Faith — Wed, 30 Sep 2026 18:26:41 +0000

When building for the web, it is easy to fall into the habit of structuring everything with div tags. However, my first week at IYF taught me that how we write HTML fundamentally impacts how people experience our websites.

Here is what I learned about semantic HTML and web accessibility during my latest portfolio audit.

What is Semantic HTML and Why Does It Matter?

Semantic HTML means using tags that clearly describe their meaning to both the browser and the developer. Instead of using generic layout blocks, semantic tags like header, nav, main, article, and footer clearly define the structure of a document.

This matters because accessibility is a foundational requirement, not an optional feature. Screen readers and other assistive technologies rely entirely on these tags to navigate a webpage. Without semantic milestones, a user relying on a screen reader is forced to listen to a chaotic wall of text with no clear structural guideposts.

Before and After: The Semantic Shift

To see the difference, look at how a simple layout can be transformed from a messy container layout to clear, meaningful semantic elements:

Non-Semantic (Bad Practice)

<!-- BAD: Non-semantic version -->
<div class="header">
    <div class="logo">My Site</div>
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
        <div class="nav-item">Contact</div>
    </div>
</div>

Semantic (Good Practice)

<!-- GOOD: Clean Semantic version -->
<header>
    <h1>My Site</h1>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

Auditing My Portfolio: 3 Key Fixes

Using Chrome DevTools Lighthouse and the WAVE Web Accessibility Tool, I ran an audit on my newly created portfolio site. I uncovered a few critical issues and immediately fixed them:

Missing Image Alt Text: A few placeholder images lacked alt descriptive attributes. I resolved this by adding descriptive alt="Profile picture of developer" text so screen reader users know exactly what the image depicts.
Broken Form Labels: My input fields in contact.html weren't properly wrapped or explicitly connected to their labels. I linked them explicitly using matching id and for attributes inside the label tags.
Skipped Heading Hierarchy: My page structure skipped straight from an h1 to an h3. I re-aligned the text flow into a strict logical hierarchy (h1 -> h2 -> h3) to avoid confusing page outlines.

After implementing these fixes, my Lighthouse accessibility score reached a perfect score!

Check Out My Project

You can see my fully optimized, semantic multi-page portfolio live in action here:
https://github.io

DEV Community: Faith