The secrets of semantic layout in Html5

The tags serve to give extra information to search engines like Google and thus be able to better understand what the content of a web page is about.

The new versions of HTML5 have established themselves as a very important advance, as far as the construction of Web pages is concerned. Since the start of HTML5, we have integrated many useful and functional features. Among its best known advantages, the management and control of multimedia objects, animations and graphics development. All this quickly and easily. In web design, one of the features and novelties that HTML5 has is one that is assuming a very important advance: what is called semantic layout .

What is semantic HTML5?

To approach this concept, we must remember that HTML tags are used, above all, to effectively format content. They serve to indicate the path to browsers, in their work of displaying the content of the pages. It is precisely in this area where HTML5 is developed. It is about the definition of specific labels, which provide information about the role of their content. These data would serve, at a later time, so that the large network crawlers (in the case of Google), analyze the most important content, the subsidiary, etc. These so-called semantic labels would serve, in this way, as extra information for search engine engines to understand the importance of the different parts into which a Web is divided. In this way, the content is prioritized.

The impact on SEO

Although the importance of the use of HTML5 is great, that does not mean that it is decisive, from the SEO point of view. The results generated by SEO are the accumulation of many small details. For example, HTML in mobile SEO positioning so that it can improve the loading speed on this type of device and therefore position those pages that load quickly in the top positions of search engines.

HTML5 semantic tags

With good <div>-based tagging, you can properly structure a document and separate it into logical blocks. A more important added problem is the distinction between the type of content in question. How does HTML5 solve this problem? Among other methods, with the implementation of new labels. Although in appearance these tags behave in a similar way to the classic <div>, they also offer additional information about the meaning and/or importance of what they contain. And they also make it possible for documents to be structured in a clearer way. In its construction and when the moment of analysis arrives.

The most important HTML5 tags

• <Article>  The purpose of this tag is to brand an article. Keep in mind that, normally, it will be a text that can be read independently of the rest of the content of the page in question.

• <Aside>  What <aside> does is mark an element as an accessory to the main content of the page. For example, there are comments made by users, a sidebar, and many others.
• <Header>  The <header> tag is very handy for providing information about the header of the element that contains it. Although it is widely used as an introduction, this tag will not necessarily be the only one on the web. That is, there may be <header> tags for a specific article, for a text, for a column on the side of the Web, etc.
• <Main>  The content of the <main> tag is usually the main object of the document. It differs from other tags (as we have seen in <header>), that <main> must be unique on the page. Between things, because otherwise, it would lose all its meaning. It is common sense that, in the same document, there cannot be different main contents.

• <Figure> and <figurecaption>  This tag, <figure>, indicates that its content is a specific image. It can be a graph, a photograph, a figure, etc. For its part, <Figurecaption> is normally associated with the explanatory text that accompanies the images. The best example is that of a photo caption.

• <Nav>  <nav> is the new tag used to indicate navigation link blocks. It is common, for example, in the case of navigation bars. The <nav> tag should not be used with all the links that make up the Web but only for link blocks.

• <Section>  With it, as its name indicates, a specific section of a document is defined.

• <Footer>  The <footer> tag is used to indicate that the content is a footer or section. Therefore, it will contain data on the specific element to which it is associated.

• <Body>  The content that is usually included in the <body> tag is a part of a section. Remember that sections in HTML5 are usually animated. Next to the main section, which is contained in <body>, the limits of each section will be well defined.