Semantic HTML and Accessibility: Building Better Websites

Grace-Loko — Mon, 29 Jun 2026 15:39:47 +0000

Semantic HTML and Accessibility: Building Better Websites

Introduction

Semantic HTML is the practice of using HTML elements that clearly describe the purpose of the content on a webpage. Instead of using many <div> elements, semantic tags such as <header>, <nav>, <main>, <section>, <article>, and <footer> make the page easier to understand.

Semantic HTML is important because it improves accessibility, helps search engines understand web pages, and makes code easier to read and maintain.

Before: Non-Semantic HTML

<div class="header">
    <h1>My Portfolio</h1>
</div>
<div class="navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</div>
<div class="content">
    <p>Welcome to my portfolio website.</p>
</div>

After: Semantic HTML

<header>
    <h1>My Portfolio</h1>
</header>
<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</nav>
<main>
    <section>
        <p>Welcome to my portfolio website.</p>
    </section>
</main>

Accessibility Issues I Found

1. Images Missing Alternative Text

Before:

<img src="images/profile.jpg">

After:

<img src="images/profile.jpg" alt="Profile picture of Grace Loko">

Adding alternative text allows screen readers to describe images to users with visual impairments.

2. Navigation Was Not Semantic

Before:

<div>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</div>

After:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</nav>

Using the <nav> element helps assistive technologies identify the website navigation.

3. Form Inputs Had No Labels

Before:

<input type="text" placeholder="Your Name">

After:

<label for="name">Name</label>
<input type="text" id="name" name="name">

Labels improve accessibility by helping screen readers identify each form field.

Conclusion

This accessibility audit helped me understand the importance of semantic HTML and accessible web design. By replacing non-semantic elements with semantic tags, adding image alt text, and using proper form labels, I made my portfolio more accessible and easier to use.
These improvements also make the website easier to maintain and improve the experience for all users.

DEV Community: Grace-Loko

Semantic HTML and Accessibility: Building Better Websites

Semantic HTML and Accessibility: Building Better Websites

Introduction

Before: Non-Semantic HTML

After: Semantic HTML

Accessibility Issues I Found

1. Images Missing Alternative Text

2. Navigation Was Not Semantic

3. Form Inputs Had No Labels

Conclusion