The importance of Semantic HTML

What is semantic HTML?

Elísabet A Secas
Jul 31, 2018 · 3 min read
Books about HTML and JavaScript on a shelf next to a potted cactus @grakozi

Semantics is the study of language meaning. For language this is the words we use to communicate, and for HTML it’s the tags we use to mark a document.

For example, a <p> tag indicates a paragraph.

This tag is semantic and presentational because people know what paragraphs are and browsers know how to display them.

On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or ) and do not provide any additional meaning to the markup.

Why is it important that our HTML is semantic? Well, for example, when it comes to finding a page on the internet, search engines ‘see’ the page without styles and the only way to understand which elements are more important is through marking. That is, if we put the name of the page inside a ‘<p>’ (paragraph) tag, it is likely to be lost in other content and not show up in the search engine results. But if we place it inside a ‘<h1>’ (header 1) tag, the search engines know that they have to give it more importance. Therefore, search engine optimization is a very good reason to use semantic markup.

This is semantic:

This is not:

These are the most important advantages that semantic markup give us:

1. Clearer code and easier to maintain

But… Why use certain tags? For example, a <nav> tag to contain your navigation bar, if you can use a <div> tag.

Many of these tags will not represent any change in the distribution of content or in the way in which the text is displayed, but this practice allows our code to make more sense, and to be closer to a natural language, where each element uses the adequate words.

In addition, when a project grows, adding more pages and more lines of code, the presence of semantic tags helps us orientate ourselves.

2. Help your site be accessible

There is a considerable amount of users that depend on a screen reader software to navigate the internet and only surf the internet through the use of the keyboard.

So making sure that screen readers can read each element, and that each of them can be accessed through the keyboard is ESSENTIAL. We have to code for all users.

Semantic HTML is not only about using the new semantic tags, but about using the correct tags for each element, so that it is easy to navigate for all users.

3. Improve your SEO positioning

Your SEO positioning can be affected, positively or negatively depending on factors such as: the way in which the content is written, a ‘responsive’ design or that the site is accessible.

In the case of Google, they use an algorithm that analyzes the code of our website, and uses the markup and the labels used to better understand the purpose of the page.

In this way, if we use a semantic mark we will facilitate the task to the positioning algorithm helping us to reach more users. And in turn, our website will be more accessible.

The bottom line is that learning semantic markup will make your life easier and your code better.


Sobre Adalab, adalabers, voluntarios y empresas…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store