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

546

Il y a suffisamment 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 / en-têtes / article sont nouvelles, et tout le monde a des opinions différentes sur le moment / l'endroit où vous devez utiliser ces balises. Alors, que pensez-vous de la disposition et du code suivants?

Disposition du site Web

  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. sectionautour de l'ensemble du site Web? Ou seulement un div?

ligne 8. Chaque sectiondébut avec un header?

ligne 23. Est-ce divvrai? ou doit-ce être un section?

ligne 24. Fractionner la colonne gauche / droite avec a div.

ligne 25. Bon endroit pour le articletag?

ligne 26. Faut-il mettre votre h1-tag dans le header-tag?

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

ligne 44. H2 sans header

ligne 53. sectionsansheader

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

ligne 64. headeravec h2

ligne 65. Hmm, divou section? Ou supprimez-le divet utilisez uniquement le article-tag

ligne 105. Pied de page :-)

html header article Bas van Dorst
la source
456bereastreet.com/archive/201103/…
Christophe Roussy

Réponses:

486

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

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

côté - Utilisé pour le contenu tangentiellement lié. Tout simplement parce qu'un certain contenu apparaît à gauche ou à droite du contenu principal n'est pas une raison suffisante pour utiliser l'élément apart. Demandez-vous si le contenu de la partie latérale peut être supprimé sans réduire la signification du contenu principal. Les Pullquotes sont un exemple de contenu lié de manière 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 du masthead). Il n'y a généralement qu'un seul en-tête ou «tête de mât» dans une page. En HTML5, vous pouvez en avoir autant que vous le souhaitez. 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 de section comme «un regroupement thématique de contenu, généralement avec un en-tête».

nav - Destiné aux principales informations de navigation. 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 contenant: qui l'a écrit, les droits d'auteur, 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 également d'avoir un pied de page dans les sections.

Source : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

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 doit avoir un sens en soi. Avant de remplacer tous vos divs par des éléments d'article, demandez-vous toujours: "Est-il possible de le lire indépendamment du reste du site Web?"

Nathan JB
la source
68
C'est une énigme pour moi comment cette réponse a obtenu autant de votes: elle ne parle pas d' <article>éléments, elle ne contraste pas les éléments mentionnés, elle ne les regroupe pas non plus. La réponse ne donne aucune «meilleure pratique» et ne répond à aucune des questions explicites du PO!
Robert Siemer,
2
@RobertSiemer Pour moi, c'est aussi une énigme comment votre commentaire a obtenu 24 votes positifs et la question seulement 6 votes négatifs ...
Veger
@RobertSiemer cuz ça a l'air super, qu'en pensez-vous? Je ne savais pas que c'était mauvais avant de vérifier votre commentaire et de l'affirmer avec la réponse suivante.
Dét
238

Malheureusement, les réponses données jusqu'à présent (y compris les plus votées) sont soit "juste" de bon sens, tout simplement erronées ou au mieux déroutantes. Aucun des mots clés cruciaux 1 n'apparaît!

J'ai écrit 3 réponses:

  1. Cette explication (commencez ici).
  2. Des réponses concrètes aux questions d'OP.
  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 l' algorithme de contour HTML5 dans le but de créer une table des matières (TOC). Le plan n'est généralement pas visible (de nos jours), mais les auteurs devraient utiliser html de telle sorte que le plan 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 frères
    • sections de type non spécifié avec <h*>2 (toutes ne le font pas, voir ci-dessous)
  • pour monter de niveau 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 la première <h*>s'il y en a une
    • ce <h*>sont les seuls qui ne créent pas eux-mêmes de sections

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

  • le document lui-même avec <body>
  • cellules de tableau avec <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>Et<figure>
  • rien d' autre

Titre

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 difference entre <article>et <section>?

  • les deux peuvent:
    • être imbriqués les uns dans les autres
    • 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 d'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 elle-même est également un bon exemple
    • une entrée de blog <article>et ses commentaires <article>pourraient également être enveloppés d'un<article>
    • c'est quelque chose de "complet", pas une partie d'une série de similaires
  • <section>s dans un <article>sont comme des chapitres d'un livre
  • <article>s dans un <section>sont comme des poèmes dans un volume (dans une série)

Comment <header>, <footer>et <main>dans tout ça?

  • ils n'ont aucune influence sur la coupe
  • <header> et <footer>
    • ils vous permettent de marquer des zones de chaque section
    • même dans une section, vous pouvez les avoir plusieurs fois
    • se différencier de la partie principale de cette section
    • limité uniquement 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>
    • autorisé une seule fois
    • marque la partie principale de la section de niveau supérieur (c'est-à-dire le document, <body>c'est-à-dire)
    • les sous-sections elles-mêmes n'ont pas de majoration pour leur partie principale
    • <main>peut même «se cacher» dans certaines sous-sections du document, alors que le document est <header>et <footer>ne peut pas (ce balisage marquerait alors l'en-tête / pied de page de cette sous-section)
      • mais ce n'est pas autorisé dans les <article>sections 3
    • aide à distinguer «la vraie chose» du contenu non en-tête, non pied de page, non principal du document, si cela a du sens dans votre cas ...

1 à l' esprit vient: contours, algorithme, implicite tronçonnage
2 je utiliser <h*>comme raccourci pour désigner <h1>, <h2>, <h3>, <h4>, <h5>et <h6>
3 ne sont <main>autorisés dans <aside>ou <nav>, mais cela est sans surprise. - En effet: <main>ne peut se cacher que dans les <section>sections descendantes (imbriquées) ou apparaître au niveau supérieur, à savoir<body>

Robert Siemer
la source
33
La réponse est comme un poème lui-même. Ma partie préférée est: sections in an article are like chapters in a book, articles in a section are like poems in a volume- la meilleure explication articlevs la plus intuitive sectionque j'ai vue!
Sergey Lukin
1
C'est une connaissance approfondie sans passe-partout résumée en quelques points. Merci pour le partage! Parfois, SO donc la meilleure réponse n'est ni acceptée ni la mieux notée.
3
Je sais que c'est un cliché, mais, "Cela devrait être la réponse acceptée!". Notes de bas de page et tout! Merci!
Eugene
Eugene et ft ou ont raison. N'oubliez pas que vous pouvez voter contre les réponses incomplètes et incorrectes tout en votant pour celle-ci. Ce n'est pas une offense pour leurs auteurs, c'est le coût de s'assurer que les meilleures réponses sont vues en premier. En plus du commentaire de robert sur la réponse choisie, je ne l'aime pas non plus parce qu'elle a plagié du contenu (incomplet) d'ailleurs sur le Web.
IAmNaN
Cette réponse très détaillée et a clarifié beaucoup de choses, merci!
Alaeddine
112

Les éléments div peuvent être remplacés par les nouveaux éléments: en-tête, nav, section, article, côté et pied de page.

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 .

cilerler
la source
25
Cette structure passe-partout ne vaut pas la place sur cette page. 1) Aucun des éléments HTML mentionnés n'est lié à une position dans un document. 2) Cela implique faussement que <header> et <footer> sont des éléments de niveau document. 3) Cela implique faussement que <section> est conçu comme <article> -enfant uniquement. @DanDascalescu
Robert Siemer
2
Je ne pourrais pas être plus d'accord sur @RobertSiemer. C'est toujours l'une des idées fausses les plus courantes sur les éléments HTML5 et devient un handicap sémantique pour notre langage de balisage bien-aimé.
kano
@RobertSiemer Re: 2), ne peut pas <header>et <footer>être des éléments de niveau document, ainsi que dans des <section|article|nav|aside>sections?
Flimm
1
@Flimm, oui, ils le peuvent. Mon point était: la réponse n'est pas fausse - elle ne répond tout simplement pas beaucoup.
Robert Siemer
63

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

<header>Utilisé pour contenir le contenu d'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 élément de contenu autonome qui aurait du
sens s'il était syndiqué en tant qu'élément RSS, par exemple une nouvelle.

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

<aside> Définit un bloc de contenu qui est lié au contenu principal qui l'entoure, mais qui n'est pas central à son flux.

Ils incluent une image que j'ai nettoyée ici:

html5

En 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' <section>élément est destiné à contenir différents domaines de fonctionnalité ou domaines distincts, 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 en magasin". "main" contient le contenu principal de cette page, qui est des articles de blog. Sur les autres pages du site, ce contenu va changer. C'est un élément assez générique, mais qui a encore beaucoup plus de sens sémantique que l'ancien <div>.

<article>

<article>est lié à <section>, mais est nettement différent. Tandis que <section>pour regrouper des sections distinctes de contenu ou de fonctionnalités, il <article>s'agit de contenir des éléments de contenu autonomes individuels liés, tels que des articles de blog, des vidéos, des images ou des actualités individuels. Pensez-y de cette façon - si vous avez un certain nombre d'éléments de contenu, chacun pouvant être lu séparément, et qu'il serait judicieux de syndiquer en tant qu'éléments séparés dans un flux RSS, il <article>convient alors de les marquer. Dans notre exemple, <section id="main">contient des entrées de blog. Chaque entrée de blog conviendrait à la syndication en tant qu'élément dans un flux RSS, et aurait un sens lorsqu'elle est lue seule, hors contexte, elle <article> est donc parfaite 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 dans des articles, lorsque cela est logique. 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 à 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 des éléments <header>et <footer>est d'encapsuler le contenu de l'en-tête et du pied de page, respectivement. Dans notre exemple particulier, l' <header>élément contient une image de logo et l' <footer>élément 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 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 pouvez également avoir un élément <header>et <footer>imbriqués à l'intérieur de chacun <article>, auquel cas ils s'appliqueraient simplement à cela article particulier. Ajout à notre exemple ci-dessus:

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

<nav>

L' <nav>élément sert à baliser les liens de navigation ou d'autres constructions (par exemple un formulaire de recherche) qui vous mèneront à 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 à l'intérieur du <nav>, mais ce n'est pas obligatoire.

<aside>

vous avez peut-être remarqué que nous avons utilisé un <aside>élément pour baliser la 2ème barre latérale: celui contenant les derniers concerts et coordonnées. Ceci est parfaitement approprié, comme <aside>pour le balisage d'informations qui sont liées au flux principal, mais ne s'y adaptent pas directement. Et le contenu principal dans ce cas concerne le groupe! D'autres bons choix pour un <aside>sont des informations sur l'auteur du ou des articles de blog, une biographie du groupe ou une discographie du groupe avec des liens pour acheter leurs albums.

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

Alors, avec tous ces grands nouveaux éléments à utiliser sur nos pages, les jours des humbles <div>sont comptés, sûrement? NON. En fait, le <div> toujours a une utilisation parfaitement valable. Vous devez l'utiliser lorsqu'il n'y a pas d'autre élément plus approprié disponible pour regrouper une zone de contenu, ce qui est souvent le cas lorsque vous utilisez uniquement un élément pour regrouper du contenu à des fins de style / visuel. Un exemple courant consiste à utiliser a <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.

Justin
la source
1
Pour les sections imbriquées, ne serait-il pas plus judicieux d'utiliser <section class="summary">plutôt que <section id="summary">? Si vous aviez plusieurs articles sur une même page, alors cette dernière méthode entraînerait des identifiants en double sur la même page - un faux pas HTML. Droite?
JP Lew
Oui, j'utiliserais probablement des classes à la place dans ce cas.
Justin
1
Est-ce que toutes les balises que vous avez mentionnées ne devraient pas être enveloppées dans un "principal" qui est ensuite enveloppé dans le "corps"?
Francisco Aguilera
1
Le maintag serait bon à ajouter. Où le mettre serait décidé en fonction du contenu unique de la page. Dans cet exemple, je pense que je le mettrais juste autour du centre section. En savoir plus: w3.org/TR/2012/WD-html-main-element-20121217 "La section de contenu principale d'un document inclut un contenu unique à ce document et exclut le contenu qui est répété sur un ensemble de documents tels que le site liens de navigation, informations sur les droits d'auteur, logos et bannières du site et formulaires de recherche. "
Justin
c'est toujours aussi ambigu que la documentation MDN
oldboy
23

[ explications dans ma «réponse principale» ]

ligne 7. section autour de l'ensemble du site Web? 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 enveloppes supplémentaires pour du contenu déjà emballé 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 où mettre le contenu généralement résumé comme «en-tête». Et si ce contenu d'en-tête est clairement reconnaissable sans marquage supplémentaire, il peut parfaitement rester sans <header>. C'est également le choix de l'auteur.


ligne 23. Est-ce que ce div a raison? ou cela doit-il être une section ?

C'est <div>probablement faux. Cela dépend des intentions: est-ce uniquement pour le style, cela pourrait être juste. Si c'est à des fins sémantiques, c'est faux: ce devrait <article>plutôt être un comme indiqué dans mon autre réponse . <article>est également vrai si c'est pour le style et la coupe combinés.

<section>semble incorrect 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. Fractionner la colonne gauche / droite avec un div .

Non pourquoi?


ligne 25. Bon endroit pour la balise article ?

Oui, c'est logique.


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

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


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

C'est un malentendu qu'un <aside>doit être «tangentiellement lié » au contenu autour. Le point est le suivant: utilisez un <aside>si le contenu n'est que « tangentiellement lié» ou pas du tout!

Néanmoins, en plus d' <aside>être un choix décent, cela <article>pourrait être encore mieux qu'un <section>«élément chaud» et «de nouveaux éléments» ne doivent pas être lus comme deux chapitres d'un livre. Vous pouvez parfaitement opter pour l'un d'entre eux et non pour l'autre comme un tri alternatif de quelque chose, pas comme deux parties d'un tout.


ligne 44. H2 sans en- tête

C'est super.


ligne 53. section sans en- tête

Eh bien, il n'y en a pas <header>, mais le <h2>titre laisse assez clair quelle partie de cette section est 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 cette div et utilisez uniquement l' article -tag

Exactement! Retirez le <div>.


ligne 105. Pied de page :-)

Très raisonnable.

Robert Siemer
la source
La division d'une réponse en 3 incomplètes n'est pas utile.
Christian Strempfer
6
@ChristianStrempfer En fait, cela est utile, car beaucoup de gens ne viennent pas ici pour lire les réponses spécifiques à des questions spécifiques de l'OP (cette réponse), mais pour en savoir plus sur le sujet traité (ma principale réponse). - Je crois qu'avec une énorme réponse tldr, je n'obtiendrais même pas les votes que j'ai sur ma seule réponse principale. - Que suggérez-vous?
Robert Siemer
Je suggère de les fusionner en une seule réponse. Les votes de collection ne sont pas un bon argument pour les diviser. En particulier, la troisième réponse ne peut pas être isolée, car vous référez à votre réponse principale.
Christian Strempfer
@ChristianStrempfer Ce serait beaucoup trop long à mon goût. - Je travaille sur l'amélioration des tables, cependant ...
Robert Siemer
20

Selon l'explication donnée dans ma réponse «principale», le document en question devrait être balisé selon un schéma.

Dans les deux tableaux suivants, je montre:

  • le code HTML d'origine et son contour
  • un plan prévu possible et le HTML faisant cela

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)


The outline of the original is
definitively not what was intended.

































































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)


The modified HTML reflects the
intended outline way better than
the original.
































































Robert Siemer
la source
Merci pour l'excellente réponse détaillée, c'est très instructif. Je veux en savoir plus sur le sujet, j'espère donc que vous pourrez expliquer certains des choix qui me semblent étranges. Je les publierai sous forme de commentaires individuels.
Gorn
1. en- tête autour de côté> div [id = logo] ne me semble pas pertinent. C'est un en-tête, mais pas sémantiquement. La langue div est peut-être une sorte de navigation et le logo est peut-être une sorte d'en-tête pour l'ensemble du site, mais certainement pas pour la page.
Gorn
2. <ARTICLE id = main> ne semble vraiment que présentationnel. Il ne contient aucun élément lié à l'intérieur. (La même chose est vraie pour <ARTICLE id = main-droite> mais c'est beaucoup plus défendable là-bas (comme "news and hot").) Je suggère d'utiliser div ou main au pire.
Gorn
3. <ARTICLE id = news-items> me semble être un cas typique où j'utiliserais à part. Cela n'a rien à voir avec l'article principal, c'est juste un fil d'actualité. Et je suis d'accord qu'il contient des nouvelles sous forme de "petits" articles individuels.
Gorn
1
Pensez à éditer votre proposition, votre réponse "théorique" est très bien écrite mais je pense que la plupart des débutants vont juste regarder l'exemple de code et ils pourraient être vraiment confus, car il n'est pas en ligne avec la partie théorique.
Gorn
17

La principale erreur: 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: corps> section> en-tête> h1, corps> section> en-tête> h2

Plus, ... ligne 63: pourquoi l'en-tête encapsule h2 ?? Si vous n'incluez plus d'é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 auto-expliqué.

Appliquez ceci au reste du document; Bonne chance ;)

Covi
la source
4
@superUntitled <hgroup> ne fait plus partie de HTML5
bradley.ayers
Le rôle = "bannière" devrait-il être sur le h1 lui-même, pas sur l'en-tête entier? De cette façon, il pointe vers un seul morceau de texte qu'un lecteur d'écran annoncerait, pas un glob de HTML.
inscription
11
Utiliser h1 et h2 pour le logo et la langue n'a pas de sens pour moi. Le tout petit bouton de langue à droite devrait être le deuxième contenu / info le plus important de cette page. Et si vous placez votre logo dans un h1, un robot de recherche découvrira que le contenu principal de chaque page est le même (assez ennuyeux dans mon esprit). Voir également la réponse @MeanEYE pour l'utilisation de h1 et h2. En dehors de cela, les ID ne sont pas sémantiques, utilisez RDFa si vous avez besoin de sémantique. À votre façon, les sélecteurs CSS sont tout simplement lents: developers.google.com/speed/docs/best-practices/…
F Lekschas
10

Pourquoi ne pas avoir les identifiants item_1, item_2, etc. sur les balises d'article eux-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'ID n'ont aucune signification sémantique en HTML, donc je pense qu'il 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 actuelle. Les identifiants n'ont pas besoin d'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 seule dans le div "main-left". S'il figurait dans la liste principale des articles, vous souhaiterez peut-être inclure la balise <header> pour des raisons de cohérence.

Matt Browne
la source
2
Je suivais juste l'exemple original et montrais comment accomplir la même chose sans diviseurs de wrapper inutiles. Les identifiants peuvent être là pour un certain nombre de raisons ... d'une part, il peut y avoir des liens d'ancrage pointant vers eux.
Matt Browne du
5
  1. La section ne doit être utilisée que pour envelopper une section dans un document (comme les chapitres et similaires)
  2. Avec en- tête étiquette d'en- : NON. 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.
  3. Quelle div? :RÉ
  4. Oui
  5. Des écoles du W3C:

    La balise définit le contenu externe. Le contenu externe peut être un article d'actualité d'un fournisseur externe, ou un texte d'un journal Web (blog), ou un texte d'un forum, ou tout autre contenu d'une source externe.

  6. Non, la balise d'en-tête a une utilisation différente. H1, H2, etc. représentent les titres des documents H1 étant les plus importants

Je n'ai pas répondu à d'autres parce qu'il est difficile de deviner de quoi vous parliez. S'il y a d'autres questions, faites-le moi savoir.

MeanEYE
la source
1
Merci pour vos réponses! Au point 3; Je suis désolé, les numéros de ligne n'étaient pas corrects. Ce doit être line_23 au lieu du point 3; voir aussi les changements de ligne dans mon post.
Bas van Dorst
Oui, je fais la même chose sur mes sites. En général, les DIV doivent être utilisées pour créer la structure du site. L'introduction d'en-têtes, de pieds de page et de balises similaires en HTML5 ne sert qu'à rendre les choses un peu plus faciles à lire. Ils se comportent de la même manière que DIV.
MeanEYE
3
Vérifiez vos sources. Le site des écoles w3c ne précise pas que articlecela doit nécessairement provenir d'une source externe . w3schools.com/html5/tag_article.asp
chharvey
Hm, je ne pensais même pas que cet article devait être utilisé à partir d'une source externe. C'est quitter une vieille réponse, je peux à peine me rappeler de quoi il s'agissait. :)
MeanEYE
Je suis d'accord avec # 1. Je pense que ces éléments SECTION ont plus de sens en tant qu'ASIDE.
Andy
3

Voici mon exemple dans lequel je travaille

entrez la description de l'image ici

Ivan
la source
2 
<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

Юрий Светлов
la source
1

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

Un article doit pouvoir se suffire à lui-même et avoir du sens ou être complet. Comme il est incomplet ou juste un extrait, il ne peut pas être un article, c'est plus une section.

Lorsque vous cliquez sur «en savoir plus», la page suivante peut

conordarcie
la source
1

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 examinées plus tôt).

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

Ma réponse originale était:

La structure des spécifications w3:

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 nav

4.3.4.4 L'élément article

....

me suggère que ce sectionniveau est plus élevé que article. Comme mentionné dans cette réponse, les section groupes ont un contenu lié par thème. Le contenu d'un article est à mon avis lié de toute façon thématiquement, donc cela, du moins pour moi, suggère également que les sectiongroupes à 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 d'actualités:

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
pandita
la source
1

„Ligne 23. Cette div est-elle juste? ou doit-ce être une section? "

Ni l'un ni l'autre - il existe une mainbalise à cet effet, qui n'est autorisée qu'une fois par page et doit être utilisée comme enveloppe pour le contenu principal (contrairement à une barre latérale ou un en-tête à l'échelle du site).

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

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

feeela
la source
0

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

1.Le mur se trouve sous la balise "section", ce qui signifie qu'il est distinct de la page.

2.Tous les messages relèvent de la balise "article".

3. Ensuite, nous avons un seul message, qui relève de la balise "section".

3.Nous avons l'intitulé "X utilisateur poster ceci" pour cela, nous pouvons utiliser la balise "en-tête".

4.Puis à l'intérieur de l'article, nous avons trois sections, l'une est Images / texte, bouton de partage de commentaires et boîte de commentaires.

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

Flicks Gorger
la source
0

Selon la réponse de Nathan , cela est parfaitement logique (pour les parties rouges et oranges, vous pourriez peut-être utiliser divles s et / ou header et footerrespectivement):

entrez la description de l'image ici

Alejandro Nava
la source