les meilleures pratiques HTML5; section / tête / annulation / éléments de l'article

https://stackoverflow.com/questions/4781077

23-10-2019
|

Question

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 / têtes / article sont nouveaux, et tout le monde a des opinions différentes sur le moment / où vous devez utiliser ces balises. Alors qu'est-ce que vous en pensez de la mise en page et le code suivant?

mise en page du site

  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 du site entier? Ou seulement div?

ligne 8. Chaque section départ avec une header?

ligne 23. Est-ce droit div? ou doit-il être un section?

ligne 24. clivage gauche / colonne de droite avec un div.

ligne 25. Au bon endroit pour la balise article?

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

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

ligne 44. H2 sans header

ligne 53. section sans header

ligne 63. Div avec tous les éléments d'information (non liée)

ligne 64. header avec h2

ligne

65. Hmm, div ou section? Ou supprimer ce div et utiliser uniquement la article balise

Ligne 105. Pied de page: -)

La solution

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

section - Utilisé pour regrouper le contenu thématiquement liés. Sonne comme un élément div, mais ce n'est pas. Le div n'a pas de sens sémantique. Avant de remplacer tous vos div est avec des éléments de section, demandez-vous toujours: « Est-ce tout le contenu lié? »

côté - Utilisé pour le contenu tangentiellement connexes. Tout simplement parce que certains à contenu apparaît à gauche ou à droite du contenu principal ne suffit pas de raison d'utiliser l'élément de côté. Demandez-vous si le contenu dans le côté peut être enlevé sans réduire la signification du contenu principal. Pullquotes sont un exemple de contenu qu'accessoirement.

en-tête - Il y a une différence essentielle entre l'élément d'en-tête et l'usage général accepté d'en-tête (ou Masthead). Il y a généralement un en-tête ou « Masthead » dans une page. En HTML5, vous pouvez avoir autant que vous voulez. La spécification définit comme « un groupe d'aides d'introduction ou de navigation ». Vous pouvez utiliser un en-tête dans une section sur 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 regroupement thématique de contenu, généralement avec un titre. »

nav - Destiné à grande information de navigation. Un groupe de liens regroupés ne suffit pas de raison d'utiliser l'élément de navigation. la navigation du site à l'échelle, d'autre part, appartient à un élément de navigation.

footer - sons comme sa description de la situation, mais son pas. éléments de bas de page contiennent des informations sur son élément contenant:. qui l'a écrite, le droit d'auteur, des liens vers des contenus connexes, etc. Alors que nous avons habituellement un pied de page pour un document entier, HTML5 nous permet d'avoir également un pied de page dans les sections

Source : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as- ils-son /

De plus, voici une description sur article, pas trouvé dans la source ci-dessus:

article - Utilisé pour élément qui spécifie un contenu indépendant, autonome. Un article doit donner un sens lui-même. Avant de remplacer tous vos div est avec des éléments de l'article, demandez-vous toujours: « Est-il possible de le lire indépendamment du reste du site web? »

Autres conseils

Malheureusement, les réponses à ce jour (y compris les plus votées) sont soit « juste » le bon sens, ou simplement mauvaise confusion au mieux. Aucun de mots-clés essentiels ¹ pop-up!

J'ai écrit 3 réponses:

Pour comprendre le rôle des éléments HTML discuté ici, vous devez savoir que certains d'entre eux la section du document. Chaque document html peut être sectionnée selon le algorithme de contours HTML5 dans le but de créer un plan-?or?-table des matières (TOC). Le contour est généralement pas visible (ces jours-ci), mais les auteurs doivent utiliser HTML de telle sorte que les grandes lignes 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 paragraphes (explicites)
- sections <section>
- sections <article>
- sections <nav>
- sections <aside>
création de sections ou sous-sections frères et soeurs
- sections de type non spécifié avec <h*> ^² (pas tous faire, voir ci-dessous)
au niveau de près la section explicite courant (sous)

Les articles peuvent être nommés:

<h*> sections créées se nomment
sections de <section|article|nav|aside> seront nommés par le premier <h*> s'il y a un
- ces <h*> sont les seuls qui ne créent pas eux-mêmes sections

Il y a une chose à sections: les contextes suivants (à savoir les éléments) créent des « limites de contour ». Quelles que soient les sections qu'ils les contiennent est privé à:

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é dans l'autre
- prendre une notion différente dans un contexte différent ou niveau d'imbrication
<section>s sont comme des chapitres de livres
- ils ont généralement frères et soeurs (peut-être dans un autre document?)
- ensemble, ils ont quelque chose en commun, comme les chapitres d'un livre
un auteur, un <article>, au moins sur le niveau le plus bas
- exemple standard: un commentaire de blog unique
- une entrée de blog lui-même est aussi un bon exemple
- une entrée de blog <article> et ses commentaires <article>s pourrait aussi être enveloppé d'un <article>
- il est quelque chose « complète », ne fait pas partie d'une série de similaires
<section>s dans un <article> sont comme des chapitres dans un livre
<article>s dans un <section> sont comme poèmes dans un volume (dans une série)

Comment faire <header>, <footer> et ajustement <main> dans?

ils ont zéro influence sur sectionnant
<header> et <footer>
- ils vous permettent de marquer les zones de chaque section
- même dans une section, vous pouvez les plusieurs fois
- pour 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 dans la partie supérieure ou supérieure de la section
- <footer>
  - peut marquer les crédits / auteur de cette section
  - peut venir au sommet 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 (par exemple Le document, qui est <body>)
- sous-sections elles-mêmes ont sans majoration pour leur part principale
- <main> peut même « cacher » dans certains paragraphes du document, alors que le <header> du document et <footer> ne peut pas (que le balisage serait-tête marquer / pied de page de ce paragraphe alors)
  - mais il est interdit dans les sections <article> ³
- aide à distinguer « la vraie chose » de non-tête de document non-pied de page, le contenu non principal, si cela est logique dans votre cas ...

^{¹ à l'esprit est: contours, algorithme, implicite tronçonnage} ^{² J'utilise <h*> comme raccourci pour <h1>, <h2>, <h3>, <h4>, <h5> et <h6>} ^{³ est ni <main> autorisé dans <aside> ou <nav>, mais qui est sans surprise. - En effet: <main> peut seulement se cacher dans (imbriqués) descendant sections de <section> ou apparaissent au plus haut niveau, à savoir <body>}

Les éléments div peuvent être remplacés par les nouveaux éléments: en-tête, navigation, section, article, mis à part, et le pied de page .

Le balisage de ce document pourrait ressembler à ce qui suit:

<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 .

Je vous suggère de lire la W3 HTML5 relatives à la structure:

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

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

<section> Utilisé pour les deux groupes différents articles dans différents
buts ou sujets, ou de définir les différentes sections d'un seul article.

<aside> définit un bloc de contenu qui est lié au principal contenu autour d'elle, mais pas au centre de l'écoulement de celui-ci.

Ils comprennent une 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>
Nous allons explorer quelques-uns des éléments HTML5 plus en détail.

<section>

L'élément <section> est destiné à contenir différentes zones distinctes de fonctionnalité ou zone sujets, ou de rompre un article ou une histoire en en différentes sections. Donc dans ce cas: « sidebar1 » contient divers liens utiles qui persisteront sur chaque page du site, telles que « Abonnez-vous à RSS » et « acheter de la musique du magasin ». « Principale » contient la le contenu principal de cette page, qui est des messages de blog. Sur d'autres pages du site, ce contenu va changer. Il est un élément assez générique, mais a encore un sens beaucoup plus sémantique que l'ancien <div> plaine.

<article>

<article> est lié à <section>, mais est nettement différent. Alors que <section> est pour regrouper des sections distinctes de contenu ou fonctionnalité, <article> est destiné à contenir individuel connexe morceaux de contenu autonomes, tels que les messages de blog individuels, vidéos, des images ou des articles de presse. Pensez-y de cette façon - si vous avez un certain nombre de éléments de contenu, ce qui serait adapté à la lecture de chacun sur leur propre, et il serait logique de syndicat comme des éléments distincts dans un flux RSS alimentation, puis <article> est adapté pour les baliser. Dans notre par exemple, <section id="main"> contient des entrées de blog. Chaque entrée de blog serait approprié pour syndicating comme un élément dans un flux RSS, et serait donner un sens à la lecture elle-même, 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 aussi les sections de imbriquer des articles, où il est logique de le faire. Par exemple, si chacun ces messages de blog a une structure cohérente des sections distinctes, puis vous pouvez mettre des sections à l'intérieur de vos articles ainsi. Il pourrait regarder quelque chose comme ceci:
<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 la <header> et éléments <footer> consiste à envelopper le contenu d'en-tête et pied de page, respectivement. Dans notre exemple particulier, l'élément de <header> contient une image de logo, et l'élément <footer> contient un droit d'auteur avis, mais vous pouvez ajouter du contenu plus complexe si vous désirez. 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 de niveau supérieur et le pied de page nous venons de parler, vous pourrait également avoir un élément <header> et <footer> imbriquées les unes dans <article>, auquel cas ils seraient simplement appliquer à ce particulier article. Un dding à 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 est <nav> pour marquer les liens de navigation ou d'autres constructions (par exemple un formulaire de recherche) qui vous mènera à différentes pages de le site actuel, ou de différentes zones de la page en cours. D'autres liens, tels que les liens sponsorisés, ne comptent pas. Vous pouvez inclure des cours rubriques et d'autres éléments structurants à l'intérieur du <nav>, mais il pas obligatoire.

<aside>

vous avez sans doute remarqué que nous avons utilisé un élément <aside> pour baliser la 2ème barre latérale: celui qui contient derniers concerts et coordonnées. Ce est tout à fait approprié, comme <aside> est pour le marquage des morceaux de informations qui sont liées au flux principal, mais qui ne correspondent pas à elle directement. Et le contenu principal dans ce cas est tout au sujet de la bande! D'autres bons choix pour un <aside> seraient des informations sur la auteur du blog (s), une biographie de bande, ou une discographie de bande avec des liens pour acheter leurs albums.

Où est-ce que le congé <div>?

Alors, avec tous ces grands nouveaux éléments à utiliser sur nos pages, les jours de l'humble <div> sont numérotées, sûrement? NON. En fait, le <div> a encore une utilisation parfaitement valable. Vous devriez l'utiliser quand il n'y a pas autre élément plus approprié disponible pour grouper une zone de contenu, qui sera souvent lorsque vous utilisez uniquement un élément de groupe ainsi que le contenu à des fins de style / visuels. Un exemple courant est en utilisant un <div> pour envelopper tout le contenu de la page, puis en utilisant CSS pour centrer tout le contenu dans la fenêtre du navigateur, ou appliquer une l'image d'arrière-plan spécifique à tout le contenu.

[explications dans ma « réponse principale » ]

ligne 7. section dans tout le site? Ou seulement div

Ni. Pour le coiffage: utiliser le <body>, il est déjà là. Pour sectionner / sémantique: comme détaillé dans mon exemple HTML son effet est contraire à l'utilité. emballages supplémentaires au contenu déjà emballé est pas d'amélioration, mais le bruit.

ligne 8. Chaque début de section avec un en-tête?

Non, c'est le choix de l'auteur où mettre le contenu généralement résumés comme « en-tête ». Et si cet en-tête contenu est clairement reconnaissable sans marquage supplémentaire, il peut parfaitement rester sans <header>. Ceci est également le choix de l'auteur.

ligne 23. Est-ce div à droite? ou doit-il être section

Le <div> est probablement faux. Cela dépend des intentions: est-il pour le style que pourrait avoir raison. Si elle est à des fins sémantiques il est faux: il devrait être un lieu <article> comme indiqué dans mon autre réponse . <article> est également juste si elle est à la fois le style et la coupe combinée.

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

ligne 24. clivage gauche / colonne de droite avec div .

Non

. Pourquoi?

ligne 25. Au bon endroit pour le article tag?

Oui, est logique.

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

Non

. Un élément <h*> seul a besoin probablement jamais aller dans un <header> (mais il peut si vous le souhaitez) car il est déjà clair que c'est la tête de ce qui est sur le point de venir. -. Il serait logique que si <header> englobe également un slogan (marqué par <p>), par exemple

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

Il est un malentendu qu'un <aside> doit être « tangentiellement liés » au contenu autour. Le point est: utiliser un <aside> si le contenu est uniquement « tangentiellement liées » ou pas du tout

Cependant, en dehors de <aside> être un bon choix, <article> peut-être encore mieux qu'un <section> comme « plats chauds » et « nouveaux éléments » ne doivent pas être lu comme deux chapitres d'un livre. Vous pouvez parfaitement aller pour un d'eux et non l'autre comme un tri alternatif de quelque chose, pas comme deux parties d'un tout.

ligne 44. H2 sans en-tête

est grand.

ligne 53. section sans en-tête

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

ligne 63. Div avec tous les éléments d'information (non liée)

<article> ou <aside> peut-être mieux.

ligne 64. en-tête avec h2

Discuté déjà.

ligne 65. Hmm, div ou section ? Ou supprimer ce div et utiliser uniquement les article -tag

Exactement! Retirez le <div>.

ligne 105. Pied de page : -)

Très raisonnable.

Selon l'explication dans ma réponse « principale » le document en question doit être marqué selon les grandes lignes.

Dans les deux tableaux ci-dessous je montre:

HTML original et son contour
un aperçu possible prévu et le code HTML faire que

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 d'origine pertinente pour les grandes lignes _{<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>} < br> contours 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) Les grandes lignes de l'original est définitivement pas ce qui était prévu. < br>

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

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

possibles contours destiné 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 < br> modifié 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> ``} contours 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 code HTML modifié reflète destiné manière contours mieux que l'original. < br>

L'erreur principale:. Vous avez "Divitis" dans tout le document
Pourquoi

<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

En savoir plus ... ligne 63: pourquoi ?? tête enveloppements h2 Si vous n'incluez pas plus à l'intérieur de l'élément en-tête, il suffit d'utiliser un seul h2.
Gardez à l'esprit, votre structure est de ne pas document de styliser, mais construire un document auto-expliqué.

Appliquer ce au reste du document; Bonne chance;)

Pourquoi ne pas avoir le item_1, item_2, etc. ID sur les balises article eux-mêmes? Comme ceci:

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

Il semble inutile d'ajouter l'emballage divs. Les valeurs d'identité ont aucune signification sémantique dans le HTML, donc je pense qu'il serait tout à fait valable de le faire - vous n'êtes pas en train de dire que le premier article est toujours item_1, juste item_1 dans le contexte de la page en cours . ID ne sont pas tenus d'avoir un sens qui est indépendant du contexte.

En outre, à votre question sur la ligne 26, je ne pense pas que la balise

est nécessaire, et je pense que vous pouvez l'omettre, car il est lui-même dans la div « main gauche ». Si elle était dans la liste principale des articles que vous pouvez inclure la balise

juste pour un souci de cohérence.

Section doit être utilisé que pour envelopper une section dans un document (comme les chapitres et similaires)
Avec en-tête tag: NO. étiquette d'en-tête représente une enveloppe pour en-tête de page et ne doit pas être confondu avec H1, H2, etc.
Quelle div? : D
Oui
De W3C écoles:

La balise définit le contenu externe. Le contenu externe pourrait être une nouvelles-article d'un fournisseur externe, ou un texte à partir d'un journal web (blog), ou un texte à partir d'un forum, ou tout autre contenu à partir d'une source externe.
Non, balise d'en-tête a une utilisation différente. H1, H2, etc. représentent les titres des documents H1 étant le plus important

Je ne répondais pas d'autres les parce qu'il est un peu difficile de deviner ce que vous faisiez allusion. S'il y a d'autres questions, s'il vous plaît laissez-moi savoir.

Voici mon exemple dans lequel le travail I

entrer image description ici

<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 # le nav-élément

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

Un article doit être en mesure de se tenir debout sur ses propres et encore un sens ou complète. Comme son incomplète ou juste un extrait, il ne peut pas être un article, il est plus une section.

Lorsque vous cliquez sur « lire la suite » la page suivante peut

EDIT: Malheureusement, je dois me corriger.

cf. ci-dessous https://stackoverflow.com/a/17935666/2488942 pour un lien vers les spécifications w3 qui inclure un exemple (contrairement à ceux que je regardais au plus tôt).

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

Ma réponse initiale était:

La façon dont les spécifications sont structurées w3:

4.3.4 Sections

4.3.4.1 L'élément de corps

4.3.4.2 L'élément de coupe

4.3.4.3 L'élément de navigation

4.3.4.4 L'élément de l'article

....

me porte à croire que section est plus élevé que le niveau article. Comme mentionné dans cette réponse de groupes de section contenu sur le même thème. Contenu dans un article est à mon avis thématiquement lié de toute façon, donc cela, du moins pour moi, puis suggère également que les groupes section à un niveau supérieur par rapport à article.

Je pense qu'il est destiné à ê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 de nouvelles:

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

« ligne 23. Est-ce droit div? ou doit-il être une section? «

Ni -. Il y a une étiquette de main à cet effet, qui est seulement autorisé une fois par page et doit être utilisé comme emballage pour le contenu principal (contrairement à une barre latérale ou un en-tête de l'ensemble du site)

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

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

Je tiens à préciser cette question plus précisément, corrigez-moi si je me trompe Prenons un exemple de mur Facebook

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

messages 2.All sont sous étiquette "article".

3.Then nous avons seul poste, qui relève de la balise "section".

3.We ont rubrique « X utilisateur après ce » pour cela, nous pouvons utiliser la balise « rubrique ».

4.Ensuite poster à l'intérieur, nous avons trois sections est un / Images texte, comme-actions commentaire bouton et boîte de commentaire.

5.Pour boîte de commentaires, nous pouvons utiliser la balise de l'article.

Selon réponse de Nathan, ce qui rend son sens (pour les pièces de rouge et orange, vous pourriez peut-être utiliser div de et / ou header et footer respectivement):

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow