The importance of Semantic HTML
What is semantic HTML?
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.
