HTML5 semantic tags

What are HTML5 semantic tags, and why it is recommended to use those that serve to define the structure of the document in modern websites.

The HTML language itself is one of the many technologies that has been given a makeover with the advent of HTML5. Numerous tags have been incorporated that were not in previous versions of the markup language, which we can classify based on their utility or features. One of these classifications is semantic tags, which we already began to explain in the previous article, and which deals with .

In this article we are going to explain in greater depth what semantic tags are and why they should be used to improve the creation of a web document. We will see the set of semantic tags that are used to define the structure of a site and how they can help us to get our page indexed more accurately by search engines.

What are semantic tags

Semantics: Pertaining or relative to the meaning of words. That is the definition of the Royal Academy of the Spanish Language and it is that simple to understand this type of HTML language tags: Those that give meaning to the parts of the document.

To put it another way, we are looking at tags that indicate what content they contain, rather than how it should be formatted when displaying the HTML document in a web client.

So that all our doubts are cleared, we can use an example. Let’s think about the STRONG label. What does it tell us? That a text must be highlighted more strongly with respect to other texts that are not “strong”, similar to what the B tag indicates, which is even more specific, when specifying that a text must be placed in bold. Now let’s think about a DIV tag, or P. The first one is a division and P is a paragraph. All this is nothing more than ways of telling the browser how to format a page, what to separate in a text, in a normal division, or in a paragraph, etc.

Few of the pre-HTML5 markup language tags tell the document the meaning of the elements they contain. In other words, few tags indicate what they are and what function they represent in the HTML document, but rather the majority serve to indicate how they should be seen on the page once rendered by the browser.

Well, in HTML5 many tags have been incorporated that serve to indicate what they are and what is the meaning of the elements they contain within. These are the semantic tags, which gain a lot of importance in the framework of HTML and the composition of a web document because they help search engines like Google to index the contents of a site more correctly.

Within semantic tagging we also have several functions, but for those of us who are dedicated to designing web pages, there is a set of them that are of particular interest to us. They are used to define the main outline of the document, such as HEADER, ARTICLE, FOOTER, etc. All these semantic tags tell us what the content they contain is and what is its relationship with the set of elements of the HTML document.

Note: It should be added that there are also a number of new semantic tags in version 5 of the language, which also say what is inside, rather than how it should be represented. We saw examples of them in the previous article, such as DETAILS, FIGURE, etc. At the moment they interest us less in regards to this article, but they must also be taken into account.

Structural semantic tags

We will see in detail below the semantic tags that are used to define the structure of an HTML document and why we should incorporate them as soon as possible into our website development techniques.

Structural semantic tags help us so that search engines, or any other automatic mechanism that reads a website, knows exactly which parts of its content correspond to each of the typical parts of a site. Generally, in any document we have a header, a body and a footer, elements that define the structure represented by various tags.

In this way, HTML5 has a HEADER tag, which must include those elements corresponding to the header of the page. It has a FOOTER, which must include all the labels that make up the footer. Then, for the body there is really no specific tag, but it will be represented by various others such as SECTION, ARTICLE or ASIDE. There will also be other labels that represent typical elements such as the navigation bar, NAV label.

Observing these structural semantic tags, any system could process the page and know how it is structured and to which part of the typical web each content corresponds. You will be able to know what content has been placed in the header, HEADER element, what are the topics that are discussed on a website, the ARTICLES, or what are the links to the main sections of the site, placed in the NAV tag.

There is, therefore, a logical way to place all the contents within a site and certain labels to contain them, taking into account the structure that we want to communicate to the systems that can process the document. The image that accompanies this text expresses one of the possible ways of ordering the document with the tags provided by HTML5.

In the image you can see the most common structural tags, but there are others that we could use within the semantic tags. Also, the position of these elements doesn’t have to be like this, they could even be nested in other ways. Perhaps on our site we want to place the browser in the header, on the right side or within the SECTION. It would stand alone as long as we use the NAV tag to contain it. Also, you could have more than one SECTION in the body of the page, loose or placed inside other tags like ASIDE. Those additional SECTION could have other ARTICLE or even, within a SECTION, make another header and footer scheme by nesting other HEADER and FOOTER.

As we can see, the possibilities of grouping, ordering and placing these labels to define the structure would be our own, being able to generate different types of structures according to the needs of each project. However, there are always some basic rules that must be met, such as that the content units are in the ARTICLE or that there is only one browser with NAV. In common cases, when we want to have other browsers, we could choose to use other semantic tags such as MENU, assigning the NAV tag to the main browser and MENU to other secondary ones.

Note: Actually, the structural labels are there and we are the ones who can use them to our liking, as long as we respect the significance that has been given to them. There are plenty of discussions to interpret them in one way or another and to say how they should be used. We can use common sense to imagine what may or may not be correct.

Semantic tags do not define a default style

Perhaps this point is unnecessary, because it must be understood as a result of what has been said so far, but it should be noted well so as not to be misled. Semantic tags do not have a default style that the browser will assign to us. That is, because HEADER means that it is a header, the browser is not going to position the element at the top of the document in any case. The same with FOOTER, which will not place it at the bottom, or ASIDE to the side.

We are the ones who, through CSS, must assign the styles that we want to be applied to each of those elements of the HTML document. I insist again that semantic tags do not indicate how they should be displayed, but rather the meaning they have within the context of the document.

In this sense, it should be remembered that for some time work has been done to separate the content from the form and semantic labels represent a further step towards that goal. Therefore, all styles and positioning must be in charge of the CSS.

Why we should use semantic tags and how they help us

For some it will be enough to know that Google recommends their use to be convinced to use them, but the underlying reasons are not whimsical to a specific company. There are many large companies behind these new semantic and structural tags and they have been created to make life easier, not just for Google, but for any other system that can process an HTML document.

The idea with these tags is to add information to the Web, such as semantic metadata that can be interpreted by any computer system. This can make it easier for any machine that reads an HTML document and is not appreciating how it is presented on the screen, but simply its source code, to know which typical part each piece of code belongs to, in order to better understand what is being done. treating in each case.

As for the Google engine, or any other indexing robot, it will be able to read the document and know which part is the header, which part contains the links to the main sections of the site, which part will contain the content units, etc.

So Google will know better what your page is about, or what are the different topics that are being developed at the moment. You’ll know which links you need to pay special attention to to navigate your entire site, and which of those links are less important. In short, the machines will be able to better identify what is on a page, and which are the most important parts of all the content it has.

To give more specific examples, Google will be able to see your ARTICLE to know what post you have published and what is the most interesting content you are dealing with at the moment. They will be able to view your NAV to see how you organize the sections of your site. The POST can be indexed preferentially as new articles that you publish with a certain periodicity.

An interesting example is what Google will be able to do with your NAV links. If you have noticed, when you search for a specific site based on its name, that site often appears in the first place with a series of sub-links with the main sections. Well, with your browser placed in NAV, you would be telling Google that these are the main sections of the site, which it should show as alternative pages when they search for it in the search engine.

conclusion

These HTML5 semantic tags are a step forward in terms of creating a website with better-formed, more useful content that can be processed more easily by any computer system. Today they may only interest us as a way to optimize sites for better search engine indexing, but they will lay the foundation for a healthier web ecosystem in the future.

In the next article we will explain some details about the compatibility of semantic tags with the browsers that are used today and…