Semantic HTML & Accessibility: What I Learned as a Beginner

I am two weeks into my web development journey at the IYF Weekend Academy
Season 11, and this week I learned something that completely changed how
I think about writing HTML — semantic HTML and accessibility.

What is Semantic HTML?

Semantic HTML means using the RIGHT tag for the RIGHT purpose. Before I
learned this, I thought all HTML tags were the same. I used to write
everything inside <div> tags. But that is wrong!

Here is an example of non-semantic HTML:

<div class="header">
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
    </div>
</div>
<div class="main">
    <div class="title">Welcome</div>
    <div class="text">This is my site...</div>
</div>
<div class="footer">© 2026</div>
` ``

Here is the same code written with semantic HTML:

` ``html
<header>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </nav>
</header>
<main>
    <h1>Welcome</h1>
    <p>This is my site...</p>
</main>
<footer>© 2026</footer>

The second version is cleaner, easier to read, and tells the browser
exactly what each part of the page is for.

Why Does it Matter?

Semantic HTML matters for three reasons:

1. Screen Readers — People who are blind use screen readers to
browse the internet. A screen reader can understand <nav> and tell
the user "this is a navigation menu". It cannot do that with <div>.

2. Search Engines — Google understands semantic HTML better.
A page with proper headings and structure ranks better in search results.

3. Other Developers — When someone else reads your code, semantic
HTML makes it much easier to understand what each section does.

Accessibility Issues I Found

When I audited my portfolio page using Chrome Lighthouse, I found these issues:

Issue 1 — Generic image alt text

I had written alt="Profile placeholder image" which is too vague.
I fixed it to alt="John Kariuki profile photo" which is more descriptive
for screen readers.

Issue 2 — Wrong heading order

I jumped from <h1> straight to <h3>, skipping <h2>. This confuses
screen readers. I fixed it by changing <h3> to <h2>.

Issue 3 — Missing lang attribute

I forgot to add lang="en" to my <html> tag. This tells the browser
what language the page is in. A small fix with a big impact!

My Lighthouse Score

After fixing these issues my Lighthouse accessibility score improved.
Running the audit and seeing the score go up felt really satisfying!

Final Thoughts

I used to think accessibility was something advanced developers worried
about. But these fixes took less than 10 minutes and made my site better
for everyone. If you are just starting out like me, start writing semantic
HTML from day one — it is a habit worth building early.

推荐订阅源