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

HTML5 nouveaux tags en-tête, pied de page, nav, aside, section, article, hgroup

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

Parlons de nouveaux tags en HTML5.

Et d'abord, regardons le plus global: section, article, en-tête, pied de page, nav, aside et hgroup .

HTML5 est à bien des égards un standard plus sémantiquement correct.

Les différentes parties caractéristiques du site sont finalement nommées par leurs noms unifiés, de sorte qu'à l'avenir il n'y a pas de confusion: en-tête - la partie supérieure du site, pied de page - le bas, nav - l'unité de navigation, etc. En fait, cela élimine le besoin d'utiliser une étiquette DIV neutre pour se référer à ces parties du site.

Vous pouvez, par exemple, avoir une entrée typique:

 <div id = "header">
 <h1> <a href="http://www.examplesite.com/"> Le site lui-même </a> </ h1>
 </ div>

réécrit d'une nouvelle manière:

 <header>
 <h1> <a href="http://www.examplesite.com/"> Le site lui-même </a> </ h1>
 </ header>

Et dans la feuille de style CSS, en conséquence, écrire un ensemble de règles directement pour la balise d'en-tête.

Cependant, il y a une citation dans ceci. Le fait est que la plupart des navigateurs ne savent pas encore que ces nouveaux tags sont des éléments de bloc et les considèrent comme des chaînes, comme les mêmes balises <a> tag ou images <img>, par exemple. Par conséquent, dans la feuille de style CSS pour ces balises, vous devez impérativement prescrire leur caractère de bloc:

 en-tête, pied de page, nav, article {display: block;}

Si la sémantique de l'en-tête est un en-tête, le pied de page est de plus en plus clair, alors les balises restantes doivent être considérées plus attentivement.

nav - sert à créer la barre de navigation. Il peut y en avoir plusieurs sur la page de ces éléments. Par exemple, un bloc de liens vers les pages principales du site et un bloc de navigation pour les rubriques.

de côté - est le tag unificateur le plus approprié pour mettre en évidence la barre latérale. Il peut inclure à la fois des blocs de navigation et d'autres éléments qui ne sont pas essentiellement de navigation (bannières publicitaires, photo de l'auteur et informations sur lui, boutons de réseaux sociaux et puzomerki, etc.).

section est également un tag unificateur. Et il peut agir dans différents rôles: soit diviser la page en plusieurs domaines thématiques (par exemple, isoler et séparer ainsi la partie centrale avec le contenu et la barre latérale du sous-sol et de la cave) ou diviser en sections séparées (lire les paragraphes) directement un article sur la page .

article - sert à diviser la page en articles distincts.

Les balises de section et d'article ont toutes deux un certain nombre de caractéristiques intéressantes. Par exemple, vous pouvez maintenant utiliser plusieurs fois l'en-tête du premier niveau de H1 sur une page, ce qui était auparavant inacceptable. En outre, la balise de section peut être soit un élément parent pour l'article, soit séparer l'article de l'article lui-même en plusieurs sections. Ie. cette conception est tout à fait possible:

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

hgroup - la balise est conçue pour regrouper les en-têtes de page en une seule unité logique. Par exemple, le titre principal de la page H1 entière et sa description, formatée avec la balise H3. Sur la page à l'avenir, les balises H3 peuvent être utilisées plusieurs fois à d'autres fins. Pour séparer logiquement la description de la page des autres balises H3, nous la combinons avec la balise H1 principale du groupe, qui est indiquée par l'étiquette hgroup:

 <hgroup>
 <h1> Le site lui-même </ h1>
 <h3> Voici la description du site lui-même </ h3>
 </ hgroup>