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

HTML5 nouvelles balises header, footer, nav, aparté, section, article, hgroup

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

Parlons de nouvelles balises en HTML5.

Et pour commencer, examinons les plus généraux: section, article, en-tête, pied de page, navigation, apartement et hgroup .

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

Les parties caractéristiques distinctes du site Web sont finalement nommées par leurs noms unifiés, de sorte qu'aucune confusion supplémentaire ne se produit: l'en-tête est la partie supérieure du site, le pied de page est inférieur, la navigation est l'unité de navigation, etc. En fait, cela élimine le besoin d'utiliser une balise DIV neutre pour désigner ces parties du site.

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

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

réécrivez-le comme ceci:

 <en-tête>
 <h1> <a href="http://www.examplesite.com/"> site Web </a> </ h1>
 </ header>

Et dans le fichier de style CSS, respectivement, enregistrez l'ensemble de règles directement pour la balise d'en-tête.

Cependant, il y a une capture dans ceci. Le fait est que la plupart des navigateurs ne savent pas encore que ces nouvelles balises sont des éléments de bloc et les considèrent comme une chaîne, comme les mêmes balises de lien <a> ou <img>, par exemple. Par conséquent, dans le fichier de style CSS pour de telles balises, il est nécessaire de forcer leur caractère de bloc:

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

Si la sémantique des en-têtes de balises, le pied de page est moins clair, les autres balises doivent être considérées de plus près.

nav - utilisé pour créer une barre de navigation. Sur la page de ces éléments peuvent être plusieurs. Par exemple, un bloc de liens vers les pages principales du site et un bloc de navigation dans les rubriques.

aparté - est une balise unificatrice, idéale pour la mise en surbrillance de 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, une photo de l'auteur et des informations sur lui, boutons sociaux et puzomerki, etc.).

section est aussi une balise unificatrice. En outre, il peut jouer différents rôles: soit diviser la page en plusieurs domaines (par exemple, isoler la partie centrale avec le contenu et la barre latérale de l'en-tête et du pied de page), soit diviser l'article de la page en sections distinctes (lire les paragraphes). .

article - utilisé pour diviser la page en différents articles.

Les balises section et article possèdent un certain nombre de fonctionnalités intéressantes. Par exemple, vous pouvez maintenant utiliser le titre de premier niveau H1 sur la même page plusieurs fois en toute sécurité, ce qui était auparavant inacceptable. De plus, la balise de section peut être un élément parent d'un article ou diviser l'article lui-même en plusieurs sections. C'est à dire Il est tout à fait possible que ce design:

 <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 dans une unité logique. Par exemple, le titre principal de la page entière H1 et sa description, ornée de la balise H3. Sur la page, d’autres 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 fusionnons avec la balise H1 principale dans un groupe, désigné par la balise hgroup:

 <hgroup>
 <h1> La plupart des sites Web </ h1>
 <h3> Voici la description du site lui-même </ h3>
 </ hgroup>