5568 sujets

Sémantique web et HTML

<article> Difficulté à en saisir l’usage sur un site "vitri

Bonjour.

J’ai à priori saisi le sens de la nouvelle balise HTML5 <article> dans le cadre d’un site informatif (blog, journal…) : c’est à peu de chose près le même que son sens dans le langage courant. On met donc dans cet élément une information complète qui se suffit en elle-même.

Par contre, dans le cas d’un site dit "vitrine" (site présentant une société, ou une association par exemple) on a en général une information par page, voir une information sur plusieurs pages (pour les gros sites). Par exemple, pour une association, la rubrique "bureau" ne contient que la liste des membres du bureau, ou pour un site d’indépendant, la rubrique "CV" ne présente que le-dit CV… On peut même dans l’absolu considérer que le contenu de ces pages n’est pas une information autonome (<article> semble être fait pour des infos autonomes si j’ai bien compris) puisque coupé du reste du site il n’a plus de sens (à quoi sert la liste des membres du bureau si on ne sait pas à quelle association elle est liée ?)

Du coup, cette balise a-t-elle un intérêt sur ce genre de site ? Plus concrètement ces découpages vous paraissent-ils logiques / utiles ?

Page avec un article unique
Rubrique "Bureau":
<header>Nom de l’association</header>
<nav>Menu</nav>
<article>
<header>Bureau</header>
Contenu
</article>
<footer>Pied de page</footer>

Page avec des articles mal employés ?
Rubrique "CV":
<header>Nom de la personne</header>
<nav>Menu</nav>
<section>
<article>
<header>Expérience</header>
Contenu
</article>
<article>
<header>Formation</header>
Contenu
</article>
</section>
<footer>Pied de page</footer>
Modifié par Derwoed (21 May 2012 - 22:52)
Hello,
Dans tes deux exemples, il ne faudrait pas utiliser l'élément article mais plutôt l'élément section.
1) Cas d'une page présentant le bureau d'une association pour seul contenu : on utilise l'élément section de la sorte :

<header role="banner"><h1>Nom de l’association</h1></header>
<nav role="navigation"> <!-- Menu --> </nav>
<section role="main">
       <h2>Bureau</h2>
       <!-- Contenu principal de la page -->
</section>
<footer>Pied de page</footer>

2) Cas d'une page présentant un CV :

<header role="banner"><h1>Nom de la personne</h1></header>
<nav role="navigation"> <!-- Menu --> </nav>
<section role="main">
    <h2>Expérience</h2>
    <!-- Contenu -->
    <h2>Formation</h2>
    <!-- Contenu -->
</section>
<footer>Pied de page</footer>

A noter qu'on pourrait aussi faire un découpage du CV en section secondaires à l'intérieur de la section principale pour chaque partie du CV.
Sinon :
– J'ai ajouté les rôles ARIA correspondant à chaque élément HTML.
– J'utilise volontairement un titre de niveau 2 à l'intérieur des sections de contenu alors qu'il est théoriquement permis de réutiliser des titres de niveau 1 si l'on souhaite…


edit HS : top la nouvelle présentation du code sur le forum ! merci Dew Smiley smile
Modifié par audrasjb (21 May 2012 - 23:08)
audrasjb a écrit :
Hello,
Dans tes deux exemples, il ne faudrait pas utiliser l'élément article mais plutôt l'élément section.
(…)


OK, cela confirme donc ce que je pensais : sauf exception, la balise <article> n’est pas adaptée à un site vitrine structuré à "l’ancienne" (une info pas vraiment indépendante du reste par rubrique)

a écrit :

A noter qu'on pourrait aussi faire un découpage du CV en section secondaires à l'intérieur de la section principale pour chaque partie du CV.


C’est ce que je m’étais dit…

a écrit :

Sinon :
– J'ai ajouté les rôles ARIA correspondant à chaque élément HTML.
– J'utilise volontairement un titre de niveau 2 à l'intérieur des sections de contenu alors qu'il est théoriquement permis de réutiliser des titres de niveau 1 si l'on souhaite…


Pour les rôles, je les utilise déjà. Par contre, pour les niveaux de titre, je me posais aussi la question. A priori, il n’y a pas de prérogative là-dessus, sans doute, reprendrais-je le niveau à 1 pour chaque section, cela me paraît plus logique…

Merci pour ta réponse.
Modérateur
Je nuancerais les propos d'Audrasjb de la sorte:

Brouillon actuel de html5 a écrit :
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.


Pour les non-anglophones, je synthétise en disant: Un article est une partie du document qui garde son sens en dehors du contexte.

Du coup, un CV est un article, mais <h2>Formation</h2> est une section de l'article. Car les formations n'auraient pas de sens sans le reste de l'article.

Pour la liste des membres de bureau, c'est de nouveau un article, et si chaque membre est développé, on pourrait imaginer un article par membre.

Au final, dans 95% des cas, le contenu principal est un article.

a écrit :
A priori, il n’y a pas de prérogative là-dessus, sans doute, reprendrais-je le niveau à 1 pour chaque section, cela me paraît plus logique…

Effectivement, c'est ainsi que c'est défini. Mais je ne sais pourquoi, la plupart des inté/webdesigners craignent de les utiliser ainsi, moi y compris.
Modifié par kustolovic (22 May 2012 - 17:44)
kustolovic a écrit :
Je nuancerais les propos d'Audrasjb de la sorte:

Pour les non-anglophones, je synthétise en disant: Un article est une partie du document qui garde son sens en dehors du contexte.

Du coup, un CV est un article, mais &lt;h2&gt;Formation&lt;/h2&gt; est une section de l'article. Car les formations n'auraient pas de sens sans le reste de l'article.

Pour la liste des membres de bureau, c'est de nouveau un article, et si chaque membre est développé, on pourrait imaginer un article par membre.

Au final, dans 95% des cas, le contenu principal est un article.


Bien là je ne suis pas tout à fait d’accord, mais j’ai du mal à me décider, d’où ma question…
Pour prendre l’exemple du type au CV, son identité ne sera probablement pas dans l’article, mais dans le header du site, de même pour ses coordonnées qui seront dans la rubrique "contact" (accompagnées d’un formulaire par exemple). Du coup on n’a pas un article autonome puisque si on l’extrait de son environnement, on ne sait pas de qui il s’agit, ni comment le contacter ! Pour l’assoc. idem…

a écrit :
A priori, il n’y a pas de prérogative là-dessus, sans doute, reprendrais-je le niveau à 1 pour chaque section, cela me paraît plus logique…

Effectivement, c'est ainsi que c'est défini. Mais je ne sais pourquoi, la plupart des inté/webdesigners craignent de les utiliser ainsi, moi y compris.

Pour l’instant, le premier problème que je vois est que l’on se retrouve avec plusieurs niveaux de h1, h2… à styler différemment en fonction des contextes ->si on ne fait pas gaffe, on se dirige vers une soupe de CSS… Le second est peut-être pour le SEO : si on considère qu’un moteur est sensible aux mots en h1, un site avec moultes h1 noie ces mots clefs. Le troisième est une complexification du code à saisir (plus de balises, plus de réflexions sur la structure du doc…). Mais bon, rien d’incontournable pour l’instant, c’est l’expérience qui se fera…
Modifié par Derwoed (22 May 2012 - 18:16)
Modérateur
"brouillon html5" a écrit :
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Le premier exemple de la spec est assez éloquent. Ce message est un article, avec un auteur, etc. Ma synthèse est du coup un peu pourrie: il manque la partie qui dit que cet article peut être réutilisé ailleurs, avec tout de même une connaissance globale du contexte. Le CV d'une personne, reste un article en soi, même si on ne sait pas comment le contacter, comme un article de journal, si on a ni la date du journal ni son nom. (On peut bien sûr rajouter ces informations à l'article, comme on pourrait le faire pour le cv…). Certains articles sont 100% indépendants, d'autres pas.

a écrit :
Pour l’instant, le premier problème que je vois est que l’on se retrouve avec plusieurs niveaux de h1, h2… à styler différemment en fonction des contextes ->si on ne fait pas gaffe, on se dirige vers une soupe de CSS… Le second est peut-être pour le SEO : si on considère qu’un moteur est sensible aux mots en h1, un site avec moultes h1 noie ces mots clefs. Le troisième est une complexification du code à saisir (plus de balises, plus de réflexions sur la structure du doc…). Mais bon, rien d’incontournable pour l’instant, c’est l’expérience qui se fera…

Une soupe de css? Si la page est bien contruite, il ne devrait pas y avoir trop de h différents.
Quant au SEO, c'est le serpent qui se mord la queue. Google attend de voir la pratique pour changer ses algos, si on attends que google change ses algos pour changer nos pratiques, on peut d'ores et déjà mettre cette partie de html5 à la poubelle.
kustolovic a écrit :

Le premier exemple de la spec est assez éloquent. Ce message est un article, avec un auteur, etc. Ma synthèse est du coup un peu pourrie: il manque la partie qui dit que cet article peut être réutilisé ailleurs, avec tout de même une connaissance globale du contexte. Le CV d'une personne, reste un article en soi, même si on ne sait pas comment le contacter, comme un article de journal, si on a ni la date du journal ni son nom. (On peut bien sûr rajouter ces informations à l'article, comme on pourrait le faire pour le cv…). Certains articles sont 100% indépendants, d'autres pas.


Mouai. En fait tout ça n’est pas très borné, pas très manichéen. Du coup c’est soumis à interprétation… Personnellement je n’arrive pas à envisager une information sans sujet (un CV sans nom, une liste de membres de bureau sans nom d’association…) comme une info autonome. Mais bon, pourquoi pas, cela laisse un peu de latitude aux webmasters…

a écrit :
Une soupe de css? Si la page est bien contruite, il ne devrait pas y avoir trop de h différents.


On peu facilement se retrouver avec 3 niveaux de h1 différents : celui du site, celui de la section et celui des articles. On peut même en rajouter avec les <asside>… Après, c’est une habitude à prendre…
Modérateur
Derwoed a écrit :

Personnellement je n’arrive pas à envisager une information sans sujet (un CV sans nom, une liste de membres de bureau sans nom d’association…) comme une info autonome.



<article>
  <header>
    <h1>Curiculum Vitae de Jean-Alphonse De la Bouilloire</h1>
  </header>
  <h2>Expériences professionnelles</h2>
   … bla bla bla …
</article>

ou

<article id="cv">
  <header>
    <h1>Curiculum Vitae</h1>
    <h2>Jean-Alphonse De la Bouilloire</h2>
  </header>
  <h3>Expériences professionnelles</h3>
   … bla bla bla …
</article>

Un des grands buts d'html5 est d'améliorer le web en structurant l'information de manière à ce qu'elle soit compréhensible par un système automatique et échangeable. C'est cela le web syntaxique, autrement dit le but est de faire dès que l'on a du contenu plutôt des articles et les adapter au besoin. Après, si tu trouves que le nom de la personne est redondante, tu peux sans autre utiliser #cv h2 { display:none; }.

a écrit :


On peu facilement se retrouver avec 3 niveaux de h1 différents : celui du site, celui de la section et celui des articles. On peut même en rajouter avec les <asside>… Après, c’est une habitude à prendre…

Je suis d'accord que ça demande un peu plus de travail et d'être adapté. Mais de nouveau, l'avantage est pour le partage. Si le cv comme vu là-dessus se retrouve dans linkedin ou autre truc similaire, la hiérarchie ne posera pas de problèmes.
kustolovic a écrit :


Un des grands buts d'html5 est d'améliorer le web en structurant l'information de manière à ce qu'elle soit compréhensible par un système automatique et échangeable. C'est cela le web syntaxique, autrement dit le but est de faire dès que l'on a du contenu plutôt des articles et les adapter au besoin. Après, si tu trouves que le nom de la personne est redondante, tu peux sans autre utiliser #cv h2 { display:none; }.



OK, je n’avais pas vu ça sous cet angle… qui me paraît juste. En fonction des cas, j’aviserai… Par contre, je déteste les redondances (les spécialistes SEO ne sont pas forcément mes amis Smiley cligne ) et effectivement, si je dois doublonner les infos pour les rendre autonomes, j’userai du display: none…

Merci pour cet échange de points de vue.
Modifié par Derwoed (24 May 2012 - 09:47)
Sujet clos
Aller à