Semantic

Introduction.

Growing up as a self-taught developer I used to just write HTML code using the common separators such as divs not knowing that it had an impact in the SEO and Accessibility.

You probably have made the same mistake as a developer but after reading this article you will have a better understanding on how to implement semantic HTML in your code to enhance Search Engine Optimization in the next website that you build.

By the end of this article you`ll have learned:

SEO implementation.
Accessibility implementation.
Best Semantic HTML practices togather with examples.

Semantic HTML

Web design nowadays is not just about displaying content on a page it`s about creating experiences understood by both humans and machines .

Semantic HTML - It refers to the usage of HTML elements that convey meaning beyond just presentations.

Think of it as labels that make it easier for understanding. For instance ,picture yourself entering into a company building and the doors are not labelled. You will really have a hard time finding a specific room i.e the accountants office whereas if the rooms are labelled ,it becomes easier for someone to know where they are going.

Examples of Semantic HTML includes:

<header>– represents the introductory content of a page.
<nav> – defines a section of navigation links.
<main> – identifies the main content of a page.
<article> – represents an independent piece of content.
<footer> – represents footer information about its nearest section or page.
<aside>-a side section on your content

Code Examples

1. Semantic HTML

<body>
    <h1>I love programming.</h1>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/Services">Services</a>
            <a href="/Contact">Contact</a>
        </nav>
    </header>
</body>

For instance in the above code, inside our body element, it shows that we have a header which is the introductory part of our page. Inside the header I have used a semantic HTML of nav to simply tell the browser that that is the navigation section of the page. You can be able to see that it enhances code readability among different developers.

2.Non - Semantic HTML

<body>
    <h1>I love programming.</h1>
    <div class = header>
        <div class = nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/Services">Services</a>
            <a href="/Contact">Contact</a>
        </div>
    </div>
</body>

The above code just uses common HTML elements in coding. Before you even realize you will end up using many divs which can even confuse you and make it difficult for styling your website. Though you may not see any impact on the webpage when you view it but it enhances crawling and indexing of your site.

Below is an explanatory diagram to help you understand the difference between the two.

How to Troubleshoot common Semantic HTML Issues

In this section we are going to see on how to troubleshoot and solve some of the common issues faced by beginner developers regarding semantic HTML.

Common semantic HTML mistakes and how to avoid them

Using <divs> instead of Semantic Elements

Problem: Many beginner developers still use <divs> instead of semantic HTML.

Below is an example of non semantic HTML code:

<div = heading> Welcome To My site</div>
<div = content> This is my main page</div>
<div = footer> All rights Reserved</div>

Solution : Instead of using <divs> we should use semantic elements. Below is the same exact code with a semantic element.

<header> Welcome To My site </header>
<main>This is my main page</main>
<footer>All rights Reserved</footer>

When I run both of the codes, the result may look the same but the code that has used semantic elements has a higher chance of being indexed and crawled faster than the one which has not used semantic elements. Another reason why the above fix matters is because the screen readers can interpret the page structure.

Missing Alt Text for Images

As we know, the img tag is a self closing element thus taking an attribute inside the chevrons. Another key point to note down is that whenever there is an attribute there must also be a value.

Problem: Failure to include alternative text

For example :

<img src = "profile.jpg">

The above code simply implies that incase my image fails to load for whatever reason, there wont be any alternative text to display in place of the image thus making it a disadvantage for the visually impaired people using screen readers since there is lack of accessibility. Instead here is a proper way to do it.

Solution: Ensuring to include alt text whenever using the <img> element

<img src = "profile.jpg" alt = "profile picture">

In the second example if the image fails to load, the text "profile picture" will be displayed thus enhancing readability for those using screen readers.

Improper use of <section> and <article> elements

Problem :Beginner developers often don't know when to use section or article. Below is a good example of a misuse of section element.

<section>
    <h2>Programming Blog</h2>
        <p>This is my blog post.</p>
</section>

Here is how you can correct the above mistake.

Solution: Use <section> to group related content i.e the About page.

Use <article> for for self contained content.

<article>
    <h2>Programming Blog</h2>
        <p>This is my blog post.</p>
</article>

Incorrect heading hierarchy.

As you know the heading tags starts from h1 - h6. They are designed that way to help form the structure of your content but not styling .

Problem: Skipping heading levels trying to style our page. Below is an example.

<h1>About Us</h1>
<h4>Our mission</h4>
<h6>Our Goals</h6>

Solution: Always maintain a logical hierarchy.

<h1>About Us</h1>
<h2>Our mission</h2>
<h3>Our Goals</h3>

Those are some of the common issues when it comes to semantic HTML and how we can resolve those issues to ensure SEO and accessibility implementation.

Best Testing Methodologies for Accessibility Compliance.

Accessibility compliance testing is about making sure your website meets WCAG (Web Content Accessibility Guidelines) guidelines and is usable by people with different abilities. The following methods can be used to achieve the same.

Automated testing.

This is where automated tools scan your website to detect common accessibility issues. Though it is considered quick and scalable, it usually catches only up to 30-40% of the issues. The tools include:

Google Lighthouse
axe DevTools
WAVE WebAIM evaluator

Manual Testing.

This involves a developer interacting with the site to troubleshoot the issues that may arise. Manual testing enables the developer to catch some issues that automated testing can't. The developer manually checks the following:

Navigation through the keyboard i.e using Tab | Esc | Space Bar
Zoom/ responsive check
Content readability.
Screen reader testing using NVDA (NonVisual Desktop Access).

Below is an example of NVDA in action.

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

In the above code, the NVDA will announce “Email Address, edit, blank” since there is a label provided.

But if the label is missing, the NVDA will announce “Edit Blank” as the code shows below.

<input type="email" id="email" name="email">

User Testing with People with Disabilities

This is the most reliable but often overlooked method since it involves the users with disability testing the usability of the site. The users usually test the site by filling out forms and navigating the menu thus providing direct user feedbacks.

Combined Approach

This involves using all the three methodologies since each of them will result in accessibility compliance. Below is a simple breakdown of what each methodology will do.

Automated testing - Quick first pass.
Manual expert testing - Covers deeper WCAG checks.
User testing - Validates real-world accessibility.

Technical testing and validation methods.

Accessibility score is measured by automated tools that can scan your site against accessibility standards . Here are some tools and ways to calculate your accessibility score.

Google Lighthouse (Built into Chrome DevTools)
- Open your site in Google Chrome
- Right-click - Inspect - Go to Lighthouse tab
- Select Accessibility (and SEO, Performance if you want)
- Run the audit
- You’ll get an Accessibility score out of 100
Wave Web Accessibility Tool (by WebAIM)
- Visit Wave Tool
- Enter your site’s URL
- It highlights accessibility errors, contrast issues, and ARIA usage
- Instead of a score, it gives detailed error counts.
Manual Testing (For True Accuracy)
- Test your site using only a keyboard (no mouse)
- Use a screen reader (NVDA, JAWS, or Voice Over)
- Check color contrast ratios with tools like Contrast Checker

There are a ton of ways to do it but as a beginner developer, I highly recommend that you use the Google Lighthouse that is an already built in Dev tool. Here is a detailed breakdown on how you can use Google lighthouse to calculate your accessibility score.

Step 1 : Open Your Website in Chrome

Launch Google Chrome.
Go to the website or local project you want to test.

Step 2 : Open Developer Tools

Right-click anywhere on the page → Inspect.
Or press Ctrl + Shift + I (Windows)

Step 3: Go to Lighthouse Tab

In DevTools, look at the top menu tabs (Elements, Console, Sources, etc.).
If you don’t see Lighthouse, click the >> icon to reveal hidden tabs.
Select Lighthouse.

Step 4: Configure Your Audit

Choose what you want to test. For accessibility:
- Check Accessibility box (you can also select Performance, SEO, Best Practices).
Select Mode:
- Mobile → simulates a phone (good for mobile-first testing).
- Desktop → tests as if on a computer.

Step 5: Run the Audit

Click Generate Report.
Lighthouse will reload your page and run checks.

Step 6: Check Your Accessibility Score

At the top of the report, you’ll see a score 0–100 for accessibility.

90–100 = Good (green)
50–89 = Needs improvement (orange)
0–49 = Poor (red)

Step 7: Fix & Re-Test

Lighthouse lists failed audits with explanations and code examples.
Fix those issues in your HTML/CSS/ARIA.
Re-run the audit until your score improves.

If you follow the above seven simple steps, you will not just build websites but you will build a website that implements accessibility and SEO.

Practical Implementations of Semantic HTML and their impact in Accessibility score

Example of Semantic HTML code

<body>
    <h1>I love programming.</h1>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/Services">Services</a>
            <a href="/Contact">Contact</a>
        </nav>
    </header>
    <main>
        <section>
            <h2>List of Semantic Html</h2>
            <ol>
                <li>Header</li>
                <li>Main</li>
                <li>Article</li>
                <li>Footer</li>
                <li>Aside</li>
                <li>Figure</li>
            </ol>
        </section>
        <article>
            <p>Learning programming skills is very key.It helps solve real world problems thus making our work easier.
            </p>
        </article>
    </main>
</body>

After running this sample HTML code in my browser and inspected it with Lighthouse , I got the result below.

You can see that all the scores are good thus our site has satisfied the all the requirement. Below is another sample HTML code that has no Semantic HTML.

<body>
    <h1> Programming</h1>
    <p>I love <br> <strong>Programming</strong>.</p>
    <p>Learning programming skills is very key.It helps solve real world problems thus making our work easier. <br>If
        you have programming skills you can be able to develop websites and create your own mobile applications. <br> By
        the end of this course one should be well equiped with the following programming languages.
    </p>
    <ol>
        <li>Javascript.</li>
        <li>Python.</li>
        <li>Cascading Style Sheet.</li>
        <li>Html.</li>
    </ol>

    <img src="Images/2.jpg" alt="">
    <br>
    <p>In addition to the programming languages,one will gain practical skills Such as:</p>
</body>

Here is the result score of the site which has not used semantic HTML.

As we compare the two you will realize that there is a slight difference in the SEO score. The difference comes due to semantic HTML. You can download my source code in my Github repository that is available below for you to try it out and see the difference in the score by yourself. The repository also contains more examples for you to practice with.

Semantic_HTML

In summary, Semantic HTML is more than just a best practice — it’s the foundation of building accessible, search-engine-friendly, and well-structured websites. By choosing the right elements for the right purpose, you not only make your code easier to read and maintain, but you also ensure that users, browsers, and assistive technologies can all interpret your content correctly.

If you enjoyed this article, follow me on GitHub for more web development tips and projects. I would also like to hear your thoughts on how you implemented semantic HTML in your website.

A Developer’s Guide to Implementing Semantic HTML Effectively