This page has been robot translated, sorry for typos if any. Original content here.

HTML5 new tags header, footer, nav, aside, section, article, hgroup

HTML5 новые тэги header, footer, nav, aside, section, article, hgroup

Let's talk about new tags in HTML5.

And first, let's look at the most global: section, article, header, footer, nav, aside and hgroup .

HTML5 is in many ways a more semantically correct standard.

The individual characteristic parts of the website are finally named by their unified names, so that in the future there is no confusion: header - the top section of the site, footer - the bottom, nav - the navigation unit, etc. In fact, this eliminates the need to use a neutral DIV tag to refer to these parts of the site.

You can, for example, have a typical entry:

 <div id = "header">
 <h1> <a href="http://www.examplesite.com/"> The site itself </a> </ h1>
 </ div>

rewritten in a new way:

 <header>
 <h1> <a href="http://www.examplesite.com/"> The site itself </a> </ h1>
 </ header>

And in the CSS stylesheet, accordingly, write a set of rules directly for the header tag.

However, there is one quote in this. The fact is that most browsers do not yet know that these new tags are block elements and consider them to be string, like the same <a> tag tags or <img> images, for example. Therefore, in the CSS stylesheet for such tags, you must forcefully prescribe their block character:

 header, footer, nav, article {display: block;}

If the header semantics are header, the footer is more and less clear, then the remaining tags should be considered more carefully.

nav - serves for creating the navigation bar. There can be several on the page of these elements. For example, a block of links to the main pages of the site and a navigation block for headings.

aside - is the unifying tag most suitable for highlighting the sidebar. It can include both nav blocks and other elements that are not essentially navigational (advertising banners, the author's photo and information about him, buttons of social networks and puzomerki, etc.).

section is also a unifying tag. And it can act in different roles: either to divide the page into several thematic areas (for example, to isolate and thus separate the central part with content and sidebar from the basement and cellar) or divide into separate sections (read paragraphs) directly an article on the page .

article - serves for splitting the page into separate articles.

Both the section and article tags have a number of interesting features. For example, you can now safely use the header of the first level of H1 on one page several times, which was previously unacceptable. In addition, the section tag can be either a parent element for article, or separate the article article itself into several sections. Those. this design is quite possible:

 <section>
 <article>
 <section> </ section>
 <section> </ section>
 </ article>
 <article>
 <section> </ section>
 <section> </ section>
 </ article>
 </ section>

hgroup - the tag is designed to group the page headers into one logical unit. For example, the main title of the entire H1 page and the description for it, formatted with the H3 tag. On the page in the future, H3 tags can be used several times for other purposes. To logically separate the description of the page from other H3 tags, we combine it with the main H1 tag in the group, which is indicated by the hgroup tag:

 <hgroup>
 <h1> The site itself </ h1>
 <h3> Here is the description of the site itself </ h3>
 </ hgroup>