Plan et Section d'un Document HTML5

  • Raccourci de la révision : Web/HTML/Sections_and_Outlines_of_an_HTML5_document
  • Titre de la révision : Plan et Section d'un Document HTML5
  • ID de la révision : 412349
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

 

La spécification HTML5 apporte plusieurs éléments nouveaux à des 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 comment les utiliser pour définir le contour souhaité de tout document.
 

Structure d'un document en HTML 4

 
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 une division HTML ({{HTMLElement ("div")}}) élément HTML avec des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}) dans ce cadre, définir son titre. Les relations de ces éléments HTML et HTML division Rubrique conduit à la structure du document et son contour.
 
Ainsi, la majoration suivante:
 
<div class="section" id="forest-elephants"> Les éléphants de forêt <h1> </ h1 <p>> Dans cet article, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... <div class="subsection" id="forest-habitat"> <h2> Habitat </ h2> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... </div> </div>
 
conduit le schéma suivant:
 
1. Les éléphants de forêt 1.1 Habitat
 
Les éléments {{HTMLElement ("div")}} ne sont pas obligatoire de définir une nouvelle section. La simple présence d'un élément HTML cap est suffisant 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> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... <h2> Diet </ 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 HTML 4 définit la structure d'un document et de son algorithme implicite décrivant est très rude et conduit à de nombreux problèmes:
 
L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir des valeurs spécifiques pour les attributs de classe rend possible l'automatisation de l'algorithme décrivant impossible ("Est-ce que {{HTMLElement (" div ")}} partie de la aperçu de la page, définissant une section ou un paragraphe? "Ou" est-ce seulement une présentation {{HTMLElement ("div")}}, utilisé uniquement pour le style? "). En d'autres termes, la spécification HTML4 est très imprécis sur ce qui est une section et comment son champ d'application est défini. La génération automatique de contours est importante, surtout pour les aides techniques, 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'{{HTMLElement ("div")}} éléments de l'algorithme décrit par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
 
La fusion de plusieurs documents est dur: l'inclusion d'un document en sous-document principal moyen de changement du niveau de l'élément HTML Rubriques de sorte que le contour est maintenu. Ce problème est résolu dans le HTML5 que les éléments nouvellement introduits sectionnement ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement (" côté ")}}) sont toujours sous-sections de la section de leur ancêtre le plus proche, indépendamment de ce que les sections sont créées par rubriques internes.
 
Parce que chaque élément HTML Cap fait partie du contour, il n'est pas possible de décrire un sous-titre ou un titre secondaire (par exemple, <h1> Justine </ h1> <h2> Les Malheurs de la Vertu </ h2> crée le schéma 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduit l'élément {{HTMLElement ("hgroup")}} qui cache tous les éléments de titre sauf le premier du rang le plus élevé (par exemple, <hgroup> <h1> Justine </ h1> <h2> Les Malheurs de la Vertu </ h2> </ hgroup> crée le schéma 1. Justine).
 
En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont souvent pas que linéaire. Un document peut avoir des sections spéciales contenant des informations qui ne fait pas partie, même si elle est liée à l'écoulement principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("côté")}} permettant ces sections ne font pas 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 informations sur la section contenant ne portait pas sur le document, mais à l'ensemble du site, comme l'information logos, menus, table des matières, ou droit d'auteur et mentions légales . A cet effet, HTML5 introduit trois éléments spécifiques sections: {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header ")}} pour obtenir des informations liées au site.
 
Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant contours de documents à être prévisible et utilisé par le navigateur afin d'améliorer l'expérience utilisateur.
 
L'algorithme Outline HTML5
 

Definir des sections en HTML5

 
Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriquées. A côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("côté")} }, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

 

Remarque: Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition Rubriques en HTML5.

Exemple:

 
<section> éléphants de forêt <h1> </ h1> <section> <h1> Introduction </ h1> <p Dans cette section, nous discutons des éléphants de forêt moins connus. </ Section> <section> <h1> Habitat </ h1> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. </ Section> <aside> bloc publicitaire <p> </ côté> </ section> <p <footer> (c) 2010 La société Exemple </ footer>
 
Cet extrait de code HTML définit deux sections de haut niveau:
 
<section> éléphants de forêt <h1> </ h1> <section> <h1> Introduction </ h1> <p Dans cette section, nous discutons des éléphants de forêt moins connus. </ Section> <section> <h1> Habitat </ h1> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. </ Section> <aside> bloc publicitaire <p> </ côté> </ section> <p><footer> <p>
(c) 2010 La société Exemple </ footer>
 
La première section comprend trois sous-sections:
 
<section> éléphants de forêt <h1> </ h1> <section> <h1> Introduction </ h1> <p Dans cette section, nous discutons des éléphants de forêt moins connus. </ Section> <section> <h1> Habitat </ h1> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. </ Section> <aside> bloc publicitaire <p> </aside> </section> <p <footer> (c) 2010 La société Exemple </ footer>
 
Cela conduit à la structure suivante:
 
1. Les éléphants de forêt     1.1 Introduction 1.2 Habitat 1.3 Section (aside)
 

Définir les entête en HTML5

Bien que les éléments HTML sectionnement de définir la structure du document, un aperçu a également besoin rubriques pour être utile. La règle de base est simple: le premier élément HTML rubrique (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("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ù {{HTMLElement ("h1")}} a le rang le plus élevé, et {{HTMLElement ("h6")}} a le rang le plus bas. Classement relatif d'importance que dans une section, la structure des sections détermine les grandes lignes, et non pas le rang rubrique des sections. Par exemple, ce code:
 
<section> éléphants de forêt <h1> </ h1> <p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... <section> <h2> Habitat </ h2> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... </ Section> </ section> <section> <h3> gerbilles de Mongolie </ h3> Dans cet article, nous discutons des gerbilles célèbres mongol. Cette section ... continue ... </ Section>
 
conduit le schéma suivant:
 
1. Les éléphants de forêt 1.1 Habitat 2. Gerbilles de Mongolie
 
Notez que le rang de l'élément de titre (dans l'exemple {{HTMLElement ("h1")}} pour le premier haut-niveau de la section, {{HTMLElement ("h2")}} pour le paragraphe et {{HTMLElement ("h3 ")}} pour le deuxième haut-niveau de la section) n'est pas important. (Toute rang peut être utilisée comme en-tête d'une section explicitement définie, bien que cette pratique n'est pas recommandée.)
 

Sectionnement implicite

 
Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir les grandes lignes, pour garder 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 découpage implicite.
 
Les éléments HTML (Rubriques {{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définit une nouvelle implicite, section quand ils ne sont pas le premier titre de leur parent, explicite sections. La façon implicite cette section est positionnée dans le contour est défini par son rang par rapport à la position précédente dans leur section parent. Si elle est d'un rang inférieur à la rubrique précédente, il ouvre une implicite sous-section de la section. Ce code:
 
<section> éléphants de forêt <h1> </ h1> <p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... <h3 class="implicit subsection"> Habitat </ h3> Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... </ Section>
conduisant le schéma suivant:
 
1. Les éléphants de forêt 1.1 Habitat (implicitement défini par l'élément de h3)
 
Si elle est de même rang que la rubrique précédente, il ferme la section précédente (qui peut avoir été explicite!) Et en ouvre un nouveau implicite au même niveau:
 
<section> éléphants de forêt <h1> </ 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> gerbilles de Mongolie sont mignons petits mammifères. Cette section ... continue ... </ Section>
 
conduisant le schéma suivant:
 
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 à la rubrique précédente, il ferme la section précédente et en ouvre un nouveau implicite au niveau supérieur:
 

<body> <h1> Mammifères </h1> <h2> Baleines </h2> <p> Dans cette section, nous discutons de baleines nageantes. Cette section ... continue ... <section> éléphants de forêt <h3> </h3> Dans cet article, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... <h3> gerbilles de Mongolie </ h3> Hordes <p> de gerbilles ont étalé leur gamme bien au-delà Mongolie. Présent paragraphe continue ... ... <h2> Reptiles </ h2> Reptiles <p> sont des animaux à sang froid. Présent paragraphe continue ... ... </Section> </ body>

 
conduisant le schéma suivant:
 
1. Mammifères Baleines (1,1 implicitement défini par l'élément h2) 1,2 éléphants de forêt (explicitement définie par l'élément de section) 1,3 gerbilles de Mongolie (implicitement défini par l'élément de h3, qui ferme la section précédente dans le même temps) 1,4 Reptiles (implicitement défini par le élément h2, qui ferme la section précédente dans le même temps)
 
Ce n'est pas le plan que l'on pourrait s'attendre rapidement en jetant un regard sur les balises de titre. Pour rendre votre balisage humaine compréhensible, c'est une bonne pratique d'utiliser des balises explicites pour ouvrir et fermer les sections, et pour marquer la position au niveau de la section destinée nidification. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs sont le rendu de votre plan de document de manière inattendue, vérifiez si vous avez sections qui sont implicitement fermés par rubrique éléments.
 
Une exception à la règle générale qui rubrique rang doit correspondre au niveau de la section d'imbrication des sections qui peuvent être réutilisés dans plusieurs documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblés dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer {{HTMLElement ("h1")}} pour le niveau supérieur intitulé 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 il apparaît. Balises de section explicites sont toujours utiles dans ce cas.
 
Redéfinition Sectionnement implicite
 
 Parfois, une section a besoin d'avoir plusieurs rubriques. Quelques cas habituels sont:
 
une section d'un livre, ou un film, qui a un titre secondaire:
<section> <h1> Justine </ h1> <h2> Les Malheurs de la vertu </ h2> </ section>
 
conduit au schéma suivant:
 
1. Justine 1.1 Les Malheurs de la vertu
 
le titre secondaire peut être utilisé pour une liste de tags:
<section> <h1> section et les contours d'un document </ h1> <h2> HTML, HTML5, articles, Outlines </ h2> </ section>
conduit le schéma suivant:
 
1. Section et les contours d'un document HTML sections, HTML5, 1,1, Outlines
 
En raison du sectionnement implicite, ce n'est pas possible sans l'aide de l'élément du groupe Rubriques HTML ({{HTMLElement ("hgroup")}} introduit en HTML5). Il cache toutes les rubriques du plan, sauf le premier, ce qui permet une substitution de la sectionnement implicite. Avec cet élément de l'exemple du livre secondaires:
 
<section> <hgroup> <h1> Justine </ h1> <h2> Les Malheurs de la vertu </ h2> </ hgroup> ... Certaines matières ... </ Section>
conduit le schéma suivant:
 
1. Justine
 

Racines de sectionnement

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et rubriques à l'intérieur entre eux ne contribuent pas au contour de leur ancêtre. A côté de {{HTMLElement ("body")}} qui est la racine logique de sectionnement d'un document, ce sont souvent des éléments qui introduisent contenu externe à la page: {{HTMLElement ("blockquote")}}, {{HTMLElement ("les détails ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" chiffre ")}} et {{HTMLElement (" td ")}}.
 
Exemple:
 
<section> éléphants de forêt <h1> </ h1> <section> <h2> Introduction </ h2> <p Dans cette section, nous discutons des éléphants de forêt moins connus </ section> <section> <h2> Habitat </ h2> Les éléphants de forêt <p> 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 vie <p> élément La forêt de Bornéo ... </ Blockquote> </ section> </ section>
 
Cet exemple se traduit par le schéma suivant:
 
1. Les éléphants de forêt 1.1 Introduction 1.2 Habitat
 
Ce contour ne contient pas le contour interne de l'élément de {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole son contour intérieur.
 

Les sections en dehors du plan

HTML5 introduit quatre nouveaux éléments qui permettent de définir des sections qui ne font pas partie les grandes lignes d'un document Web:
 
L'élément HTML Section part ({{HTMLElement ("côté")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte explication ou une publicité. Il dispose de son propre plan, mais il n'appartient pas à la principale.
 
L'élément HTML Section navigation ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il ne peut y en avoir plusieurs dans un document, par exemple, une page interne avec des liens, comme une table des matières, et une autre avec des liens de sites de navigation. Ces liens ne font pas partie de l'écoulement principal et les grandes lignes et peut être habituellement pas initialement rendue par lecteur d'écran et même la technologie d'assistance.
 
L'élément En-tête HTML Section ({{HTMLElement ("header")}}) définit un en-tête, contenant typiquement 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 Section Pied de page ({{HTMLElement ("footer")}}) définit un pied de page, contenant typiquement le droit d'auteur et morale remarqué 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 permis à cette via l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.
 
Un document peut être faite 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 {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou {{plus proche HTMLElement ("article")}} ancêtre.
 
De même, le nouveau HTML5 {{HTMLElement ("time")}} élément, avec son {{htmlattrxref ("pubdate", "temps")}} attribut booléen, représente la date de publication associé à l'ensemble du document, respectivement à la article, liée à sa {{HTMLElement ("body")}} ou {{plus proche HTMLElement ("article")}} ancêtre.
 

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ées comme display: inline par défaut:
 

section, un article, de côté, pied de page, en-tête, nav, hgroup {display: block;}

 
Bien sûr, le développeur web peut leur style différent, 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 {{HTMLElement ("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:
 
 
<script>  <!--[if lt IE 9]>;
Document.createElement("header");
document.createElement ("footer"); document.createElement ("section"); document.createElement ("côté"); 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é 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 {{HTMLElement ("NoScript")}} élément devrait être ajouté pour ce cas:
 

<noscript><strong> attention ! </ strong> Parce que votre navigateur ne supporte pas HTML5, certains éléments sont simulés en utilisant JScript.         Malheureusement votre navigateur a désactivé les scripts. S'il vous plaît l'activer pour afficher cette page. </ Noscript>

 
Cela conduit à du code ci-dessous pour permettre le soutien des sections et des éléments HTML5 titres de participation non HTML5 navigateurs, même pour Internet Explorer (8 ans et plus), avec un repli approprié pour le cas où votre dernier est configuré pour ne pas utiliser des 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>            Parce que votre navigateur ne supporte pas HTML5, certains éléments sont simulés en utilisant JScript. Malheureusement votre navigateur a désactivé les scripts. S'il vous plaît l'activer pour afficher cette page. </ Noscript> <![endif] ->
 

Conclusion

 
Les nouvelles sections et des éléments titres introduits en HTML5 porter la capacité à décrire la structure et les grandes lignes d'un document Web d'une manière standard. Ils apportent un grand avantage pour les personnes ayant des navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les personnes ayant besoin de l'aide de quelques technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu de charges, peuvent être mis en oeuvre aussi dans HTML5 navigateurs non. Par conséquent, ils doivent être utilisés sans restrictions.
 
{{HTML5ArticleTOC ()}}

 

Source de la révision

<p>&nbsp;</p>
<div>
  La spécification HTML5 apporte plusieurs éléments nouveaux à des 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 comment les utiliser pour définir le contour souhaité de tout document.</div>
<div>
  &nbsp;</div>
<h3 id="Structure_d'un_document_en_HTML_4">Structure d'un document en HTML 4</h3>
<div>
  &nbsp;</div>
<div>
  La structure d'un document, à savoir la structure sémantique de ce qui est entre &lt;body&gt; et &lt;/body&gt;, 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 une division HTML ({{HTMLElement ("div")}}) élément HTML avec des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}) dans ce cadre, définir son titre. Les relations de ces éléments HTML et HTML division Rubrique conduit à la structure du document et son contour.</div>
<div>
  &nbsp;</div>
<div>
  Ainsi, la majoration suivante:</div>
<div>
  &nbsp;</div>
<div>
  <code>&lt;div class="section" id="forest-elephants"&gt; Les éléphants de forêt &lt;h1&gt; &lt;/ h1 &lt;p&gt;&gt; Dans cet article, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;div class="subsection" id="forest-habitat"&gt; &lt;h2&gt; Habitat &lt;/ h2&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... &lt;/div&gt; &lt;/div&gt;</code></div>
<div>
  &nbsp;</div>
<div>
  conduit le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  1. Les éléphants de forêt 1.1 Habitat</div>
<div>
  &nbsp;</div>
<div>
  Les éléments {{HTMLElement ("div")}} ne sont pas obligatoire de définir une nouvelle section. La simple présence d'un élément HTML cap est suffisant pour impliquer une nouvelle section. Par conséquent,</div>
<div>
  &nbsp;</div>
<p><code>&lt;h1&gt;Les éléphants de forêt &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;h2&gt; Habitat &lt;/ h2&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... &lt;h2&gt; Diet &lt;/ h2&gt; &lt;h1&gt; gerbilles de Mongolie &lt;/ h1&gt;</code></p>
<div>
  conduit au schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  1. Les éléphants de forêt 1.1 Habitat 1.2 Régime 2. Gerbilles de Mongolie</div>
<div>
  &nbsp;</div>
<h3 id="Probl.C3.A8mes_r.C3.A9solus_par_HTML5"><strong>Problèmes résolus par HTML5</strong></h3>
<div>
  Le code HTML 4 définit la structure d'un document et de son algorithme implicite décrivant est très rude et conduit à de nombreux problèmes:</div>
<div>
  &nbsp;</div>
<div>
  L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir des valeurs spécifiques pour les attributs de classe rend possible l'automatisation de l'algorithme décrivant impossible ("Est-ce que {{HTMLElement (" div ")}} partie de la aperçu de la page, définissant une section ou un paragraphe? "Ou" est-ce seulement une présentation {{HTMLElement ("div")}}, utilisé uniquement pour le style? "). En d'autres termes, la spécification HTML4 est très imprécis sur ce qui est une section et comment son champ d'application est défini. La génération automatique de contours est importante, surtout pour les aides techniques, 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'{{HTMLElement ("div")}} éléments de l'algorithme décrit par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.</div>
<div>
  &nbsp;</div>
<div>
  La fusion de plusieurs documents est dur: l'inclusion d'un document en sous-document principal moyen de changement du niveau de l'élément HTML Rubriques de sorte que le contour est maintenu. Ce problème est résolu dans le HTML5 que les éléments nouvellement introduits sectionnement ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement (" côté ")}}) sont toujours sous-sections de la section de leur ancêtre le plus proche, indépendamment de ce que les sections sont créées par rubriques internes.</div>
<div>
  &nbsp;</div>
<div>
  Parce que chaque élément HTML Cap fait partie du contour, il n'est pas possible de décrire un sous-titre ou un titre secondaire (par exemple, &lt;h1&gt; Justine &lt;/ h1&gt; &lt;h2&gt; Les Malheurs de la Vertu &lt;/ h2&gt; crée le schéma 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduit l'élément {{HTMLElement ("hgroup")}} qui cache tous les éléments de titre sauf le premier du rang le plus élevé (par exemple, &lt;hgroup&gt; &lt;h1&gt; Justine &lt;/ h1&gt; &lt;h2&gt; Les Malheurs de la Vertu &lt;/ h2&gt; &lt;/ hgroup&gt; crée le schéma 1. Justine).</div>
<div>
  &nbsp;</div>
<div>
  En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont souvent pas que linéaire. Un document peut avoir des sections spéciales contenant des informations qui ne fait pas partie, même si elle est liée à l'écoulement principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("côté")}} permettant ces sections ne font pas partie du plan principal.</div>
<div>
  &nbsp;</div>
<div>
  Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des informations sur la section contenant ne portait pas sur le document, mais à l'ensemble du site, comme l'information logos, menus, table des matières, ou droit d'auteur et mentions légales . A cet effet, HTML5 introduit trois éléments spécifiques sections: {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header ")}} pour obtenir des informations liées au site.</div>
<div>
  &nbsp;</div>
<div>
  Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant contours de documents à être prévisible et utilisé par le navigateur afin d'améliorer l'expérience utilisateur.</div>
<div>
  &nbsp;</div>
<div>
  L'algorithme Outline HTML5</div>
<div>
  &nbsp;</div>
<h3 id="Definir_des_sections_en_HTML5"><strong>Definir des sections en HTML5</strong></h3>
<div>
  &nbsp;</div>
<div>
  Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriquées. A côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("côté")} }, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.</div>
<div class="note">
  <p>&nbsp;</p>
  <p>Remarque: Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir <a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Définition Rubriques en HTML5</a>.</p>
</div>
<p>Exemple:</p>
<div>
  &nbsp;</div>
<div>
  <code>&lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;section&gt; &lt;h1&gt; Introduction &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. &lt;/ Section&gt; &lt;section&gt; &lt;h1&gt; Habitat &lt;/ h1&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. &lt;/ Section&gt; &lt;aside&gt; bloc publicitaire &lt;p&gt; &lt;/ côté&gt; &lt;/ section&gt; &lt;p &lt;footer&gt; (c) 2010 La société Exemple &lt;/ footer&gt;</code></div>
<div>
  &nbsp;</div>
<div>
  Cet extrait de code HTML définit deux sections de haut niveau:</div>
<div>
  &nbsp;</div>
<div>
  <code><span style="color:#ff0000;">&lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;section&gt; &lt;h1&gt; Introduction &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. &lt;/ Section&gt; &lt;section&gt; &lt;h1&gt; Habitat &lt;/ h1&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. &lt;/ Section&gt; &lt;aside&gt; bloc publicitaire &lt;p&gt; &lt;/ côté&gt; &lt;/ section&gt;</span> &lt;p&gt;<span style="color:#008000;">&lt;footer&gt;&nbsp;&lt;p&gt;</span></code></div>
<div>
  <code><span style="color:#008000;">(c) 2010 La société Exemple &lt;/ footer&gt;</span></code></div>
<div>
  &nbsp;</div>
<div>
  La première section comprend trois sous-sections:</div>
<div>
  &nbsp;</div>
<div>
  &lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; <span style="color:#ff0000;">&lt;section&gt; &lt;h1&gt; Introduction &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. &lt;/ Section&gt;</span> <span style="color:#008000;">&lt;section&gt; &lt;h1&gt; Habitat &lt;/ h1&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. &lt;/ Section&gt; </span><span style="color:#0000ff;">&lt;aside&gt; bloc publicitaire &lt;p&gt; &lt;/aside&gt;</span> &lt;/section&gt; &lt;p &lt;footer&gt; (c) 2010 La société Exemple &lt;/ footer&gt;</div>
<div>
  &nbsp;</div>
<div>
  Cela conduit à la structure suivante:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Les éléphants de forêt &nbsp; &nbsp; 1.1 Introduction 1.2 Habitat 1.3 Section (aside)</code></div>
<div>
  &nbsp;</div>
<h3 id="D.C3.A9finir_les_ent.C3.AAte_en_HTML5"><strong>Définir les entête en HTML5</strong></h3>
<div>
  Bien que les éléments HTML sectionnement de définir la structure du document, un aperçu a également besoin rubriques pour être utile. La règle de base est simple: le premier élément HTML rubrique (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.</div>
<div>
  &nbsp;</div>
<div>
  Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé, et {{HTMLElement ("h6")}} a le rang le plus bas. Classement relatif d'importance que dans une section, la structure des sections détermine les grandes lignes, et non pas le rang rubrique des sections. Par exemple, ce code:</div>
<div>
  &nbsp;</div>
<div>
  <code>&lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;section&gt; &lt;h2&gt; Habitat &lt;/ h2&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... &lt;/ Section&gt; &lt;/ section&gt; &lt;section&gt; &lt;h3&gt; gerbilles de Mongolie &lt;/ h3&gt; Dans cet article, nous discutons des gerbilles célèbres mongol. Cette section ... continue ... &lt;/ Section&gt;</code></div>
<div>
  &nbsp;</div>
<div>
  conduit le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Les éléphants de forêt 1.1 Habitat 2. Gerbilles de Mongolie</code></div>
<div>
  &nbsp;</div>
<div>
  Notez que le rang de l'élément de titre (dans l'exemple {{HTMLElement ("h1")}} pour le premier haut-niveau de la section, {{HTMLElement ("h2")}} pour le paragraphe et {{HTMLElement ("h3 ")}} pour le deuxième haut-niveau de la section) n'est pas important. (Toute rang peut être utilisée comme en-tête d'une section explicitement définie, bien que cette pratique n'est pas recommandée.)</div>
<div>
  &nbsp;</div>
<h3 id="Sectionnement_implicite"><strong>Sectionnement implicite</strong></h3>
<div>
  &nbsp;</div>
<div>
  Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir les grandes lignes, pour garder 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 découpage implicite.</div>
<div>
  &nbsp;</div>
<div>
  Les éléments HTML (Rubriques {{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définit une nouvelle implicite, section quand ils ne sont pas le premier titre de leur parent, explicite sections. La façon implicite cette section est positionnée dans le contour est défini par son rang par rapport à la position précédente dans leur section parent. Si elle est d'un rang inférieur à la rubrique précédente, il ouvre une implicite sous-section de la section. Ce code:</div>
<div>
  &nbsp;</div>
<div>
  &lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;h3 class="implicit subsection"&gt; Habitat &lt;/ h3&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. Présent paragraphe continue ... ... &lt;/ Section&gt;</div>
<div>
  conduisant le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  1. Les éléphants de forêt 1.1 Habitat (implicitement défini par l'élément de h3)</div>
<div>
  &nbsp;</div>
<div>
  Si elle est de même rang que la rubrique précédente, il ferme la section précédente (qui peut avoir été explicite!) Et en ouvre un nouveau implicite au même niveau:</div>
<div>
  &nbsp;</div>
<div>
  <code>&lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;h1 class="implicit section"&gt; gerbilles de Mongolie &lt;/ h1&gt; &lt;p&gt; gerbilles de Mongolie sont mignons petits mammifères. Cette section ... continue ... &lt;/ Section&gt;</code></div>
<div>
  &nbsp;</div>
<div>
  conduisant le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  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)</div>
<div>
  &nbsp;</div>
<div>
  Si elle est d'un rang supérieur à la rubrique précédente, il ferme la section précédente et en ouvre un nouveau implicite au niveau supérieur:</div>
<div>
  &nbsp;</div>
<p><code>&lt;body&gt; &lt;h1&gt; Mammifères &lt;/h1&gt; &lt;h2&gt; Baleines &lt;/h2&gt; &lt;p&gt; Dans cette section, nous discutons de baleines nageantes. Cette section ... continue ... &lt;section&gt; éléphants de forêt &lt;h3&gt; &lt;/h3&gt; Dans cet article, nous discutons des éléphants de forêt moins connus. Cette section ... continue ... &lt;h3&gt; gerbilles de Mongolie &lt;/ h3&gt; Hordes &lt;p&gt; de gerbilles ont étalé leur gamme bien au-delà Mongolie. Présent paragraphe continue ... ... &lt;h2&gt; Reptiles &lt;/ h2&gt; Reptiles &lt;p&gt; sont des animaux à sang froid. Présent paragraphe continue ... ... &lt;/Section&gt; &lt;/ body&gt;</code></p>
<div>
  &nbsp;</div>
<div>
  conduisant le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Mammifères Baleines (1,1 implicitement défini par l'élément h2) 1,2 éléphants de forêt (explicitement définie par l'élément de section) 1,3 gerbilles de Mongolie (implicitement défini par l'élément de h3, qui ferme la section précédente dans le même temps) 1,4 Reptiles (implicitement défini par le élément h2, qui ferme la section précédente dans le même temps)</code></div>
<div>
  &nbsp;</div>
<div>
  Ce n'est pas le plan que l'on pourrait s'attendre rapidement en jetant un regard sur les balises de titre. Pour rendre votre balisage humaine compréhensible, c'est une bonne pratique d'utiliser des balises explicites pour ouvrir et fermer les sections, et pour marquer la position au niveau de la section destinée nidification. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs sont le rendu de votre plan de document de manière inattendue, vérifiez si vous avez sections qui sont implicitement fermés par rubrique éléments.</div>
<div>
  &nbsp;</div>
<div>
  Une exception à la règle générale qui rubrique rang doit correspondre au niveau de la section d'imbrication des sections qui peuvent être réutilisés dans plusieurs documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblés dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer {{HTMLElement ("h1")}} pour le niveau supérieur intitulé 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 il apparaît. Balises de section explicites sont toujours utiles dans ce cas.</div>
<div>
  &nbsp;</div>
<div>
  Redéfinition Sectionnement implicite</div>
<div>
  &nbsp;</div>
<div>
  &nbsp;Parfois, une section a besoin d'avoir plusieurs rubriques. Quelques cas habituels sont:</div>
<div>
  &nbsp;</div>
<div>
  une section d'un livre, ou un film, qui a un titre secondaire:</div>
<div>
  &lt;section&gt; &lt;h1&gt; Justine &lt;/ h1&gt; &lt;h2&gt; Les Malheurs de la vertu &lt;/ h2&gt; &lt;/ section&gt;</div>
<div>
  &nbsp;</div>
<div>
  conduit au schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Justine 1.1 Les Malheurs de la vertu</code></div>
<div>
  &nbsp;</div>
<div>
  le titre secondaire peut être utilisé pour une liste de tags:</div>
<div>
  &lt;section&gt; &lt;h1&gt; section et les contours d'un document &lt;/ h1&gt; &lt;h2&gt; HTML, HTML5, articles, Outlines &lt;/ h2&gt; &lt;/ section&gt;</div>
<div>
  conduit le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Section et les contours d'un document HTML sections, HTML5, 1,1, Outlines</code></div>
<div>
  &nbsp;</div>
<div>
  En raison du sectionnement implicite, ce n'est pas possible sans l'aide de l'élément du groupe Rubriques HTML ({{HTMLElement ("hgroup")}} introduit en HTML5). Il cache toutes les rubriques du plan, sauf le premier, ce qui permet une substitution de la sectionnement implicite. Avec cet élément de l'exemple du livre secondaires:</div>
<div>
  &nbsp;</div>
<div>
  &lt;section&gt; &lt;hgroup&gt; &lt;h1&gt; Justine &lt;/ h1&gt; &lt;h2&gt; Les Malheurs de la vertu &lt;/ h2&gt; &lt;/ hgroup&gt; ... Certaines matières ... &lt;/ Section&gt;</div>
<div>
  conduit le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Justine</code></div>
<div>
  &nbsp;</div>
<h3 id="Racines_de_sectionnement">Racines de sectionnement</h3>
<div>
  Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et rubriques à l'intérieur entre eux ne contribuent pas au contour de leur ancêtre. A côté de {{HTMLElement ("body")}} qui est la racine logique de sectionnement d'un document, ce sont souvent des éléments qui introduisent contenu externe à la page: {{HTMLElement ("blockquote")}}, {{HTMLElement ("les détails ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" chiffre ")}} et {{HTMLElement (" td ")}}.</div>
<div>
  &nbsp;</div>
<div>
  <code>Exemple:</code></div>
<div>
  &nbsp;</div>
<div>
  <code>&lt;section&gt; éléphants de forêt &lt;h1&gt; &lt;/ h1&gt; &lt;section&gt; &lt;h2&gt; Introduction &lt;/ h2&gt; &lt;p Dans cette section, nous discutons des éléphants de forêt moins connus &lt;/ section&gt; &lt;section&gt; &lt;h2&gt; Habitat &lt;/ h2&gt; Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans "&lt;cite&gt; l'éléphant de forêt à Bornéo &lt;/ cite&gt;": &lt;blockquote&gt; &lt;h1&gt; Bornéo vie &lt;p&gt; élément La forêt de Bornéo ... &lt;/ Blockquote&gt; &lt;/ section&gt; &lt;/ section&gt;</code></div>
<div>
  &nbsp;</div>
<div>
  Cet exemple se traduit par le schéma suivant:</div>
<div>
  &nbsp;</div>
<div>
  <code>1. Les éléphants de forêt 1.1 Introduction 1.2 Habitat</code></div>
<div>
  &nbsp;</div>
<div>
  Ce contour ne contient pas le contour interne de l'élément de {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole son contour intérieur.</div>
<div>
  &nbsp;</div>
<h4 id="Les_sections_en_dehors_du_plan">Les sections en dehors du plan</h4>
<div>
  HTML5 introduit quatre nouveaux éléments qui permettent de définir des sections qui ne font pas partie les grandes lignes d'un document Web:</div>
<div>
  &nbsp;</div>
<div>
  L'élément HTML Section part ({{HTMLElement ("côté")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte explication ou une publicité. Il dispose de son propre plan, mais il n'appartient pas à la principale.</div>
<div>
  &nbsp;</div>
<div>
  L'élément HTML Section navigation ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il ne peut y en avoir plusieurs dans un document, par exemple, une page interne avec des liens, comme une table des matières, et une autre avec des liens de sites de navigation. Ces liens ne font pas partie de l'écoulement principal et les grandes lignes et peut être habituellement pas initialement rendue par lecteur d'écran et même la technologie d'assistance.</div>
<div>
  &nbsp;</div>
<div>
  L'élément En-tête HTML Section ({{HTMLElement ("header")}}) définit un en-tête, contenant typiquement 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.</div>
<div>
  &nbsp;</div>
<div>
  L'élément HTML Section Pied de page ({{HTMLElement ("footer")}}) définit un pied de page, contenant typiquement le droit d'auteur et morale remarqué et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.</div>
<div>
  &nbsp;</div>
<h3 id="Adresses_et_horaires_de_publication_dans_les_.C3.A9l.C3.A9ments_de_sectionnement"><strong>Adresses et horaires de publication dans les éléments de sectionnement</strong></h3>
<div>
  L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 permis à cette via l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.</div>
<div>
  &nbsp;</div>
<div>
  Un document peut être faite 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 {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou {{plus proche HTMLElement ("article")}} ancêtre.</div>
<div>
  &nbsp;</div>
<div>
  De même, le nouveau HTML5 {{HTMLElement ("time")}} élément, avec son {{htmlattrxref ("pubdate", "temps")}} attribut booléen, représente la date de publication associé à l'ensemble du document, respectivement à la article, liée à sa {{HTMLElement ("body")}} ou {{plus proche HTMLElement ("article")}} ancêtre.</div>
<div>
  &nbsp;</div>
<h3 id="Utilisation_des_.C3.A9l.C3.A9ments_HTML5_dans_les_Navigateurs_Non-HTML5">Utilisation des éléments HTML5 dans les Navigateurs Non-HTML5</h3>
<div>
  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ées comme display: inline par défaut:</div>
<div>
  &nbsp;</div>
<p><code>section, un article, de côté, pied de page, en-tête, nav, hgroup {display: block;}</code></p>
<div>
  &nbsp;</div>
<div>
  Bien sûr, le développeur web peut leur style différent, 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 {{HTMLElement ("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.</div>
<div>
  &nbsp;</div>
<div>
  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:</div>
<div>
  &nbsp;</div>
<div>
  &nbsp;</div>
<div>
  &lt;script&gt; &nbsp;&lt;!--[if lt IE 9]&gt;;</div>
<div>
  Document.createElement("header");</div>
<div>
  document.createElement ("footer"); document.createElement ("section"); document.createElement ("côté"); document.createElement ("nav"); document.createElement ("article"); document.createElement ("hgroup"); document.createElement ("time"); &lt;/ script&gt; &lt;! [endif] -&gt;</div>
<div>
  &nbsp;</div>
<div>
  Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activé 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 {{HTMLElement ("NoScript")}} élément devrait être ajouté pour ce cas:</div>
<div>
  &nbsp;</div>
<p><span style="font-family: 'Courier New', 'Andale Mono', monospace; ">&lt;noscript&gt;</span>&lt;strong&gt; attention ! &lt;/ strong&gt; Parce que votre navigateur ne supporte pas HTML5, certains éléments sont simulés en utilisant JScript. &nbsp; &nbsp; &nbsp; &nbsp; Malheureusement votre navigateur a désactivé les scripts. S'il vous plaît l'activer pour afficher cette page. &lt;/ Noscript&gt;</p>
<div>
  &nbsp;</div>
<div>
  Cela conduit à du code ci-dessous pour permettre le soutien des sections et des éléments HTML5 titres de participation non HTML5 navigateurs, même pour Internet Explorer (8 ans et plus), avec un repli approprié pour le cas où votre dernier est configuré pour ne pas utiliser des scripts :</div>
<div>
  &nbsp;</div>
<p>&lt;!--[if lt IE 9]&gt;&nbsp;&lt;script&gt;</p>
<div>
  document.createElement &nbsp;("header")&nbsp;</div>
<div>
  document.createElement ("footer");</div>
<div>
  document.createElement ("section");</div>
<div>
  document.createElement ("aside");</div>
<div>
  document.createElement ("nav");</div>
<div>
  document.createElement ("article");</div>
<div>
  document.createElement ("hgroup");</div>
<div>
  document.createElement ("time"); &lt;/ script&gt;&nbsp;&lt;noscript&gt;</div>
<div>
  &nbsp;&lt;strong&gt;&nbsp;Attention!&lt;/strong&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Parce que votre navigateur ne supporte pas HTML5, certains éléments sont simulés en utilisant JScript. Malheureusement votre navigateur a désactivé les scripts. S'il vous plaît l'activer pour afficher cette page. &lt;/ Noscript&gt; &lt;![endif] -&gt;</div>
<div>
  &nbsp;</div>
<h3 id="Conclusion">Conclusion</h3>
<div>
  &nbsp;</div>
<div>
  Les nouvelles sections et des éléments titres introduits en HTML5 porter la capacité à décrire la structure et les grandes lignes d'un document Web d'une manière standard. Ils apportent un grand avantage pour les personnes ayant des navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les personnes ayant besoin de l'aide de quelques technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu de charges, peuvent être mis en oeuvre aussi dans HTML5 navigateurs non. Par conséquent, ils doivent être utilisés sans restrictions.</div>
<div>
  &nbsp;</div>
<div>
  <div>
    {{HTML5ArticleTOC ()}}</div>
</div>
<p>&nbsp;</p>
Revenir à cette révision