La spécification HTML5 apporte plusieurs éléments nouveaux aux développeurs web leur permettant de décrire la structure d'un document Web avec une sémantique standard. Ce document décrit ces éléments et leur utilisation pour définir la structure souhaitée de tout document.
Structure d'un document en HTML4
La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML (<div>) contenant des éléments de titre (<h1>, <h2>, <h3>, <h4>, <h5> ou <h6>), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.
Ainsi, le code suivant :
<div class="section" id="foret-elephants">
<h1>Les éléphants de forêt</h1>
<p>Dans cet article, nous discutons des éléphants de forêt moins connus.
… cette section continue…
<div class="subsection" id="foret-habitat">
<h2>Habitat</h2>
<p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
… ce paragraphe continue…
</div>
</div>conduit au schéma suivant :
1. Les éléphants de forêt 1.1 Habitat
Les éléments <div> ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :
<h1>Les éléphants de forêt</h1>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.
… cette section continue…
<h2>Habitat</h2>
<p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
… ce paragraphe continue…
<h2>Régime</h2>
<h1>Gerbilles de Mongolie</h1>
conduit au schéma suivant :
1. Les éléphants de forêt 1.1 Habitat 1.2 Régime 2. Gerbilles de Mongolie
Problèmes résolus par HTML5
Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :
- L'utilisation de
<div>pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attributclass, rend impossible l'automatisation de l'algorithme («<div>fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce<div>est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments<div>dans l'algorithme par l'introduction d'un nouvel élément,<section>, l'élément HTML Section. - La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits (
<article>,<section>,<nav>et<aside>) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes. - En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément
<aside>permettant à ces sections de ne pas faire partie du plan principal. - Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques :
<nav>pour des collections de liens, comme une table des matières,<footer>et<header>pour les informations relatives au site.
Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.
L'algorithme Outline HTML5
Définir des sections en HTML5
Tout le contenu se trouvant à l'intérieur de l'élément <body> est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément <body>, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans <body>, <section>, <article>, <aside>, <footer>, <header> et <nav> balises.
Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un <h1>. Voir Définition des sections en HTML5
Exemple :
<section>
<h1>éléphants de forêt</h1>
<section>
<h1>Introduction</h1>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
</section>
<aside>
<p>bloc publicitaire</p>
</aside>
</section>
<footer>
<p>(c) 2010 La société Exemple</p>
</footer>
Cet extrait de code HTML définit deux sections de haut niveau:
<section> <h1>éléphants de forêt</h1> <section> <h1>Introduction</h1> <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> </section> <section> <h1>Habitat</h1> <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p> </section> <aside> <p>bloc publicitaire</p> </aside> </section> <footer> <p>(c) 2010 La société Exemple</p> </footer>
La première section comprend trois sous-sections :
<section> <h1>éléphants de forêt</h1> <section> <h1>Introduction</h1> <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> </section> <section> <h1>Habitat</h1> <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p> </section> <aside> <p>bloc publicitaire</p> </aside> </section> <footer> <p>(c) 2010 La société Exemple</p> </footer>
Cela conduit à la structure suivante :
1. Les éléphants de forêt 1.1 Introduction 1.2 Habitat 1.3 Section (aside)
Définition des en-têtes en HTML5
Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) définit le titre de la section courante.
Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où <h1> a le rang le plus élevé et <h6> a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :
<section>
<h1>éléphants de forêt</h1>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.
Cette section continue…</p>
<section>
<h2>Habitat</h2>
<p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
Ce paragraphe continue…</p>
</section>
</section>
<section>
<h3>Gerbilles de Mongolie</h3>
<p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
Cette section continue…
</section>
conduit à la structure suivante :
1. Les éléphants de forêt 1.1 Habitat 2. Gerbilles de Mongolie
Notez que le rang de l'élément titre (dans l'exemple <h1> pour la première section de niveau supérieur, <h2> pour la sous-section et <h3> pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.
Découpage implicite
Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.
Les éléments de titre HTML (<h1> à <h6>) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :
<section>
<h1>éléphants de forêt</h1>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.
Cette section continue…
<h3 class="implicit subsection">Habitat</h3>
<p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
Ce paragraphe continue…
</section>
conduit à la structure suivante :
1. Les éléphants de forêt 1.1 Habitat (implicitement défini par l'élément h3)
Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :
<section>
<h1>Éléphants de forêt</h1>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.
Cette section continue…
<h1 class="implicit section">Gerbilles de Mongolie</h1>
<p>Les gerbilles de Mongolie sont mignons petits mammifères.
Cette section continue…
</section>
conduit à la structure suivante :
1. Les éléphants de forêt 2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :
<body>
<h1>Mammifères</h1>
<h2>Baleines</h2>
<p>Dans cette section, nous discutons de baleines géantes.
Cette section continue…
<section>
<h3>Éléphants de forêt</h3>
<p>Dans cet article, nous discutons des éléphants de forêt moins connus.
Cette section continue…
<h3>Gerbilles de Mongolie</h3>
<p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
Ce paragraphe continue…
<h2>Reptiles</h2>
<p>Reptiles sont des animaux à sang froid.
Ce paragraphe continue…
</section>
</body>
conduit à la structure suivante :
1. Mammifères 1.1 Baleines 1.2 éléphants de forêt 1.3 Gerbilles de Mongolie 1.4 Reptiles
Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.
Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par <h1> pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.
Racines de sectionnement
Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de <body>, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : <blockquote>, <details>, <fieldset>, <figure> et <td>.
Exemple
<section>
<h1>Éléphants de forêt</h1>
<section>
<h2>Introduction</h2>
<p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
</section>
<section>
<h2>Habitat</h2>
<p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans « <cite> l'éléphant de forêt à Bornéo </cite> » :
<blockquote>
<h1>Bornéo</h1>
<p>L'éléphant de la forêt vie à Bornéo…</p>
</blockquote>
</section>
</section>
Cet exemple se traduit par la structure suivante :
1. Les éléphants de forêt 1.1 Introduction 1.2 Habitat
Cette structure ne contient pas le plan interne à l'élément <blockquote>, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.
Les sections externes à la structure
HTML5 introduit quatre nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :
- L'élément HTML de section (
<aside>) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal. - L'élément HTML de section (
<nav>) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires. - L'élément HTML de titre de section (
<header>) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page. - L'élément HTML de pied de section (
<footer>) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
Adresses et horaires de publication dans les éléments de sectionnement
L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément <address>, qui a été prolongé en HTML5.
Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément <article>. Par conséquent, l'élément <address> est désormais lié à son <body> ou à l'ancêtre <article> le plus proche.
De même, le nouveau HTML5 <time> élément, avec son attribut booléen pubdate, représente la date de publication associé à l'ensemble du document, respectivement à l'article, liée à son <body> ou à l'ancêtre <article> le plus proche.
Utilisation des éléments HTML5 dans les navigateurs Non-HTML5
Les articles et les éléments en-têtes doivent travailler dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:
section, article, aside, footer, header, nav, hgroup {
display: block;
}Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le <time> élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.
Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :
<!--[if lt IE 9]>;
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("hgroup");
document.createElement("time");
</script>
<![endif]-->
Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi explicite <noscript> élément devrait être ajouté pour ce cas :
<noscript>
<strong>Attention !</strong>
Comme votre navigateur ne prend pas en charge HTML5, certains éléments sont simulés à l'aide de JScript.
Malheureusement votre navigateur a désactivé les scripts. Veuillez l'activer pour afficher cette page.
</noscript>
Cela conduit au code ci-dessous pour permettre la prise en charge des éléments HTML5 de sections et de titres dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("hgroup");
document.createElement ("time");
</script>
<noscript>
<strong>Attention !</strong>
Comme votre navigateur ne prend pas en charge HTML5, certains éléments sont simulés à l'aide de JScript.
Malheureusement votre navigateur a désactivé les scripts. Veuillez l'activer pour afficher cette page.
</noscript>
<![endif]-->
Conclusion
Les nouvelles sections et éléments de titres introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.