Question Les meilleures pratiques HTML5; éléments de section / en-tête / de côté / article


Il y a assez d'informations sur HTML5 sur le web (et aussi sur stackoverflow), mais maintenant je suis curieux de connaître les "meilleures pratiques". Les balises comme section / headers / article sont nouvelles, et tout le monde a des opinions différentes sur quand et où vous devriez utiliser ces balises. Alors, que pensez-vous des dispositions et du code suivants?

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

ligne 7. section autour de l'ensemble du site? Ou seulement un div?

ligne 8. Chaque section commencer avec un header?

ligne 23. Est-ce que c'est div droite? ou doit-ce être un section?

ligne 24. Split colonne gauche / droite avec un div.

ligne 25. Le bon endroit pour article marque?

ligne 26. Est-il nécessaire de mettre votre h1-tag dans le header-marque?

ligne 43. Le contenu n'est pas lié à l'article principal, donc j'ai décidé que c'est un section et pas un aside.

ligne 44. H2 sans header

ligne 53. section sans pour autant header

ligne 63. Div avec tous les articles (non liés)

ligne 64. header avec h2

ligne 65. Hmm, div ou section? Ou supprimer ce div et utilisez seulement le article-marque

ligne 105. Pied de page :-)


493
2018-01-24 10:48


origine


Réponses:


En fait, vous avez tout à fait raison quand il s'agit d'en-tête / pied de page. Voici quelques informations de base sur la façon dont chaque balise HTML5 peut / devrait être utilisée (je suggère de lire la source complète liée en bas):

section - Utilisé pour regrouper le contenu thématique. Cela ressemble à un élément div, mais ce n'est pas le cas. Le div n'a pas de signification sémantique. Avant de remplacer tous vos div avec des éléments de section, demandez-vous toujours: "Tout le contenu est-il lié?"

de côté - Utilisé pour le contenu lié tangentiellement. Tout simplement parce que certains contenus apparaissent à gauche ou à droite du contenu principal n'est pas une raison suffisante pour utiliser l'élément de côté. Demandez-vous si le contenu dans le côté peut être supprimé sans réduire la signification du contenu principal. Les Pullquotes sont un exemple de contenu lié tangentiellement.

entête - Il existe une différence cruciale entre l'élément d'en-tête et l'utilisation générale acceptée de l'en-tête (ou de la bannière Masthead). Il n'y a généralement qu'un en-tête ou "générique" dans une page. En HTML5, vous pouvez en avoir autant que vous voulez. La spécification le définit comme "un groupe d'aides à l'introduction ou à la navigation". Vous pouvez utiliser un en-tête dans n'importe quelle section de votre site. En fait, vous devriez probablement utiliser un en-tête dans la plupart de vos sections. La spécification décrit l'élément section comme "un groupement thématique de contenu, généralement avec un en-tête".

nav - Destiné aux informations de navigation principales. Un groupe de liens regroupés n'est pas une raison suffisante pour utiliser l'élément nav. La navigation à l'échelle du site, en revanche, appartient à un élément nav.

bas de page - On dirait que c'est une description de la position, mais ce n'est pas le cas. Les éléments de pied de page contiennent des informations sur son élément conteneur: qui l'a écrit, le copyright, les liens vers le contenu associé, etc. Alors que nous avons généralement un pied de page pour un document entier, HTML5 nous permet d'avoir également un pied de page dans les sections.

La source: http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

En outre, voici une description sur article, introuvable dans la source ci-dessus:

article - Utilisé pour l'élément qui spécifie un contenu indépendant et autonome. Un article doit avoir un sens en soi. Avant de remplacer tous vos div avec des éléments d'article, demandez-vous toujours: "Est-il possible de le lire indépendamment du reste du site?"


452
2018-06-29 21:57



Malheureusement, les réponses données jusqu'ici (y compris les plus votées) sont soit «juste» du bon sens, soit carrément fausses, soit au mieux confuses. Aucun de mots-clés cruciaux1 apparaitre!

J'ai écrit 3 réponses:

  1. Cette explication (commencez ici).
  2. Des réponses concrètes aux questions du PO.
  3. HTML détaillé amélioré.

Pour comprendre le rôle des éléments HTML discutés ici, vous devez savoir que certains d’entre eux sectionnent le document. Chaque document html peut être sectionné selon le Algorithme de contour HTML5 dans le but de créer un sommaire ou une table des matières. Le plan n'est généralement pas visible (de nos jours), mais les auteurs devraient utiliser html de telle sorte que le plan qui en résulte reflète leurs intentions.

Vous pouvez créer des sections avec exactement ces éléments et rien d'autre:

  • créer des sous-sections (explicites)
    • <section> sections
    • <article> sections
    • <nav> sections
    • <aside> sections
  • créer des sections ou des sous-sections de fratrie
    • sections de type non spécifié avec <h*>2 (tous ne le font pas, voir ci-dessous)
  • pour mettre à niveau fermer la section (sous) explicite actuelle

Les sections peuvent être nommées:

  • <h*> les sections créées se nomment
  • <section|article|nav|aside> les sections seront nommées par le premier <h*> Si il y en a un
    • celles-ci <h*> sont les seuls qui ne créent pas de sections elles-mêmes

Il y a une chose de plus dans les sections: les contextes suivants (c'est-à-dire les éléments) créent des "limites de contour". Quelles que soient les sections qu'ils contiennent, ils leur sont privés:

  • le document lui-même avec <body>
  • cellules de table avec <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, et <figure>
  • rien autre

title

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body>
has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Cela soulève deux questions:

Quelle est la différence entre <article> et <section>?

  • les deux peuvent:
    • être imbriqués l'un dans l'autre
    • prendre une notion différente dans un contexte ou un niveau d'imbrication différent
  • <section>s sont comme des chapitres de livres
    • ils ont généralement des frères et sœurs (peut-être dans un document différent?)
    • ensemble, ils ont quelque chose en commun, comme des chapitres dans un livre
  • un auteur, un <article>, au moins au niveau le plus bas
    • exemple standard: un seul commentaire de blog
    • une entrée de blog est aussi un bon exemple
    • une entrée de blog <article> et son commentaire <article>s pourrait également être enveloppé d'un <article>
    • c'est une chose "complète", pas une partie d'une série similaire
  • <section>s dans un <article> sont comme des chapitres dans un livre
  • <article>s dans un <section>sont comme des poèmes dans un volume (dans une série)

Comment faire <header>, <footer> et <main> s'intégrer?

  • ils ont aucune influence sur la section
  • <header> et <footer>
    • ils vous permettent de marquer des zones de chacun section
    • même dans une section, vous pouvez les avoir plusieurs fois
    • se différencier de la partie principale dans cette section 
    • limité seulement par le goût de l'auteur
    • <header>
      • peut marquer le titre / nom de cette section
      • peut contenir un logo pour cette section
      • n'a pas besoin d'être en haut ou en haut de la section
    • <footer>
      • peut marquer les crédits / auteur de cette section
      • peut venir en haut de la section
      • peut même être au-dessus d'un <header>
  • <main>
    • seulement autorisé une fois
    • marque la partie principale de la section de niveau supérieur (c'est-à-dire le document, <body> C'est)
    • les sous-sections elles-mêmes n'ont pas de balisage pour leur partie principale
    • <main> peut même "cacher" dans certaines sous-sections du document, alors que le document <header> et <footer> ne peut pas (ce balisage marquerait alors en-tête / pied de page de cette sous-section)
      • mais il n'est pas autorisé <article> sections3
    • aide à distinguer "la chose réelle" du contenu non-en-tête, non-pied de page et non principal du document, si cela a du sens dans votre cas ...

1 à l'esprit vient: contour, algorithme, sectionnement implicite
2 j'utilise <h*> en sténographie pour <h1>, <h2>, <h3>, <h4>, <h5> et <h6> 
3 non plus <main> Autorisé dans <aside> ou <nav>, mais ce n'est pas une surprise. - En effet: <main> ne peut cacher que dans (imbriqué) descendant <section> sections ou apparaissent au plus haut niveau, à savoir <body>


178
2017-10-27 00:17



The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

Le balisage de ce document pourrait ressembler à ceci:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Vous pouvez trouver plus d'informations dans cet article sur A List Apart.


113
2017-07-29 23:03



Je suggère de lire le W3 page wiki sur la structuration du HTML5:

<header> Utilisé pour contenir le contenu de l'en-tête d'un site. <footer>   Contient le contenu du pied de page d'un site. <nav> Contient le   menu de navigation, ou d'autres fonctionnalités de navigation pour la page.

<article> Contient un contenu autonome qui ferait
  sens si syndiqué comme un élément RSS, par exemple un élément de nouvelles.

<section> Utilisé pour regrouper différents articles en différents
  fins ou sujets, ou pour définir les différentes sections d'un même   article.

<aside> Définit un bloc de contenu associé à la principale   contenu autour de lui, mais pas au cœur de l'écoulement de celui-ci.

Ils comprennent une image que j'ai nettoyé ici:

html5

En code, cela ressemble à ça:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

Examinons certains des éléments HTML5 plus en détail.

<section>

le <section> l'élément est destiné à contenir différentes zones distinctes de   fonctionnalité ou domaine de sujets, ou casser un article ou une histoire jusqu'à   dans différentes sections. Donc dans ce cas: "sidebar1" contient divers   liens utiles qui persisteront sur chaque page du site, tels que   "abonnez-vous à RSS" et "Achetez de la musique à partir du magasin". "main" contient le   contenu principal de cette page, qui est des articles de blog. Sur d'autres pages du   site, ce contenu va changer. C'est un élément assez générique, mais   a encore plus de sens sémantique que le vieux plaine <div>.

<article>

<article>est liée à <section>, mais est distinctement différent.   Tandis que <section> est pour regrouper des sections distinctes de contenu ou   fonctionnalité, <article> est destiné à contenir des individus   des contenus autonomes, tels que des articles de blog, des vidéos,   images ou articles de presse. Pensez-y de cette façon - si vous avez un certain nombre de   éléments de contenu, dont chacun serait adapté à la lecture de leur   propre, et aurait du sens de syndiquer comme des éléments séparés dans un RSS   nourrir, puis <article> est adapté pour les marquer. Dans notre   Exemple, <section id="main"> contient des entrées de blog. Chaque entrée de blog   serait approprié pour syndiquer comme un élément dans un flux RSS, et serait   faire sens quand lu seul, hors contexte, donc <article>   est parfait pour eux:

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

Simple hein? Sachez cependant que vous pouvez également imbriquer des sections à l'intérieur   articles, où il est logique de le faire. Par exemple, si chacun des   ces articles de blog ont une structure cohérente de sections distinctes, puis   vous pourriez aussi mettre des sections à l'intérieur de vos articles. Ça pourrait ressembler   quelque chose comme ça:

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> et <footer>

comme nous l'avons déjà mentionné ci-dessus, le but de <header> et    <footer> éléments consiste à envelopper le contenu de l'en-tête et du pied de page,   respectivement. Dans notre exemple particulier le <header> élément   contient une image de logo, et le <footer> élément contient un copyright   remarquez, mais vous pourriez ajouter un contenu plus élaboré si vous le souhaitiez. Aussi   notez que vous pouvez avoir plus d'un en-tête et pied de page sur chaque page -   ainsi que l'en-tête et le pied de page de niveau supérieur que nous venons de discuter, vous   pourrait aussi avoir un <header> et <footer> élément imbriqué à l'intérieur de chaque    <article>, auquel cas ils s’appliqueraient simplement à ce   article. Ajout à notre exemple ci-dessus:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

le <nav> l'élément sert à baliser les liens de navigation ou autres   constructions (par exemple un formulaire de recherche) qui vous mènera à différentes pages de   le site actuel ou différentes zones de la page en cours. Autres liens,   tels que les liens sponsorisés, ne comptez pas. Vous pouvez bien sûr inclure   rubriques et autres éléments structurants à l'intérieur du <nav>, mais c'est   Pas obligatoire.

<aside>

vous avez peut-être remarqué que nous avons utilisé un <aside> élément pour baliser le   2ème sidebar: celle contenant les derniers concerts et les coordonnées. Ce   est parfaitement approprié, comme <aside> est pour marquer des morceaux de   informations liées au flux principal, mais qui ne s'y intègrent pas   directement. Et le contenu principal dans ce cas concerne tout le groupe!   Autres bons choix pour un <aside> serait des informations sur le   auteur du billet (s), biographie de groupe ou discographie de groupe   avec des liens pour acheter leurs albums.

Où est ce que ça part <div>?

Donc, avec tous ces grands nouveaux éléments à utiliser sur nos pages, les jours de   l'humble <div> sont numérotés, sûrement? NON. En fait, le <div>   a toujours une utilisation parfaitement valide. Vous devriez l'utiliser quand il n'y a pas de   autre élément plus approprié disponible pour regrouper une zone de contenu,   ce qui sera souvent le cas lorsque vous n'utilisez qu'un élément pour regrouper   contenu ensemble à des fins de style / visuels. Un exemple courant est   utilisant un <div>pour envelopper tout le contenu sur la page, puis en utilisant   CSS pour centrer tout le contenu dans la fenêtre du navigateur, ou appliquer un   image de fond spécifique à l'ensemble du contenu.


59
2017-07-15 18:07



[des explications dans ma "réponse principale"]

ligne 7. section autour de l'ensemble du site? Ou seulement un div?

Ni. Pour le style: utilisez le <body>, c'est déjà là. Pour la section / sémantique: comme détaillé dans mon exemple HTML son effet est contraire à l'utilité. Les wrappers supplémentaires au contenu déjà enveloppé ne sont pas une amélioration, mais du bruit.


ligne 8. Chaque section commence par un en-tête?

Non, c'est le choix de l'auteur de mettre un contenu généralement résumé comme "en-tête". Et si ce contenu en-tête est clairement reconnaissable sans marquage supplémentaire, il peut parfaitement rester sans <header>. C'est aussi le choix de l'auteur.


ligne 23. Est-ce que c'est div droite? ou doit-ce être un section?

le <div> est probablement faux. Cela dépend des intentions: est-ce pour le stylisme que cela pourrait être juste. Si c'est à des fins sémantiques, c'est faux: ça devrait être un <article> au lieu comme indiqué dans mon autre réponse. <article> est également vrai si c'est à la fois pour le coiffage et le sectionnement combinés.

<section> semble mal ici, car il n'y a pas de sections similaires avant ou après celle-ci, comme des chapitres dans un livre. (C'est le but de <section>).


ligne 24. Split colonne gauche / droite avec un div.

Non pourquoi?


ligne 25. Le bon endroit pour article marque?

Oui, a un sens.


ligne 26. Est-il nécessaire de mettre votre h1-tag dans le entête-marque?

Non seul <h*> élément n'a probablement jamais besoin d'aller dans un <header> (mais ça peut le faire si vous le voulez) car il est déjà clair que c'est le titre de ce qui va arriver. - Cela aurait du sens si cela <header> également inclus un slogan (marqué avec <p>), par exemple.


ligne 43. Le contenu n'est pas lié à l'article principal, donc j'ai décidé que c'est un section et pas un de côté.

C'est un malentendu qu'un <aside> doit être "tangentiellement en relation"Au contenu autour. Le point est: utilisez un <aside> si le contenu est seulement "tangentiellement liés "ou pas du tout!

Néanmoins, à part <aside> être un choix décent, <article> pourrait encore être mieux qu'un <section> comme "articles chauds" et "nouveaux articles" ne doivent pas être lus comme deux chapitres d'un livre. Vous pouvez parfaitement choisir l'un d'eux et pas l'autre comme un tri alternatif de quelque chose, pas comme deux parties d'un tout.


ligne 44. H2 sans pour autant entête

Est génial.


ligne 53. section sans pour autant entête

Eh bien, il n'y a pas <header>, mais le <h2>-heading feuilles assez clair quelle partie de cette section est l'en-tête.


ligne 63. Div avec tous les articles d'actualité (non apparentés)

<article> ou <aside> pourrait être mieux.


ligne 64. entête avec h2

Déjà discuté.


ligne 65. Hmm, div ou section? Ou supprimer ce div et utilisez seulement le article-marque

Exactement! Retirer le <div>.


ligne 105. Bas de page :-)

Très raisonnable.


19
2017-11-02 03:58



L'erreur principale: Vous avez "divitis" dans le document entier.
Pourquoi ça?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Au lieu de:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Pour styliser cet en-tête, utilisez la hiérarchie CSS: body> section> header> h1, body> section> header> h2

Plus, ... ligne 63: pourquoi en-tête enveloppe h2 ?? Si vous n'incluez aucun élément dans l'en-tête, utilisez simplement un seul h2.
Gardez à l'esprit que votre structure n'est pas de styliser un document, mais de construire un document qui s'auto-explique.

Appliquez ceci au reste du document; Bonne chance ;)


17
2018-02-08 23:10



Selon l'explication dans ma réponse "principale" le document en question doit être balisé selon un plan.

Dans les deux tableaux suivants, je montre:

  • le HTML original et son contour
  • un contour envisagé possible et le HTML qui le fait

html original (raccourci)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

html original pertinent pour le contour
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































contour résultant
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


Le contour de l'original est
définitivement pas ce qui était prévu.


































































Le tableau suivant montre ma proposition pour une version améliorée. J'utilise le balisage suivant:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

contour prévu possible
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































html modifié
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

contour résultant
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


Le HTML modifié reflète le
contour prévu mieux que
l'original.


































































17
2017-10-29 22:57