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 to begin with, 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.

Separate characteristic parts of the website are finally named by their unified names so that no further confusion arises: header is the upper section of the site, footer is lower, nav is the navigation block, etc. In fact, this eliminates the need to use a neutral DIV tag to denote these parts of the site.

You can, for example, a typical entry:

 <div id = "header">
 <h1> <a href=""> Website </a> </ h1>
 </ div>

rewrite it like this:

 <h1> <a href=""> Website </a> </ h1>
 </ header>

And in the CSS style file, respectively, register the set of rules directly for the header tag.

However, there is one catch 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 link tags <a> or <img> pictures, for example. Therefore, in the CSS style file for such tags, it is necessary to force their block character:

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

If the semantics of tags header, footer is more or less clear, then the other tags should be considered more closely.

nav - used to create a navigation bar. On the page of these elements may be several. For example, a block of links to the main pages of the site and a block of navigation on headings.

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

section is also a unifying tag. Moreover, it can act in different roles: either to divide the page into several subject areas (for example, to isolate the central part with content and sidebar from the header and footer), or to divide the article on the page into separate sections (read paragraphs) .

article - serves to split the page into separate articles.

Both section and article tags have a number of interesting features. For example, you can now safely use the first-level headline H1 on the same page several times, which was previously unacceptable. In addition, the section tag can be either the parent element for an article, or it can divide the article itself into several sections. Those. such a construction is quite possible:

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

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

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