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

You can, for example, have a typical entry:

 <Div id = "header">
 <H1> <a href="http://www.examplesite.com/"> The Site </a> </ h1>
 </ Div>

Rewritten in a new way:

 <Header>
 <H1> <a href="http://www.examplesite.com/"> The Site </a> </ h1>
 </ Header>

And in the CSS stylesheet, respectively, 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 a CSS stylesheet for such tags, you must forcefully assign them a block character:

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

If the semantics of the header tags, the footer is all the 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 the 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 he can act in different roles: either to divide the page into several thematic areas (for example, to isolate and, therefore, to separate the central part with content and sidebar from the basement and cellar), or to separate directly into sections (read paragraphs) an article directly 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 the 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 into 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>