How important is having semantic HTML on your websites?

Written by

Walter G.

Published on

June 30 2019

Modified on

October 16 2022

Filed under

Article

One of the biggest challenges in the past when working with HTML markup was the excessive use of the <table> tag for layout effects. Eventually, thanks to improvements in the CSS specification, we were able to do much of that design work using <span>'s and <div>'s. But now we sort of have that same issue with the <div> tag that we had with the table tag, and that's that it's pretty much used for everything and anything.

That in it of itself is not an issue. <div>'s are containers of information and they do just that. The issue is more common now as websites have become more and more complex and as new concepts get created in the web development world.

Benefits of semantic HTML

- Semantic HTML gives more meaning to the developer. Take the following for example:

<div class="nav">
<ul><li>Link</li></ul>
</div>

This is a very typical implementation of a navigation bar that you would see on top of any webpage. The main challenge here, for both developers and for search engines, is that we have to make that assessment based on the class name and on it's overall structure. Compare that to the more semantic approach.

<nav class="nav">
<ul><li>Link</li></ul>
</nav>

It's a very minimal change, but now other developers will know exactly where the navigation is without having to speculate. And more importantly, search engines will also be able to tell the structure of the website.

The following is a list of all of the current HTML5 semantic tags.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Should you be semantic?

To stay up to the date with the standard, my typical answer is 'yes'. However, don't think that you have to go back into every webpage that you've worked on and locate all the <div> tags and replace them. A good portion of the internet of the internet was build by developers that were unaware of such tags, I myself included.

I make it a point these days to use as many semantic tags that make sense to my projects, but in a more forward thinking manner. I do not spend my time updating old projects, unless I just so happen to find the time. And a reason for that also is that trying to decide what makes sense as an <article> vs a <section> or a <main> takes energy and time. It is still somewhat of a subjective task to some extent.

If you do not implement semantic HTML, be sure that nothing terrible will happen. You can check the source of many of today's largest websites and you won't find a single semantic tag in sight. But if you do decide to start to use them in a more conscious way, then at a minimum you will give search engines a slightly better chance at figuring out your overall content. 

Comments

No messages posted yet

Add comment