Semantic HTML: Why it matters and top tips on how to apply it

HTML is the backbone of the web, and while it may be overlooked quite often, it is an essential language to know if you want to be a web developer. HTML5 brought us some nice changes and gave us the possibility of writing more semantic code than before.

For clarification, code is “semantic” when you attribute more meaning to it using tags that have particular roles, instead of throwing everything inside divs and spans, and hoping for the best.

Why does Semantic HTML matter?

Writing semantic HTML makes your code easier to understand, making the source code more readable for other developers. Screen readers and browsers can interpret Semantic HTML better, which makes it more accessible.

It affects your page's SEO, giving it a better ranking on search engines weighing the most important content appropriately.

Now that you know what semantic HTML is and why to write your code with that in mind, here are some tips that you can easily apply to your daily code to leverage the benefits of semantic HTML.

Top Tips

The <div> tag has its uses, but think twice before using it. Chances are, there is a semantic alternative. Can we use a semantic tag instead?

<section>, for example, may be a good substitute. It’s a tag that defines elements in a document, such as chapters, headings, or any other area of the document with a common tag or <article>, that holds content that makes sense on its own like blog posts and comments.

Instead of using <span>, you can use <strong> or <em>, which will not only allow you to style your content differently, but will also give it semantic emphasis?

The <div> tag is commonly used to hold images, but instead we can use the <figure> tag. You can use this tag as a holder for media elements other than image as well, like illustrations, diagrams or code snippets, for example. A great complement to the <figure> tag is the <figcaption> tag that we can use to describe the content of the figure tag. If the figure gets moved, the fig-caption will move with it.

While using classes and IDs, be mindful about the names you choose, and be specific. A button with a class <button> doesn't give much context for another dev reading your code, while a button with a class of <download-button> will tell them that this button is related to a download.

Try to “read” your code, and see if it makes sense to you. A common web page structure is as we see below:

<header>
<nav></nav> 
</header>
<main></main> 
<footer></footer>

If the flow of your tags make sense even without content, you are on the right track.

As you can see, using Semantic code has several benefits to your projects, making them more readable, accessible, and improving its ranking on search engines. And you can start using it today. All you need is to follow some tips, be mindful and of course, some practice, and soon it will become a habit.