Commentaire: En raison du manque de structure, même de bonnes pages HTML sont difficiles à gérer. Le niveau du titre doit être analysé pour voir comment chaque partie est divisée. La barre latérale, le pied de page, l'en-tête, la barre de navigation, la zone de contenu principale et les articles sont représentés par des éléments div communs. HTML 5 a ajouté de nouveaux éléments pour identifier ces structures communes: · Sectio
En raison du manque de structure, même de bonnes pages HTML sont difficiles à gérer. Le niveau du titre doit être analysé pour voir comment chaque partie est divisée. La barre latérale, le pied de page, l'en-tête, la barre de navigation, la zone de contenu principale et les articles sont représentés par des éléments div communs. HTML 5 ajoute de nouveaux éléments pour identifier ces structures communes:
· Section: Cela peut être un chapitre ou une section du livre, et cela peut en fait être quelque chose avec son propre titre dans HTML 4
· En-tête: l'en-tête affiché sur la page; c'est différent de l'élément de tête
pied de page: pied de page; peut afficher les signatures dans les e-mails
Nav: un ensemble de liens vers d'autres pages
Article: Un article sur le blog, le magazine, la compilation d'articles, etc.
Considérons une page d'accueil de blog typique, qui a une tête en haut et un pied de page en bas, ainsi que plusieurs articles, une zone de navigation et une barre latérale, voir le code 1 page de blog typique
<html>
<adal>
<Title> Mokka Mit Schlag </Title>
</ head>
<body>
<div id = page>
<div id = en-tête>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = conteneur>
<div id = Center class = colonne>
<div class = post id = post-1000572>
<h2> <a href =
/ Blog / Birding / 2007/04/23 / printemps-comes and-goes-in-sussex-conty />>
Le printemps vient (et va) dans le comté de Sussex </a> </h2>
<div class = entrée>
<p> Hier, j'ai rejoint le Brooklyn Bird Club pour notre
Voyage annuel dans l'ouest du New Jersey, en particulier hyper
Humus, un point chaud relativement récemment découvert. Il
a commencé comme une belle matinée d'hiver à notre arrivée
sur le site à 7h30, a progressé pour faire le tour
10h00 et atteint le début de l'été avant 10h15. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/ Blog / Birding / 2007/04/23 / mais-Does-it-Count-for-your-Life-list />
Mais cela compte-t-il pour votre liste de vie? </a> </h2>
<div class = entrée>
<p> semble que vous pouvez maintenant aller <a
href =
2007/04 / CONE_SF> Recherche d'oiseau via Internet </a>. je
Je n'ai pas encore été le tester (20 utilisateurs
Limitez apparemment) mais c'est certainement cool.
Personnellement, je ne peux pas imaginer qu'il remplace
Être en fait sur le terrain par n'importe quelle petite quantité.
D'un autre côté, je l'ai toujours trouvé assez
triste de rencontrer des ornithologues amateurs seniors qui ne sont plus en mesure de
Tenez les jumelles stables ou accédez au parc. Je peux
Imaginez que cela pourrait leur intéresser. À
au moins un oiseau âgé a fait une grande année à la télévision, après
Il ne pouvait plus sortir autant. Ceci certainement
en tête. </p>
</div>
</div>
</div>
<div class = navigation>
<div class = alignleft>
<a href = / blog / page / 2 /> «_fcksavedUrl = / blog / page / 2 />« Entrées précédentes </a>
</div>
<div class = alignright> </div>
</div>
</div>
<div id = bonne classe = colonne>
<ul id = barre latérale>
<li> <h2> info </h2>
<ul>
<li> <a href = / blog / commentaire-politique /> Politique de commentaire </a> </li>
<li> <a href = / blog / todo-list /> todo list </a> </li>
</ul> </li>
<li> <h2> Archives </h2>
<ul>
<li> <a href = '/ blog / 2007/04 /'> avril 2007 </a> </li>
<li> <a href = '/ blog / 2007/03 /'> mars 2007 </a> </li>
<li> <a href = '/ blog / 2007/02 /'> février 2007 </a> </li>
<li> <a href = '/ blog / 2007/01 /'> janvier 2007 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = pied de page>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</div>
</div>
</docy>
</html>
Même avec l'indentation correcte, ces divs imbriqués se sentent toujours très déroutants. Dans HTML 5, ces éléments peuvent être remplacés par des éléments sémantiques, voir le code 2 pages de blog typiques écrites en html5
<html>
<adal>
<Title> Mokka Mit Schlag </Title>
</ head>
<body>
<dique>
<h1> <a href => mokka mit schlag </a> </h1>
</-header>
<segction>
<Re article>
<h2> <a href =
/ Blog / Birding / 2007/04/23 / printemps-comes and-goes-in-sussex-conty />>
Le printemps vient (et va) dans le comté de Sussex </a> </h2>
<p> Hier, j'ai rejoint le Brooklyn Bird Club pour notre
Voyage annuel dans l'ouest du New Jersey, en particulier hyper
Humus, un point chaud relativement récemment découvert. Il
a commencé comme une belle matinée d'hiver quand nous sommes arrivés à
Le site à 7h30 a progressé au printemps vers 10h00
Am, et atteint le début de l'été avant 10h15. </p>
</article>
<Re article>
<h2> <a href =
/ Blog / Birding / 2007/04/23 / mais-Does-it-Count-for-your-Life-list />
Mais cela compte-t-il pour votre liste de vie? </a> </h2>
<p> semble que vous pouvez maintenant aller <a
href =
2007/04 / CONE_SF> Recherche d'oiseau via Internet </a>. je
Je n'ai pas encore été le tester (20 utilisateurs
Limitez apparemment) mais c'est certainement cool.
Personnellement, je ne peux pas imaginer qu'il remplace
Être en fait sur le terrain par n'importe quelle petite quantité.
D'un autre côté, je l'ai toujours trouvé assez
triste de rencontrer des ornithologues amateurs seniors qui ne sont plus en mesure de
Tenez les jumelles stables ou accédez au parc. Je peux
Imaginez que cela pourrait leur intéresser. À
au moins un oiseau âgé a fait une grande année à la télévision, après
Il ne pouvait plus sortir autant. Ceci certainement
en tête. </p>
</article>
<Nav>
<a href = / blog / page / 2 /> «_fcksavedUrl = / blog / page / 2 />« Entrées précédentes </a>
</ nav>
</ section>
<Nav>
<ul>
<li> <h2> info </h2>
<ul>
<li> <a href = / blog / commentaire-politique /> Politique de commentaire </a> </li>
<li> <a href = / blog / todo-list /> todo list </a> </li>
</ul> </li>
<li> <h2> Archives </h2>
<ul>
<li> <a href = '/ blog / 2007/04 /'> avril 2007 </a> </li>
<li> <a href = '/ blog / 2007/03 /'> mars 2007 </a> </li>
<li> <a href = '/ blog / 2007/02 /'> février 2007 </a> </li>
<li> <a href = '/ blog / 2007/01 /'> janvier 2007 </a> </li>
</ul>
</li>
</ul>
</ nav>
<foomer>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</fooder>
</docy>
</html>
Maintenant, aucun div n'est nécessaire. Vous n'avez plus besoin de définir vous-même l'attribut de classe et vous pouvez déduire la signification de chaque partie à partir du nom de l'élément standard. Ceci est particulièrement important pour les navigateurs audio, les navigateurs mobiles et autres navigateurs non standard.
(à suivre)