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

Question

Il y a suffisamment d'informations sur HTML5 sur le Web (et également sur stackoverflow), mais maintenant, je suis curieux de connaître les "meilleures pratiques". Les balises telles que section/headers/article sont nouvelles et tout le monde a des opinions différentes sur le moment ou l’utilisation de ces balises. Alors, que pensez-vous de la structure 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 sur tout le site? Ou seulement un div?

ligne 8. Chaque section commence par un header?

ligne 23. Est-ce div correct? ou doit-il s'agir d'une section?

ligne 24. Diviser la colonne gauche/droite avec un div.

ligne 25. Bon endroit pour la balise article?

ligne 26. Est-il nécessaire de mettre votre balise h1- dans la balise header-?

ligne 43. Le contenu n'est pas lié à l'article principal, j'ai donc décidé qu'il s'agissait d'un section et non d'un aside.

ligne 44. H2 sans header

ligne 53. section sans header

ligne 63. Div avec toutes les nouvelles (non liées)

ligne 64. header avec h2

ligne 65. Hmm, div ou section? Ou supprimez cette div et utilisez uniquement la balise article-

ligne 105. Pied de page :-)

Nathan J.B. · Accepted Answer

En fait, vous avez tout à fait raison en ce qui concerne l'en-tête/le pied de page. Voici quelques informations de base sur la manière dont chacune des principales balises HTML5 peut/devrait être utilisée (je suggère de lire la source complète liée en bas):

section - Utilisé pour regrouper des contenus liés par thème. 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 divs par des éléments de section, demandez-vous toujours: "Tout le contenu est-il lié?"

apart - Utilisé pour les contenus liés de manière tangentielle. Le simple fait qu’un contenu apparaisse à 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 de ce côté peut être supprimé sans réduire le sens du contenu principal. Les Pullquotes sont un exemple de contenu en relation tangentielle.

en-tête - Il existe une différence cruciale entre l'élément d'en-tête et l'utilisation généralement acceptée de l'en-tête (ou tête de mât). Il n’ya généralement qu’un seul en-tête ou "générique" dans une page. En HTML5, vous pouvez en avoir autant que vous voulez. La spécification la définit comme "un groupe d’aides d’introduction ou de 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 de section comme "un groupe 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.

footer - 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 l'élément qui le contient: auteur, droits d'auteur, liens vers des contenus associés, etc. Alors que nous avons généralement un pied de page pour tout un document, HTML5 nous permet également de placer des pieds de page dans des sections.

Source : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer- éléments-pas-aussi-évidents-que-ils-sonnent /

De plus, 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 devrait avoir un sens par lui-même. Avant de remplacer tous vos éléments div par des éléments, demandez-vous toujours: "Est-il possible de le lire indépendamment du reste du site?"

Robert Siemer · Answer

Malheureusement, les réponses données jusqu'à présent (y compris les plus votées) sont soit "juste" de bon sens, tout à fait faux ou au mieux déroutantes. Aucun de mots clés cruciaux¹ pop up!

J'ai écrit 3 réponses:

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 plan — ⁠ ou ⁠— table des matières (TOC). Le contour n'est généralement pas visible (ces jours-ci), mais les auteurs doivent utiliser le langage HTML de manière à ce que le contour résultant reflète leurs intentions.

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

création de sous-sections (explicites)
- _<section>_ sections
- _<article>_ sections
- _<nav>_ sections
- _<aside>_ sections
création de sections ou de sous-sections sœurs
- sections de type non spécifié avec _<h*>_^² (tous ne le font pas, voir ci-dessous)
mettre de niveau la section (sous) explicite actuelle

Les sections peuvent être nommées:

_<h*>_ sections créées se nomment elles-mêmes
_<section|article|nav|aside>_ sections seront nommées par le premier _<h*>_ s'il en existe un
- ces _<h*>_ sont les seuls à ne pas créer de sections elles-mêmes

Il y a encore une chose dans les sections: les contextes suivants (c'est-à-dire les éléments) créent des "contours". Les sections qu’ils contiennent sont privées pour eux:

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

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 niché 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 livre
- ils ont généralement des frères et soeurs (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 peuvent également être entourés d'un _<article>_
- c’est quelque chose de "complet", pas une partie d’une série de
_<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 _<header>_, _<footer>_ et _<main>_ s’intègre-t-il?

ils ont influence zéro sur le sectionnement
_<header>_ et _<footer>_
- ils vous permettent de marquer des zones de chaque et chaque section
- même dans une section, vous pouvez les avoir plusieurs fois
- 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 permis une fois
- marque la partie principale de la section de niveau supérieur (c'est-à-dire le document, _<body>_)
- les sous-sections elles-mêmes n'ont pas de majoration pour la partie principale
- _<main>_ peut même "masquer" dans certaines sous-sections du document, alors que les éléments _<header>_ et _<footer>_ ne peuvent pas (le balisage marquerait alors l'en-tête/le pied de page de cette sous-section)
  - mais cela n'est pas autorisé dans les sections _<article>_³
- permet de distinguer "la réalité" du contenu non en-tête, non-pied-de-page ou non principal du document, si cela a du sens dans votre cas ...

^{¹ à l'esprit vient: contour, algorithme, sectionnement implicite}
^{² J'utilise _<h*>_ comme raccourci pour _<h1>_, _<h2>_, _<h3>_, _<h4>_, _<h5>_ et _<h6>_}
^{³ _<main>_ n'est pas autorisé non plus dans _<aside>_ ou _<nav>_, mais cela n'a rien de surprenant. - En vigueur: _<main>_ ne peut se cacher que dans (imbriqué) des sections décroissantes _<section>_ ou apparaît au niveau supérieur, à savoir _<body>_}

cilerler · Answer

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 trouverez plus d'informations dans cet article sur A List Apart .

Justin · Answer

Je suggérerais de lire le page W3 du wiki sur la structuration de 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é en tant qu'élément RSS, par exemple une actualité.

<section> Utilisé pour grouper différents articles en différents
objectifs, ou de définir les différentes sections d’un même article.

<aside> Définit un bloc de contenu lié au contenu principal qui l'entoure, mais non au cœur de son flux.

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

html5

Dans le code, cela ressemble à ceci:
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body> 
Explorons certains des éléments HTML5 plus en détail.

<section>

L'élément <section> sert à contenir différentes zones de fonctionnalités ou de sujets, ou à diviser un article ou une histoire en différentes sections. Donc, dans ce cas: "sidebar1" contient divers liens utiles qui persisteront sur chaque page du site, tels que "s'abonner à RSS" et "Acheter de la musique au 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 qui a toujours une signification beaucoup plus sémantique que le vieux <div>.

<article>

<article> est lié à <section>, mais est nettement différent. Alors que <section> sert à regrouper des sections distinctes de contenu ou de fonctionnalités, <article> contient des éléments de contenu individuels, tels que des articles de blog, des vidéos, des images ou des nouvelles. Pensez-y de cette façon: si vous avez plusieurs éléments de contenu, chacun d’entre eux pouvant être lus par eux-mêmes, et qu’il serait judicieux de syndiquer en tant qu’éléments distincts dans un flux RSS, alors <article> convient pour les marquer. . Dans notre exemple, <section id="main"> contient des entrées de blog. Chaque entrée de blog conviendrait pour la syndication en tant qu'élément dans un flux RSS et aurait un sens si elle est lue seule, hors contexte, donc <article> est parfait pour eux:
<section id="main"> <article></article> <article></article> <article></article> </section> 
Simple hein? Sachez cependant que vous pouvez également imbriquer des sections à l'intérieur d'articles où il est judicieux de le faire. Par exemple, si chacun de ces articles de blog a une structure cohérente de sections distinctes, vous pouvez également insérer des sections dans vos articles. Cela 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, les éléments <header> et <footer> ont pour objectif d'encapsuler le contenu de l'en-tête et du pied de page, respectivement. Dans notre exemple particulier, l'élément <header> contient une image de logo et l'élément <footer> contient un avis de droit d'auteur, mais vous pouvez ajouter un contenu plus élaboré si vous le souhaitez. Notez également que vous pouvez avoir plusieurs en-têtes et pieds de page sur chaque page - ainsi que les en-têtes et pieds de page de niveau supérieur dont nous venons de parler, vous pouvez également avoir un élément <header> et <footer> imbriqué dans chaque <article>, auquel cas ils ne feraient que s'applique à cet article particulier. Ajoutant à notre exemple ci-dessus:
<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article> 
<nav>

L'élément <nav> sert à baliser les liens de navigation ou d'autres constructions (par exemple, un formulaire de recherche) qui vous mènera à différentes pages du site actuel ou à différentes zones de la page actuelle. Les autres liens, tels que les liens sponsorisés, ne comptent pas. Vous pouvez bien sûr inclure des en-têtes et d'autres éléments structurants dans le <nav>, mais ce n'est pas obligatoire.

<aside>

vous avez peut-être remarqué que nous avons utilisé un élément <aside> pour baliser le deuxième encadré: celui qui contient les derniers concerts et les coordonnées de contact. Ceci est parfaitement approprié, car <aside> sert à baliser des informations liées au flux principal, mais ne s’y intégrant pas directement. Et le contenu principal de cette affaire concerne le groupe! Un autre bon choix pour un <aside> serait des informations sur l'auteur du ou des messages de blog, une biographie du groupe ou une discographie du groupe avec des liens pour acheter ses albums.

Où cela laisse-t-il <div>?

Donc, avec tous ces nouveaux éléments géniaux à utiliser sur nos pages, les jours de l'humble <div> sont numérotés, à coup sûr? NON. En fait, le <div> a toujours une utilisation parfaitement valide. Vous devez l'utiliser lorsque aucun autre élément plus approprié n'est disponible pour regrouper une zone de contenu, ce qui se produit souvent lorsque vous utilisez uniquement un élément pour regrouper le contenu à des fins de style/visuels. Un exemple courant consiste à utiliser un <div> pour envelopper tout le contenu de la page, puis à utiliser CSS pour centrer tout le contenu dans la fenêtre du navigateur ou appliquer une image d'arrière-plan spécifique à l'ensemble du contenu.

Robert Siemer · Answer

[ explications dans ma “réponse principale” ]

ligne 7. section sur tout le site? Ou seulement un div?

Ni. Pour le style: utilisez le <body>, il est déjà là. Pour la section/sémantique: comme détaillé dans mon exemple HTML son effet est contraire à l'utilité. Des wrappers supplémentaires au contenu déjà enveloppé ne constituent 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 placer le contenu généralement appelé "en-tête". Et si cet 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. S'agit-il de div correct? ou doit-il s'agir d'une section?

Le <div> est probablement faux. Cela dépend des intentions: est-ce que ce serait juste pour le style? Si c’est à des fins sémantiques, c’est faux: ce devrait être un <article> à la place de comme indiqué dans mon autre réponse . <article> est également correct s'il est à la fois stylisé et sectionné.

<section> n'a pas l'air correct ici, car il n'y a pas de sections similaires avant ou après celle-ci, comme les chapitres d'un livre. (C'est le but de <section>).

ligne 24. Diviser la colonne gauche/droite avec un div.

Non pourquoi?

ligne 25. Bon endroit pour la balise article?

Oui, cela a du sens.

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

Non. Un seul élément <h*> probablement n’aura probablement jamais besoin d’être inséré dans un <header> (mais vous pouvez le faire si vous le souhaitez) car il est déjà clair qu’il s’agit de l’en-tête de ce qui est sur le point de se produire. - Cela aurait du sens si <header> englobait également un slogan (marqué par <p>), par exemple.

ligne 43. Le contenu n'est pas lié à l'article principal. J'ai donc décidé qu'il s'agissait d'un section et non d'un apartement.

C'est un malentendu qu'un <aside> doive être "tangentiellement lié" au contenu qui l'entoure. Le problème est le suivant: utilisez un <aside> si le contenu est uniquement “tangentiellement lié” ou pas du tout!

Néanmoins, mis à part que <aside> soit un choix décent, <article> pourrait toujours être meilleur qu'un <section>, car les "éléments phares" et les "éléments nouveaux" ne doivent pas être lus comme deux chapitres d'un document. livre. Vous pouvez parfaitement choisir l’une d’elles et non l’autre comme un tri alternatif, et non comme deux parties d’un tout.

ligne 44. H2 sans en-tête

C'est génial.

ligne 53. section sans en-tête

Eh bien, il n'y a pas de <header>, mais l'en-tête <h2>- indique clairement quelle partie de cette section correspond à l'en-tête.

ligne 63. Div avec toutes les nouvelles (non liées)

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

ligne 64. en-tête avec h2

Déjà discuté.

ligne 65. Hmm, div ou section? Ou supprimez ceci div et utilisez uniquement le - article - tag

Exactement! Retirez le <div>.

ligne 105. Pied de page: -)

Très raisonnable.

Robert Siemer · Answer

Selon l'explication dans ma réponse "principale" , le document en question doit être annoté conformément à un schéma.

Je montre dans les deux tableaux suivants:

le HTML original et son contour
une esquisse possible et le HTML qui le fait

original html (shortened) _{<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>} original html relevant for outline _{<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>} resulting outline 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>

possible intended outline 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 modified html _{<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>``} resulting outline 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 code HTML modifié reflète le intention esquissée meilleure que l'original.

Covi · Answer

L'erreur principale: vous avez "divitis" dans tout le document.
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> en-tête> h1, body> section> en-tête> h2

Plus, ... ligne 63: pourquoi l'entête enveloppe h2 ?? Si vous n'incluez plus d'élément dans l'en-tête, utilisez un seul h2.
N'oubliez pas que votre structure ne consiste pas à styliser un document, mais à construire un document auto-expliqué.

Appliquez ceci au reste du document; Bonne chance ;)

Matt Browne · Answer

Pourquoi ne pas avoir les ID item_1, item_2, etc. sur les balises d'article elles-mêmes? Comme ça:

<article id="item_1"> ... </article> <article id="item_2"> ... </article> ...

Il semble inutile d'ajouter les divs wrapper. Les valeurs d'identifiant n'ont pas de signification sémantique en HTML, donc je pense que ce serait parfaitement valable de le faire - vous ne dites pas que le premier article est toujours item_1, juste item_1 dans le contexte de la page en cours . Les identificateurs ne doivent pas nécessairement avoir une signification indépendante du contexte.

De plus, en ce qui concerne votre question à la ligne 26, je ne pense pas que la balise <header> soit requise ici, et je pense que vous pouvez l'omettre, car elle est isolée dans la div "main-left". S'il figurait dans la liste principale des articles, vous souhaiterez peut-être inclure la balise <header> uniquement pour des raisons de cohérence.

MeanEYE · Answer

Section ne doit être utilisé que pour envelopper une section dans un document (comme des chapitres et similaires)
Avec en-tête tag: NO. La balise d'en-tête représente un wrapper pour l'en-tête de page et ne doit pas être confondue avec H1, H2, etc.
Quel div? :RÉ
Oui
Des écoles du W3C:

La balise définit le contenu externe. Le contenu externe peut être un article de presse provenant d'un fournisseur externe, un texte provenant d'un journal Web (blog), un texte provenant d'un forum ou tout autre contenu provenant d'une source externe.
Non, la balise d'en-tête a un usage différent. H1, H2, etc. représentent les titres de documents H1 étant le plus important

Je n'ai pas répondu aux autres parce qu'il est difficile de deviner de quoi vous parliez. S'il y a plus de questions, s'il vous plaît faites le moi savoir.

Ivan · Answer

Voici mon exemple dans lequel je travaille

enter image description here

Юрий Светлов · Answer

<body itemscope itemtype="http://schema.org/Blog"> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <main> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">My Day at the Beach</h1> </header> <div itemprop="articleBody"> <p>Today I went to the beach and had a lot of fun.</p> ...more content... </div> <footer> <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p> </footer> </article> ...more blog posts... </main> <footer> <p>Copyright © <span itemprop="copyrightYear">2010</span> <span itemprop="copyrightHolder">The Example Company</span> </p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

pandita · Answer

EDIT: Malheureusement, je dois me corriger.

Reportez-vous ci-dessous https://stackoverflow.com/a/17935666/2488942 pour un lien vers les spécifications w3 qui incluent un exemple (contrairement à celles que j'ai précédemment examinées).

Mais alors .... Ici est un bel article à ce sujet grâce à @Fez.

Ma réponse initiale était:

La manière dont les spécifications du w3 sont structurées:

4.3.4 Sections

4.3.4.1 L'élément body

4.3.4.2 L'élément section

4.3.4.3 L'élément de navigation

4.3.4.4 L'élément article

....

me suggère que section est supérieur au article. Comme mentionné dans cette réponse section regroupe des contenus liés par thème. À mon avis, le contenu d'un article est de toute façon lié thématiquement, d'où, du moins pour moi, alors suggère également que section groupes à un niveau supérieur par rapport à article.

Je pense que c'est censé être utilisé comme ceci:

section: Chapter 1 nav: Ch. 1.1 Ch. 1.2 article: Ch. 1.1 some insightful text article: Ch. 1.2 related to 1.1 but different topic

ou pour un site d'actualité:

section: News article: This happened today article: this happened in England section: Sports article: England - Ukraine 0:0 article: Italy books tickets to Brazil 2014

feeela · Answer

„Ligne 23. Est-ce que div est juste? ou doit-il s'agir d'une section?

Ni l'un ni l'autre - il existe une balise main à cette fin, qui n'est autorisée qu'une fois par page et doit être utilisée comme wrapper pour le contenu principal (par opposition à une barre latérale ou à un en-tête de site entier).

<main> <!-- The main content --> </main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

conordarcy · Answer

Je ne pense pas que vous devriez utiliser la balise sur le résumé des nouvelles (lignes 67, 80, 93). Vous pouvez utiliser section ou simplement avoir la div qui l'entoure.

Un article doit pouvoir être autonome et avoir toujours un sens ou être complet. Comme son extrait est incomplet ou qu'il ne s'agit que d'un extrait, il ne peut s'agir d'un article, mais d'une section.

Lorsque vous cliquez sur "Lire la suite", la page suivante peut

Flicks Gorger · Answer

Je veux clarifier cette question plus précisément, corrigez-moi si je me trompe Prenons un exemple du mur Facebook

1.Wall vient sous "section" tag, ce qui indique qu'il est séparé de la page.

2.Tous les messages entrent dans la balise "article".

3.Puis nous avons un seul post, qui vient sous la balise "section".

3.Nous avons la rubrique "X utilisateur poste ceci" pour cela, nous pouvons utiliser la balise "rubrique".

4.Ensuite, à l'intérieur du post, nous avons trois sections: la section Images/texte, bouton J'aime-partager-commentaire et zone de commentaire.

5.Pour la boîte de commentaire, nous pouvons utiliser la balise article.

alejnavab · Answer

Selon réponse de Nathan , cela est parfaitement logique (pour les parties rouge et orange, vous pourriez peut-être utiliser les fonctions de div et/ou header et footer respectivement):