Get your FREE copy of "The Clean Coder's Guide to Laravel" and subscribe for future posts!

Join over 6,500+ developers who have already downloaded their copy!

Drop your email in the box below and you'll get notified every time a new post is published. You'll also get a FREE copy of my 70 page PDF that shows you how you can make your Laravel projects cleaner.

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 is Semantic HTML?

Semantic HTML is HTML that is made up of semantic HTML elements, which are just HTML5 tags that convey a meaning; such as <article>, <nav> and <footer>. These can be used instead of non-semantic elements such as <div> and <span>.

To get a better understanding of what this means, let's take a look at a semantic HTML example. For instance, let's imagine that we have this basic layout for a blog post page using non-semantic HTML:

        
 1<body>
 2    <div id="header">
 3    </div>
 4 
 5    <div id="navigation">
 6    </div>
 7 
 8    <div id="content">
 9        <div id="blog-content">
10        </div>
11 
12        <div id="blog-sidebar">
13        </div>
14    </div>
15 
16    <div id="footer">
17    </div>
18</body>

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

        
 1<body>
 2    <header>
 3    </header>
 4 
 5    <nav>
 6    </nav>
 7 
 8    <main>
 9        <article>
10        </article>
11 
12        <aside>
13        </aside>
14    </main>
15 
16    <footer>
17    </footer>
18</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 HTML5 semantic tags, we've managed to reduce the cognitive overload for a developer looking at the HTML. It also provides semantic structure to the HTML so that crawlers (such as for Google search results) can understand your site easier. This can lead to a huge SEO benefits and better search rankings.

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.

Why Use Semantic HTML?

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:

        
1<p class="heading-1">
2    Heading 1
3</p>
4 
5<p class="heading-2">
6    Heading 2
7</p>

Semantic version:

        
1<h1>
2    Heading 1
3</h1>
4 
5<h2>
6    Heading 2
7</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:

        
1<div class="btn">
2    Play Audio
3</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:

        
1<button class="btn">
2    Play Audio
3</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!

FAQ

What is the <main> semantic HTML element?

The main element defines the main, dominant content of the document or page. There should only be one main element in a HTML document and it shouldn't use the hidden attribute. Typically, this element would then contain other elements such as the article, section, p, etc. elements.

Should I always use semantic HTML?

Although you're not required to use semantic HTML tags, it's a good practice to use them whenever possible. As we've seen, they can provide a lot of benefits to the developers writing/maintaining the HTML, as well as improving the accessibility and SEO of the page.

Is <header> a semantic tag?

Yes! The header element is a semantic HTML element that represents a group of introductory aids, such as a logo, search bar, navigation, etc. It's typically used at the top of the page and might contain the global navigation for the site.

However, it's worth noting that the header element can also be used within sections (such as those defined with the section element) to represent a header for that particular section. As a result, this means that a page can contain many header elements.

Is <video> a semantic tag?

Yes! The video element is a semantic HTML element that represents a video player. It conveys its purpose to both the browser and the developer (in the same way as audio can be used to embed an audio player, and img can be used to embed an image), making it a semantic HTML element. It can be used to embed video content in an HTML document.

Is <p> a semantic tag?

Yes! The p element is a semantic HTML element that represents a paragraph. Other similar elements that are used to represent different types of text include h1-h6 (for headings), blockquote (for long quotes), and pre (for preformatted text).

Should I avoid using <div>?

Although the div element is not a semantic HTML element, it's still a useful element to use in HTML. It's a generic container element that can be used to group other elements together. It's often used to group elements together for styling purposes, or to group elements together for JavaScript purposes. However, if there is a suitable semantic HTML element than can be used, then it's often better to use that instead.

Should I use the <footer> tag in HTML?

If you're website contains a footer, then it's a good idea to use the footer element to represent it rather than just a div. This indicates that the element is indeed a footer and not just a generic container element. A footer can represent the footer for the entire page, or it can be used within a section element to represent the footer for that particular section.

The footer element might include things such as the author, links to related documents, copyright information, etc.

Which element should I use for a sidebar?

If you're adding a sidebar to your page (such as a "related articles" section for a blog post), then you can use the aside element to represent it. This element is used to represent content that is related to the main content of the page, but not actually part of the main content of the page.

Conclusion

Hopefully, this post should have given you a brief insight into what semantic elements are and how you can use them to improve your HTML.

If this post helped you out, I'd love to hear about it. Likewise, if you have any feedback to improve this post, I'd also love to hear that too.

If you're interested in getting updated each time I publish a new post, feel free to sign up for my newsletter below.

Keep on building awesome stuff! 🚀

Get your FREE copy of "The Clean Coder's Guide to Laravel" and subscribe for future posts!

Join over 6,500+ developers who have already downloaded their copy!

Drop your email in the box below and you'll get notified every time a new post is published. You'll also get a FREE copy of my 70 page PDF that shows you how you can make your Laravel projects cleaner.

Blog post banner image by Jess Pickup.