5568 sujets

Sémantique web et HTML

Structurer une liste de résumés d'articles en HTML5 ?

Bonjour !

La question est sans doute idiote mais... j'hésite dans la façon de structurer correctement en HTML5 une liste de résumés d'articles (ou parfois simplement un titres d'article), qui se trouvera sur une page d'accueil.

<section id="latest_news">
<a href="fr/news/1787">
<article>
  <h1>Le titre de la news</h1>
</article>
</a>
<a href="fr/news/2470">
<article>
  <h1>Le titre du second article</h1>
  <p>Une réunion des coopératives était organisée aujourd'hui sur la dépollution des sols situés en zone...</p>
</article>
</a>
</section>


Je suis très perplexe : comment sera reconnu ce code ? Comme une suite d'articles entiers, ou comme une suite de résumés d'articles ? Comment distinguer les deux ?

Le but étant qu'un clic sur le contenu du résumé (titre ou titre+résumé) amène vers l'article, est-ce valide de placer tout le bloc <article> dans un <a> ? Ou bien serait-il préférable de placer un <a> pour le titre, et un second <a> (identique) pour le résumé ?

D'avance merci pour votre aide car je me tâte...
Bonsoir,

Même si les spécifications html5 offrent la possibilité de poser plusieurs balises h1 dans une même page en garantissant une logique de structure, il reste que sur un plan purement SEO il vaut mieux n'en laisser qu'un. En cette fin d'année 2012 en tout les cas, plus tard, on verra...

Pour le reste, malheureusement, il ne faut pas s'imaginer que les moteurs de recherche fassent autant dans la finesse dans la lecture du code html (en tout cas pas Google, donc les autres...). Bref, ce n'est pas parce que vous avez mis une balise article sur du texte que chaque texte sera pris pour un article à part entière.

Pour comprendre : quand vous programmez un formulaire html/php, la première chose que l'on vous apprends c'est de ne pas faire une confiance aveugle aux données utilisateurs, et bien google fait de même avec les webmasters (et pour cause !). C'est avant tout sur les données brutes qu'il s'appuie, le reste est "plus ou moins" pris en compte. Du très peu que l'on peu en dire, son algorithme s'appuie sur une moyenne constatée dans la structure des sites, pour le html5 c'est encore tout neuf...
Salut,

Sur un plan strictement sémantique, s'il s'agit d'une liste, ne devrais-tu pas utiliser une balise de liste ?
Ensuite, l'élément "article", tel que défini par le W3C, représente un contenu qui se satisfait à lui-même en terme de compréhension et qui pourrait donc être utilisé ou distribué de façon indépendante du contexte de ta page (par exemple dans un flux RSS). Du coup, est-ce qu'un titre seul est suffisant ? Je dirais non !

Perso, j'utiliserais donc une simple liste (ou pourquoi pas ordonnée si l'on tient compte de l'aspect chronologique) de liens où le niveau de titre à utiliser dépendra de l'outline de ton document.

<section id="news">
...
<ul class="latest">
  <li>
    <a href="fr/news/1787">
      <h2>Le titre de la news</h2>
    </a>
  </li>
  <li>
    <a href="fr/news/2470">
      <h2>Le titre du second article</h2>
      <p>Une réunion des coopératives était organisée aujourd'hui sur la dépollution des sols situés en zone...</p>
    </a>
  </li>
</ul>
</section>


Si tu as d'autres contenus de type actualités sur ta page, il devraient figurer dans la même section.
Si tes dernières actualités sont relatives à un autre contenu de la page, tu peux aussi utiliser un élément "aside".
Après, html5 te permet bien d'avoir des titres + paragraphes cliquables...

Un peu de lecture sur l'élément "article"...

tm
Dans l'absolu, l'ensemble d'un site web n'est qu'une géante liste de contenus différents. Si on reprend cette logique, alors nous devrions appliquer des listes partout !

Dans un article, il y réside souvent une liste de paragraphes, et pour autant nous n'appliquons pas cette règle.

Vous imaginez sinon ? 


<body>

<ul>
   <li>
       <header>...</header>
   </li>
  <li>
       <div class="global">
           <ul>
               <li>
                   <section>
                       <header><h2>...</h2></header>
                       <div class="content">
                            <ul>
                                 <li>
                                     <p>...</p>
                                 </li>
                                 <li>
                                     <p>...</p>
                                 </li>
                            </ul>
                       </div>
                   </section>
               </li>
               <li>
                   <section>...</section>
               </li>
           </ul>
       </div>
  </li>
  <li>
       <footer>...</footer>
  </li>
</ul>

</body>

Smiley lol

Quand il est nécessaire de définir un titre, une date, un ou des paragraphes, un lien, etc, au sein même d'un élément de liste, il devient alors nécessaire de se poser la question de l'utilité de cet ensemble ul/li. (En bref : Ca commence à faire beaucoup !)


Au sujet de la balise article, il est précisé sur les recommandations W3c que son contenu doit être indépendant (et réutilisable ailleurs) pour justifier l'utilisation de celle-ci. Je pars du principe que "indépendant" ne veut pas forcément dire "complet". D'ailleurs, un résumé d'article se doit d'être suffisamment compréhensible pour que l'utilisateur prenne la décision d'aller plus loin en terme d'informations, et donc : Indépendant.

Si vous vous posez la question, demandez-vous si votre article est suffisamment clair pour être lu via un flux RSS. Si oui, alors il est donc tout à fait bon d'utiliser la balise article. Prenez par exemple Twitter, les sujets sont très sommaires, et contiennent bien souvent un lien vers un article plus complet. Pourtant, ces sujets sont véritablement des <article> au sens w3c du terme. Smiley cligne


[Edit] woups ! J'ai oublié de répondre à la question des <a>. ;p
Ben en réalité, c'est valide du point de vue w3c. En HTML5, la balise <a> peut contenir des éléments de type bloc. Donc à partir de là, tu peux faire valider ton code sur un validateur, il passera.

La question est plus ergonomique en réalité. Si le lien englobe la totalité d'un article, cela créera une zone réactive d'une surface importante dans la page, ce genre de choses a tendance à gêner l'utilisateur. Il faut bien se rendre compte que beaucoup de visiteurs ont tendance à cliquer sur la page qu'ils sont en train de lire, mécaniquement. Certains vont sélectionner un bout de texte pour se repérer dans leur lecture, certains vont cliquer sur la page pour y placer le focus, d'autres pour des raisons qu'ils ignorent.

La quantité d'internautes qui ont cette habitude est très importante, de mon expérience je dirais près de 80%.

Par conséquent, de grandes zones réactives comme celles-ci peuvent les amener sans le vouloir vers une page qu'ils ne souhaitaient pas forcément visiter. Il est donc très important que les zones réactives (boutons, liens, etc) soient restreintes à leur utilité directe. Sans pour autant les rendre trop petites, auquel cas, c'est encore un autre problème. Smiley langue [/edit]
Modifié par Nigel (15 Nov 2012 - 15:00)
Nigel a écrit :
Dans l'absolu, l'ensemble d'un site web n'est qu'une géante liste de contenus différents. Si on reprend cette logique, alors nous devrions appliquer des listes partout
Hum, il faut vraiment répondre à ça ?!?? Smiley eek
- header
- div.global
- footer
Selon toi, ce serait la liste de quoi exactement ?
Bouchon a écrit :
j'hésite dans la façon de structurer correctement en HTML5 une liste de résumés d'articles (ou parfois simplement un titres d'article), qui se trouvera sur une page d'accueil
Nulle trace ici de titre, auteur, date, paragraphes multiples, liens, etc... mais bien "liste", "titre" et "résumé optionnel".
Pas non plus de "grandes zones réactives" à l'horizon... Smiley rolleyes

tm
a écrit :
Hum, il faut vraiment répondre à ça ?!?? eek
- header
- div.global
- footer
Selon toi, ce serait la liste de quoi exactement ?

Je me cite : "l'ensemble d'un site web n'est qu'une géante liste de contenus différents"

Si on part dans la logique de "liste de résumés de news" que tu as présenté un peu au dessus, il faudrait alors aussi employer du ul/li sur une liste de commentaires, une liste de réponses sur un forum, une liste de paragraphes, la liste des smilies dans une réponse à un sujet, etc... Heureusement que nous n'appliquons pas cela.

Attention à ne pas aller trop loin dans l'analyse sémantique.

Une suite d'<article>, sans <ul> <li>, fera très bien l'affaire pour Bouchon. Smiley smile

J'aurais tendance aussi à conseiller de rajouter une information de date sur les articles, s'il s'agit bien de "latest_news" comme l'indique l'id du bloc, ça pourra toujours être utile un jour.
Modifié par Nigel (19 Nov 2012 - 14:47)
Re,

Tu ne m'as pas répondu...
Est-ce la liste de ta page web ? la liste de la structure principale ? Smiley rolleyes
Il n'y a aucun lien entre ces différents contenus si ce n'est qu'ils sont les uns à côté des autres. Et si tu peux effectivement faire le listing de ces contenus, ce n'est pas pour autant qu'ils forment une liste dans leur contexte.

Pour moi, la liste correspond à une énumération d'éléments qui sont forcément apparentés.
Ce n'est pas parce que des contenus se suivent qu'ils forment une liste. La liste sous-entend la notion de répertorier, rassembler, organiser ... lister ! C'est bien là que se trouve la sémantique...
C'est bien ce qu'on fait lorsque l'on propose la liste des derniers ce-que-tu-veux.

Et bien évidemment, "heureusement" que l'on peut utiliser des listes pour les commentaires, réponses ou ... derniers articles !!!*

tm

* la liste de tous les sites/blogs de "référence" qui le font serait bien trop longue... Smiley cligne
a écrit :

Tu ne m'as pas répondu...
Est-ce la liste de ta page web ? la liste de la structure principale ? rolleyes
Il n'y a aucun lien entre ces différents contenus si ce n'est qu'ils sont les uns à côté des autres. Et si tu peux effectivement faire le listing de ces contenus, ce n'est pas pour autant
qu'ils forment une liste dans leur contexte.

Chaque élément d'un contenu fait partie d'un ensemble plus grand. Si on l'étudie de manière inversée, c'est ce qui s'appelle une approche holistique. Tout contenu doit avoir un lien avec son sujet, c'est ainsi qu'on réalise le contenu d'un site web, parfois sans s'en rendre compte. On peut aussi observer cette façon de concevoir lorsqu'on gère un projet à partir d'un mind mapping.

La réponse que j'ai donné précédemment correspond bien à ce que j'ai souhaité exprimer. Tout le contenu d'un site web est une liste de contenu lié au contexte du premier.

Ce que je ne comprend pas, c'est que tu te contredis aussitôt :

a écrit :
Et si tu peux effectivement faire le listing de ces contenus, ce n'est pas pour autant qu'ils forment une liste dans leur contexte.

a écrit :
Pour moi, la liste correspond à une énumération d'éléments qui sont forcément apparentés.

Ces deux phrases qui se suivent dans ton argumentation veulent, à mon sens, exprimer la même chose, mais de façon contradictoire.

Le sujet du débat correspond à la limite pour laquelle les <ul><li> ont une utilité. Je pense que la question est complexe et j'aurais tendance à dire que la limite se situe vis à vis des capacités cognitive et mémorielles de l'homme. Quand un contenu est trop important au sein d'un élément de liste, on en oublie l'existence de cette liste pour se concentrer sur ce contenu indépendamment de l'ensemble. C'est pour quoi je pense qu'il est utile d'utiliser ul / li sur une énumération de contenus courts.

Comme indicateur, je l'ai énoncé plus tôt, il faut généralement s'arrêter aux éléments de type inline. Quand vient le moment d'utiliser des éléments de type block (comme un paragraphe) au sein d'un li, le listing commence à devenir trop imposant, et perd probablement de son utilité.

La question n'est pas de se demander si on peut ou si on doit, mais ce qui est le plus cohérent vis à vis d'un besoin.

a écrit :
* la liste de tous les sites/blogs de "référence" qui le font serait bien trop longue... cligne

Ca m'interesse, mais j'aurais besoin de références importantes en matière d'intégration web.
On pourra d'ailleurs remarquer que ni Alsacreations, ni HTML5doctor n'utilise de listes pour définir les commentaires d'un article.

Les débats sémantiques de ce genre sont légion dans ce corps de métier en réalité. On peut remettre en cause pas mal de choses, je pense notamment à l'utilisation de la balise HTML5 <i> sur Twitter pour les icones alors que celle-ci est censée définir un "changement de ton", comme des parenthèses, par exemple. Cette utilisation est sujette à débats et chacun aura ses arguments.

Il y a quelques années je remarquais beaucoup d'intégrateurs de métier employer la balise <p> même lorsqu'il ne s'agissait pas de paragraphes, car la définition de "paragraphe" pour eux était assez large. Certains l'utilisaient aussi pour ses marges, mais là c'est encore un autre débat. Aujourd'hui nous sommes beaucoup plus unanimes sur le sujet, peut-être que ça changera encore à l'avenir.
Modifié par Nigel (21 Nov 2012 - 09:36)
Merci pour la discussion !

Nigel a écrit :
Chaque élément d'un contenu fait partie d'un ensemble plus grand
...
Ces deux phrases qui se suivent dans ton argumentation veulent, à mon sens, exprimer la même chose, mais de façon contradictoire.

Je vais essayer de formuler autrement..
Prenons les denrées dans un magasin alimentaire. Ce n'est pas parce qu'elles sont rangées les unes à côté des autres qu'elles font partie d'une liste.
Elle font partie d'un rayon, d'un magasin, d'un tout...

Mais bien évidemment, je peux les retrouver dans des listes si je le souhaite.
De ma liste de courses à l'inventaire complet du magasin.
C'est pour moi ce contexte qui fait passer les simples-articles-rangés-dans-le-magasin à des éléments de liste.

On peut donc tout lister, je te rejoins, sans pour autant que tout soit listé, fasse partie d'une énumération, en permanence...

J'espère que je suis un peu plus clair ?

Nigel a écrit :
Quand un contenu est trop important au sein d'un élément de liste, on en oublie l'existence de cette liste pour se concentrer sur ce contenu indépendamment de l'ensemble.

Je te rejoins. Dans le cas présent, tu pars plutôt du principe qu'il s'agit d'une liste complexe ou volumineuse (tu suggères d'ailleurs d'ajouter la date) alors que je considère qu'il s'agit d'une liste simple composée d'un titre ou, au pire, un titre et une ligne de texte...

Nigel a écrit :
Ca m'interesse, mais j'aurais besoin de références importantes en matière d'intégration web.

Je peux faire une petite liste (en vitesse) ? Smiley cligne
- Raphaël Goetter
- Daniel Glazman (il utilise même une liste de définition)
- html5rocks
- Eric Meyer
- Jeffrey Zeldman
- smashingmagazine
- mozilla developper network (pas de comments mais une liste de tweets)
- css tricks
- ...

Nigel a écrit :
On pourra d'ailleurs remarquer que ni Alsacreations, ni HTML5doctor n'utilise de listes pour définir les commentaires d'un article.

Je n'ai jamais dit que c'était obligatoire... Smiley lol

Nigel a écrit :
Les débats sémantiques de ce genre sont légion dans ce corps de métier en réalité. On peut remettre en cause pas mal de choses...

C'est aussi cela qui fait l'intérêt, voire le charme, de la chose ! (enfin pour moi)

tm
Le sujet au final est porté à déterminer quelle est la quantité de contenu maximum respectable au sein d'un élément de liste.

En reprenant le contexte de Bouchon (l'auteur du topic) :
a écrit :
La question est sans doute idiote mais... j'hésite dans la façon de structurer correctement en HTML5 une liste de résumés d'articles (ou parfois simplement un titres d'article), qui se trouvera sur une page d'accueil.


Si j'ai bien compris, dans la plupart des cas il se retrouvera à afficher un titre + paragraphe(s) et dans quelques cas un titre seul.

S'il s'agissait d'afficher uniquement (et systématiquement) le titre (+le lien) de l'article, je trouverais l'emploi d'un ul-li tout à fait adapté. Mais dans le cas de bouchon, il est dans une situation où il affiche tout de même un ou plusieurs paragraphes, quand bien même il n'en afficherait qu'un, on entre à mon sens dans un cas où le ul/li n'est plus adapté en raison de la quantité de contenu. ..D'autant plus qu'on ne connait pas la limite de caractères imposé à ces paragraphes, si tant est qu'il y en ait une.

{EDIT} Pour ajouter un peu plus de détails, j'aurais tendance à penser qu'un <li> ne devrait contenir qu'un contenu à hiérarchie unique et qui se suffit à lui même en quelques mots.{/EDIT}

J'ai jeté un oeil aux références que tu cites, mais je n'ai malheureusement pas réussi à trouver d'équivalence. http://www.html5rocks.com/en/, par exemple affiche uniquement une liste de titres d'articles, le contexte est donc différent.

a écrit :
Je n'ai jamais dit que c'était obligatoire... lol

Il n'y a rien d'obligatoire, que des bonnes pratiques. La limite entre la bonne et la mauvaise pratique est d'ailleurs parfois très fine. Je ne suis pas sûr d'avoir la bonne, mais après tout, l'intégration, c'est faire des choix : http://www.hteumeuleu.fr/l-integration-c-est-faire-des-choix/ Smiley cligne

PS : Comme quoi la question n'était pas idiote. Smiley cligne
Modifié par Nigel (23 Nov 2012 - 18:30)
Nigel a écrit :
J'ai jeté un oeil aux références que tu cites, mais je n'ai malheureusement pas réussi à trouver d'équivalence.

Les exemples cités faisaient juste référence à l'utilisation de listes pour les commentaires..

tm.
Sujet clos
Aller à