One of the advantages that HTML5 has brought to the field of web design is a structure of HTML tags much more semantic, that is, a mark with a meaning for what is really going to serve that identifier. In other words, HTML5 has made the work of the web designer much simpler than with previous versions, especially when we have to modify a web design of another colleague.
Structure of a web in HTML5
At the time of designing a website, there were certain elements or parts of the page, which were clearly identified and broadly accepted by the majority of the community, whether users or designers. We refer to the header (header), footer, sidebar (aside) ….
However, in previous editions, these elements were designed on the web as simple divisions by using the <div> tag, having to identify each of them as what they really were. So we had a list of divs tags, each with its corresponding identifier, that we had to give ourselves: <div id = “header”> or <div id = “footer”> … however we could also call them <div id = “Header”> or <div id = “foot-of-page”>, so each designer had their own way of identifying the parts of their webs.
Indeed, it seems logical that these elements, which are always repeated in all the web designs we work, have their own labels, semantic and identifying. So, we went from a <div id = “header”> to a <header>, much cleaner, easier for designers and very useful for search engines like Google, that can identify more quickly the structure of a web.
And the composition of HTML5 in responsive design?
Exactly the same, nothing changes (If you have not yet heard of adaptive design or responsive design). Simply the “fluids” of the web will adapt to the device where the page is displayed, without losing our design, making the browsing experience to the user more fluid and simple.
These same tags will adapt to the support, although as we see, several elements if they maintain their order, such as the header of the web and the footer. However, elements such as the sidebar, or a possible side navigation menu (nav) will be placed above or below the main section (the one we previously called “main”)
With this composition, HTML5 tags that are always present in all the web designs we make are:
<Header> </ header>
It is the element that opens the web. Usually it has the logo or the representative text. In cases where the web carries advertising, it is also usually placed the header banner within it. In many cases it contains the navigation menu <nav> but not necessarily.
<Nav> </ nav>
All the navigation links that lead to the different sections of our website. It is one of the most important parts, as it must be fundamental for the user to be able to browse categories and pages.
<Section> </ section>
It is the label that comes to replace by default to <div>, and what indicates is that we are in a different section, as if a chapter of a book was.
<Article> </ article>
The article tag is designed to contain its own unit of information and content, which in turn can have its header (header), body (section) and foot of article (footer). A section can contain several independent articles.
<Aside> </ aside>
It comes to replace the sidebar or sidebar, although its use is to fill it with content that is not directly related to that page, for example a list of links, ads, social icons …
<Footer> </ footer>
And the footer, present in almost all the webs, serves to locate the contact data, some extra information, social icons, twitter updates … even a second navigation menu.
<Audio>, <video> …
Other tags to display content if the need to have third party plugin, such as flash, but we will discuss them in other later articles.
Always look for that your web design incorporates these innovations, that surely are influencing positively in the positioning and the SEO!