Using Semantic Elements to Improve Your HTML

Introduction

Making sure that your website is easy for search engines to crawl and understand is hugely important. It's also equally important to make sure that your website is well structured to make it more accessible for your readers.

One way that you can improve the structure of your website is by using semantic HTML elements. So, in this article, we're going to quickly look at what semantic HTML elements are and how you can use them yourself.

What Are Semantic Elements?

Semantic elements are just HTML elements that have a meaning; such as <article>, <nav> and <footer>. These can be used instead of non-semantic elements such as <div> and <span>.

For example, let's imagine that we have this basic layout for a blog post page using non-semantic HTML:

<body>
    <div id="header">
    </div>
  
    <div id="navigation">
    </div>
  
    <div id="content">
        <div id="blog-content">
        </div>

        <div id="blog-sidebar">
        </div>
    </div>
  
    <div id="footer">
    </div>
</body>

If we wanted to change this structure to use semantic elements, it might look something like this:

<body>
    <header>
    </header>
  
    <nav>
    </nav>
  
    <main>
        <article>
        </article>

        <aside>
        </aside>
    </main>
  
    <footer>
    </footer>
</body>

As you can see, we've removed all of the <div> elements and replaced them with elements which have a specific purpose.

In the non-semantic version, we were using IDs on the tags to show what the purpose of the tag was. Typically, IDs are added to HTML so that we can style particular elements using CSS (cascading style sheets) or manipulate them using JavaScript. So, by using the semantic tags, we've managed to reduce the cognitive overload for a developer looking at the HTML.

Here's a handy list from W3Schools that shows some of the the different semantic elements that are available for us to use when building our web pages:

<article> - Defines independent, self-contained content.
<aside> - Defines content aside from the page content.
<details> - Defines additional details that the use can view or hide.
<figcaption> - Defines a caption for a <figure> element.
<figure> - Specifies self-contained content, like illustrations, diagrams, etc.
<footer> - Defines a footer for a document or section.
<header> - Specifies a header for a document or section.
<main> - Specifies the main content of a document.
<mark> - Defines marked/highlighted text.
<nav> - Defines navigation links.
<section> - Defines a section in a document.
<summary> - Defines a visible heading for a <details> element.
<time> - Defines a date/time.

If you're just getting started with using semantic HTML and want to know which element to use, you can check out the "HTML5 Element Flowchart" by HTML5 Doctor.

Improving Accessibility

One of the huge benefits of using semantic HTML elements is that it can improve the accessibility of your website. For example, let's say that we have these two versions of HTML:

Non-semantic version:

<p class="heading-1">
    Heading 1
</p>

<p class="heading-2">
    Heading 2
</p>

Semantic version:

<h1>
    Heading 1
</h1>

<h2>
    Heading 2
</h2>

For the purpose of this example, we'll make the assumption that the heading-1 and heading-2 CSS classes apply styles to change the appearance of the text and make them seem like titles to users. We'll also make the assumption that to a human eye viewing the page, the output is the same.

Now, although they both appear the same to a human viewing them through a traditional web browser, they won't look the same to a screen reader. Screen readers are unaware of styling and scripts added through CSS and JS and are used by people who are visually impaired or blind and allows them to use their computer. In fact, according to AbilityNet, there are nearly 2 million people in the UK living with sight loss.

Due to the fact that a screen reader user can only see the structure that's generated by the HTML, they wouldn't be able to see how the text looks after applying the heading-1 and heading-2 styles. For this reason, the user would be unaware of the fact that the two pieces of text are actually titles. However, by using the <h1> and <h2> tags, the screen reader would be able to detect the headings and speak them as needed.

As well as improving the accessibility for screen readers, by using the correct elements, you can also improve the keyboard accessibility of a page. For example, let's imagine that we have this non-semantic HTML:

<div class="btn">
    Play Audio
</div>

At first, this may seem perfectly fine to a viewer because the btn styling would apply the styling to make it appear as a button. However, the user wouldn't be able to select it using their keyboard (by using pressing "Tab") and therefore wouldn't be able to press it (for lack of a better term) using their "Enter" key. To change this, you could update the element to look something more like this:

<button class="btn">
    Play Audio
</button>

As you can see, we've swapped the <div> tag to using a <button> element instead. We've also left the "btn" class so that the button can still look as intended in a traditional browser. However, the user would now be able to select it using their keyboard and a screen reader would also be able to recognise the element as being an actual button that can be interacted with.

Improving SEO

Another benefit of using semantic HTML is that is can help with SEO (search engine optimisation). When a search engine crawls your website for indexing, it will look at the structure of your pages. By checking the structure, it will be able to get an idea of what the page is about, the content that's on it, and what types of keywords it should be ranked for. One of the ways that it does this is checking the headings of a page.

Sticking with our example from above, crawlers understand which text is/isn't a heading in the similar way that a screen reader does. As a result of this, isn't important to make it obvious which elements are headings so that the bot can quickly understand what your page is about and the type of content that it covers. It's well known that the easier a bot can crawl and understand your website, the more beneficial it will be for you in terms of search rankings.

As a slight side note, if you're interested in seeing more ways that you can improve your website, check out 17 Ways to Get Your Website Ready to Win.

According to Jason Barnard, Fabrice Canel from Bing said pages using the correct semantic elements had an SEO advantage over pages that weren't. He also said that Martin Splitt from Google confirmed the same thing in 2020. So, if that's not an incentive to get started with semantic HTML, I don't what is!