5568 sujets

Sémantique web et HTML

Bonjour,

Je souhaiterais avoir votre avis concernant l'utilisation de l'élément aside apparu dans la norme HTML 5. En effet, j'ai l'impression que la norme est un peu ambigüe.

Ce qui est dit aujourd'hui (cf. la doc) :
a écrit :
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can also be used for typographical effects like pull quotes.


a écrit :
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.


<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>


a écrit :
The following example shows how an aside is used to mark up a pull quote in a longer article.


...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do
now.</q></p>

<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...


Selon mon interprétation, cet élément sert à représenter du contenu additionnel en rapport avec un article ou tout autre contenu, comme l'exemple donné par la documentation officielle. Le brouillon parle de sidebar mais dans le cas de l'impression papier. Cela rejoint donc l'exemple du brouillon, aside représente des notes ou des citations de l'article même, mises en avant (plus gros, italique etc.).

Je pense donc que l'utilisation d'aside devrait s'arrêter là. Mais on voit fleurir des exemples d'utilisations en lieu et place de la sidebar traditionnelle des blogs. Par exemple sur le dernier article d'alsacréations Smiley lol aside est utilisé pour représenté les liens vers les archives :
<aside> 
    <h1>Archives</h1> 
    <ul> 
        <li><a href="/archives/09/05/">Mai 2009</a></li> 
        <li><a href="/archives /09/06/">Juin 2009</a></li> 
        <li><a href="/archives /09/07/">Juillet 2009</a></li> 
    </ul> 
</aside>


Même si c'est syntaxiquement valide, à mon avis il aurait fallu utiliser l'élément nav d'un point de vue sémantique. Cette erreur provient de la mauvaise interprétation de “Such sections are often represented as sidebars in printed typography.”.

Qu'en pensez-vous ?
Administrateur
Bonjour,

des exemples que j'ai rapidement vu, les deux.
Tu peux avoir <aside> au niveau d'une page et ce serait la sidebar ou 3ème colonne pour parler vite; mais aussi <aside> dans un élément représentant un article et là c'est pour un encart de texte, la bio de l'auteur de l'article ou de l'interviewé, etc
Un peu comme <footer> n'est pas LE footer de la page mais tantôt le footer de la page, tantôt le footer d'un article, etc (il y aura souvent plusieurs footer dans une page, pas tous au même niveau de la hiérarchie)

EDIT: Bruce Lawson a des exemples assez parlants.
Modifié par Felipe (10 Jul 2009 - 16:04)
Tu as un lien précis vers les exemples que tu cites ? J'ai encore du mal à trouver "valide" l'exemple du tutoriel. Les liens vers les archives de tout le blog (par exemple) c'est de la navigation. Il n'y a pas vraiment d'information par rapport à l'article d'un blog.
Juste un mot pour dire qu'on se demande avec raison à quoi va bien pouvoir servir cet élément, sur le fond. Une interface Web est remplie par définition de trucs "aside", qu'on prend ci-dessus pour l'objet de cet élément alors que ce n'est pas le cas (il concerne le contenu, pas l'interface, mais l'articulation contenu/interface est le gros souci d'HTML5). D'autre part, un contenu Web peut en efet comporter des prolongements "aside", mais à quoi cela va-t-il bien servir de tenter de les baliser comme tel ? Signaler les notes en bas de page ? Voilà qui ne va pas simplifier les débats sur les notes et références dans Wikipédia (l'une des sources d'inspiration d'HTML5) Smiley biggrin
Modifié par Laurent Denis (13 Jul 2009 - 22:49)
bonsoir,
je voyais ça plutot comme des notes en marges de contenu :
- une definition (note bas de pages , mais en marges ?)
- un extrait d'un contenu remit en valeur en "duplicate content" plutot qu'une balise "strong" , en bidouillant un before ou after , ça le ferait aussi .
- une illustration (image caricatural , 1 portrait , objet , ...)

Le web repart dans le print ?
(zut , c'est pas vendredi) , mais oui le message est bien la !? .

Nom de zeus , comment vas t-on s'approprier cette balise , vaudrait-il pas mieux la laisser de " coté" ?
:)
gc-nomade a écrit :
je voyais ça plutot comme des notes en marges de contenu :
- une definition (note bas de pages , mais en marges ?)
- un extrait d'un contenu remit en valeur en "duplicate content" plutot qu'une balise "strong" , en bidouillant un before ou after , ça le ferait aussi .
- une illustration (image caricatural , 1 portrait , objet , ...)
Je le vois plutôt comme ça aussi.

Par exemple ça pourrait servir pour les annotation de Karl à droite : http://www.la-grange.net/2009/07/02/futur-html

gc-nomade a écrit :
Nom de zeus , comment vas t-on s'approprier cette balise , vaudrait-il pas mieux la laisser de " coté" ?
Joli Smiley cligne