web-dev-qa-db-fra.com

HTML sémantique d'une liste d'articles

Dans un index typique d'articles (comme un blog sans extrait) comme cette image:

example

ces éléments devraient être une liste (<ul><li>) ou tout simplement divs?

Et aussi, ils devraient être figure/figcaption? Parce que cela aurait du sens, mais aussi… l’image fait partie d’un artcile, pas le contenu principal, alors peut-être que titre/description n’est pas la légende de l’image, mais celle de l’article.

qu'est-ce que tu penses?

EDIT: un exemple concret - https://news.google.com/?hl=fr

htmlhtml5semantic-markup
26
felixjet

J'utiliserais une article pour chaque extrait (c'est-à-dire un teaser de nouvelles).

Chaque article contient un élément h1 pour l'en-tête, un élément img pour l'image et des éléments p pour le texte.

Comme vous souhaitez probablement créer un lien vers une version complète, vous pouvez inclure tous les éléments dans un élément a (autorisé dans HTML5) ou dans l'en-tête, etc.

Cela pourrait donc ressembler à:

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

Utilisez seulement figure si cette image elle-même doit avoir une légende séparée. La description de la nouvelle (ici contenue dans p) n’est généralement pas la légende de cette image.

Vous pouvez changer l'ordre des enfants article. Grâce au fonctionnement des éléments de sectionnement, l’en-tête ne doit pas nécessairement être le premier élément.

Vous pouvez utiliser une ul, mais ce n’est pas nécessaire. ol, cependant, ne devrait être utilisé que si l’ordre est vraiment utile pour comprendre le contenu (c’est-à-dire qu’un ordre différent changerait la signification du document). Exemple typique: si les éléments sont classés par pertinence (par exemple, la bande-annonce la plus pertinente en haut), vous devez utiliser ol.

En ce qui concerne votre question } _ si le teaser doit être une article:

Ne confondez pas article (élément HTML5) avec le terme "article" (langue anglaise). article a une définition distincte qui n’a pas nécessairement un rapport avec la compréhension du terme "article". 

Le teaser doit également être un article - le teaser article et le fulltext article sont different articles, bien qu'ils se rapportent à la même entité.

27
unor

Si chaque élément représente un article, il doit alors être représenté à l'aide de <article> éléments .

Si vous estimez qu'il s'agit d'une liste d'articles ordonnée ou non, vous pouvez utiliser les éléments <ol> ou <ul> respectivement.

Je recommanderais de garder le balisage aussi simple que possible et aussi complexe que nécessaire, donc quelque chose dans le sens de:

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>
0
zzzzBov

Les réponses ici laissent beaucoup à désirer. La spécification HTML contient un exemple de marquage de publication de blog avec des commentaires à l'intérieur.

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

Bien que la réponse acceptée ait copié/collé la description de la façon dont l’élément <article> est utilisé, elle ne répond pas du tout à la question posée.

Voici la réponse de W3.ORG

Si vous pouvez utiliser un élément HTML natif [HTML51] ou un attribut avec la sémantique et le comportement Que vous avez déjà intégrés, au lieu de Réaffecter un élément et ajouter un rôle, un état ou une propriété ARIA rendre accessible, puis le faire.

Voici la logique que je suis en train de suivre après des recherches: J'ai une liste de critiques. Chaque avis est classé par votes utiles. Par conséquent, le premier niveau sera une liste ordonnée puisque les critiques seront classées par leurs votes utiles. Sinon, une liste non ordonnée suffirait, telle que les commentaires imbriqués:

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

Une réponse perspicace de @Terrill Thompson explique que les lecteurs d'écran sont aidés par le balisage de liste sémantique. Alors oui, les listes d'articles ont du sens. À mesure que les choses deviennent complexes, il mentionne à quel point cela peut être déroutant. C’est là que les attributs ARIA, role et tabindex doivent absolument être ajoutés et testés.

Cette réponse contient un commentaire dirigeant les utilisateurs vers une conversation sur W3.ORG . Par définition, il semble que <article> ne fasse pas partie d'une liste où il devrait s'agir de "contenu autonome". Cependant, la question ici, moi-même et probablement que vous lisez ceci, exige une réponse plus profonde où article s'applique à une liste d'articles.

Tel que:

  • Liste des articles de blog avec des extraits 
  • Résultats de la recherche 
  • Avis 
  • Commentaires
0
TR3B

C'est une question d'opinion donc il s'agit de préférence. En fonction de votre image, j'utiliserais un <ul> <li> même si je pouvais obtenir le même résultat en utilisant div. 

0
Jack M.

Comme d'autres personnes l'ont dit, je pense que chaque article devrait être marqué d'une balise article.

Je suggère également d'entourer toute la liste avec une balise aside. Donc, si vous avez un article principal dans la page (entouré de main), il ne sera pas affecté par les autres articles.

Voici un Bel article à propos de aside.

0
gamliela