5546 sujets

Sémantique web et HTML

Interprétation HTML5 <header>, <footer>, <hgroup>

Hello,

Je viens demander l'avis d'experts concernant l'interprétation de certains éléments HTML5.

Je bloque pour l'instant sur deux utilisations.
La première sur la place d'un élément a (lien) au sein d'un hgroup. J'ai une liste d'articles dont les titres sont composés d'un gros titre et d'un sous-titre, le tout devant être cliquable.
J'ai représenté le code sous la forme suivante :

<section id="news" class="box">
    <h2>Actualités</h2>                   
    <article id="news-0">
        <header>
            <hgroup>
                <a href="#" title="">
                    <h3>Titre principal de l'actu</h3>
                    <h4>Sous-titre (accroche) de l'actu.</h4>
                </a>
            </hgroup>
        </header>
        <p>
            Si tu travailles avec un marteau-piqueur pendant un tremblement de terre,
            désynchronise-toi, sinon tu travailles pour rien.
        </p>
        <footer>
            <p>
                Il y a <time datetime="2010-01-01" pubdate>20 jours</time>.
            </p>
        </footer>
    </article>
</section>


Dans ce code je ne sais pas où placer le lien.

<hgroup>
    <a href="#" title="">
        <h3>Titre principal de l'article</h3>
        <h4>Sous-titre (accroche) de l'article.</h4>
    </a>
</hgroup>

Ou bien :

<a href="#" title="">
    <hgroup>    
        <h3>Titre principal de l'article</h3>
        <h4>Sous-titre (accroche) de l'article.</h4>
    </hgroup>
</a>


Ce qui me paraitrait plus logique car je conserve une construction propre pour le hgroup.
Peut-être qu'aucune des deux solutions n'est valide, à votre avis ?

Deuxième questionnement : dans le footer principal du site (du body), je dois placer des sections en colonne. Chaque section va contenir un titre et du texte ou des articles (au sens HTML5).

Exemple :

Notre réseau
-------------
* Lien 1
* Lien 2
* Lien 3

* facebook(img) * twitter(img)


La logique voudrait (si j'en crois les spécifications) que j'utilise la forme :


<footer>
    <section id="network">
        <header>
            <h2>Notre réseau</h2>       
        </header>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
            <li><a href="#">Lien 3</a></li>
            <li class="facebook">
                <a href="#" title="Retrouvez-nous sur Facebook">
                    <img src="images/facebook.png" alt="Facebook" />
                </a>
            </li>
            <li class="twitter">
                <a href="#"  title="Suivez-nous sur Twitter">
                    <img src="images/twitter.png" alt="Twitter" />
                </a>
            </li>
        </ul>        
    </section>
</footer>


Mais voilà, il semblerait que l'élément <header> ne soit pas autorisé dans un élément <footer> !

Qu'en pensez-vous ?
Tout ça peut ressembler à une prise de tête, mais je m'intéresse sérieusement à tout ça Smiley smile


Merci Smiley cligne

A+ benjamin.
Modifié par dbenjamin (23 Jan 2011 - 14:15)
Hello,

*Il me semble* qu'en html 5 il est tout a fait possible de mettre des balises anciennement de type bloc (h3, h4..) dans un lien <a> (contrairement au xhtml où <a> ne tolère que des balises de type en ligne). Personnellement il me paraîtrait plus logique de mettre le lien dans le hgroup notamment pour des question de css par défaut en display:inline pour les liens (ce qui n'est pas forcément une bonne raison pour préférer cette structure).
D'ailleurs je me demande quel serai le comportement par défaut des 2 structures que tu présentes en considérant que hgroup a été défini en display:block; dans les css.

Il me semble également que l'élément header au même titre que l'élément footer peut être repris à plusieurs endroits dans la page là ou s'avère nécessaire une entête ou un pied "de page". Pour donner un exemple un header en haut de la page (classique) et un header pour chaque article de la page. Donc à priori pourquoi pas un header pour définir l'entête de la partie footer.

Par contre un header dans le footer est il vraiment nécessaire pour encadrer uniquement une balise h2 je ne suis pas sure...

Bref ces questions sont pertinentes et la réponse d'expert html5 (si tenté qu'il y en ai déjà Smiley lol malgré l'absence de spéc définitives & recommandations "officielles") m’intéresserai aussi.
A suivre donc...
Salut oliviadox,

Merci pour ta participation Smiley smile

En fait je crois que l'élément <hgroup> n'accepte que des éléments <h1> à <h6> dans son corps, mais c'est peut-être une mauvaise interprétation.

De toute manière il est clair que le problème d'un titre d'article qui doit être cliquable se posera et pour le moment je me demande si ce n'est pas aller trop loin que de penser à ça, mais bon Smiley smile

Pour le header, la grande question c'est de savoir si la structure <header /><footer /> ne s'applique qu'à un article ou si son utilisation devrait être plus étendue. Ce qui pourrait donner un truc du genre :


<section id="news">
    <header>
        <h2>Actualités</h2>
    </header>

    <article id="news-1">
        <header>
            <hgroup>
                <h3>Ma super actu</h3>
                <h4>Blabla sous titre</h4>
            </hgroup>
        </header>
        <p>
            Contenu de mon actu
        </p>
        <footer>
            Par <span class="author">machin</span>
            Le <time datetime="2010-01-01" pubdate>01 janvier 2010</time>.
        </footer>        
    </article>

    <article id="news-2">
        <header>
            <hgroup>
                <h3>Ma super actu 2</h3>
                <h4>Blabla sous titre 2</h4>
            </hgroup>
        </header>
        <p>
            Contenu de mon actu 2
        </p>
        <footer>
            Par <span class="author">machin</span>
            Le <time datetime="2010-01-01" pubdate>01 janvier 2010</time>.
        </footer>
    </article>

    <footer>
        <a href="">Voir toutes les actus</a>
    </footer>
</section>


Là ça devient un peu exagéré. Mais en toute logique.... Smiley smile

Si d'autres personnes ont un avis à donner, je serais intéressé de connaitre leur vision des choses, même si ça reste pour le moment une interprétation strictement personnelle.

A+ benjamin.
D'après ce que j'en ai lu cette interprétation des multiples footer et header pour chaque article est tout à fait possible, ça fait un genre de mini footer qui contient des infos de bas de "page" pour chaque article et sémantiquement je trouve que ça a du sens de séparer le contenu pur de l'article d'informations accessoires comme le nom de l'auteur ou la date de l'article.

Je ne sais pas non plus si c'est juste mais ton interprétation personnelle rejoins la mienne sur ce point Smiley biggrin

Et pour hgroup j'avais pas pensé à ça mais c'est vrai qu'il n'accepte que des htruc... Donc mettre le lien dans chaque hn ou alors autour du hgroup... je n'ai pas encore eu à me poser la question sérieusement ??

Je pense qu'il faut laisser un peu tout ça se décanter et attendre un peu de voir ce que ça donnera au final, le temps que la pratique se mette en place et que la "bonne pratique" soit plus clairement définie (quitte à se prendre la tête au passage sur quelques interrogations métaphysiques (heuu sémantiques Smiley lol )

Bref qui vivra verra Smiley cligne
A+
Je voudrais juste préciser que la balise <article> sert à entourer du contenu qui n'est pas issu de ton site (CF spécification du W3C). Par exemple si tu reprend un article d'un autre site ou la citation d'une coupure de presse.
Il faut faire une distinction entre du contenu que tu as toi même écrit et celui qui provient d'une source externe.
fogofo a écrit :
Je voudrais juste préciser que la balise &lt;article&gt; sert à entourer du contenu qui n'est pas issu de ton site (CF spécification du W3C). Par exemple si tu reprend un article d'un autre site ou la citation d'une coupure de presse.
Il faut faire une distinction entre du contenu que tu as toi même écrit et celui qui provient d'une source externe.


Humm, intéressant. Ça ne s'applique pas à une version courte d'un article qui pointe vers sa version complète sur une autre page du site ?

J'avais pas vu cette balise comme ça, je pensais que c'était pour bien différencier du contenu de type "éditorial" ou "récurrent" d'un contenu statique classique genre du texte de présentation de la société.
a écrit :
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be 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.


Voici le descriptif du W3C, ce que je comprends la dedans c'est que le contenu intégré dans cette balise doit provenir d'une source externe. Les commentaires des lecteurs de l'article en fait partie par exemples.
En même temps je me débrouille en anglais, mais ils utilisent pas mal de termes assez vagues du coup ma traduction est peu être erroné. J'ai fait quelques recherche car l'utilisation de cette balise reste assez controversée mais c'est ce qu'il en ressort sur d'autres sites.
fogofo a écrit :


Voici le descriptif du W3C, ce que je comprends la dedans c'est que le contenu intégré dans cette balise doit provenir d'une source externe. Les commentaires des lecteurs de l'article en fait partie par exemples.
En même temps je me débrouille en anglais, mais ils utilisent pas mal de termes assez vagues du coup ma traduction est peu être erroné. J'ai fait quelques recherche car l'utilisation de cette balise reste assez controversée mais c'est ce qu'il en ressort sur d'autres sites.


Bonjour,

Pas certain de ton interprétation sur "provient d'une source externe". Quelques spécialistes viendront sûrement nous éclairer. Smiley smile
Moi je comprend que l'élément <article> représente un "morceau" indépendant de contenu qui a sa propre structure, indépendante du document dans lequel il se trouve.

Ça devient donc plus facile d'isoler ces éléments dans la source et de les traiter indépendamment car ils possèdent leur propre construction/layout (header, footer, etc.).

Je comprend que l'élément est indépendant dans le sens où il peut être porté n'importe où ailleurs puisque sa structure et son contenu lui sont propres. Ce qui me rappelle très fortement un "module".

Les actualités sur un site sont un exemple parfait, car tu peux très bien répéter ce "module" à différents endroits de ton site, où même le distribuer (vers l'extérieur). Sa structure étant consistante et normalisée, c'est plus facile.

Effectivement, dans le cas où tu le distribues, c'est sans doute plus facile pour le crawler d'isoler cette partie du reste du site et de comprendre que c'est une source extérieur (j'imagine). Mais c'est vrai aussi pour ton propre site après tout.
Modifié par dbenjamin (25 Jan 2011 - 17:23)
a écrit :
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be 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.


En VF...
a écrit :
L’élément article représente un composant d'une page qui consiste en une composition qui se contient elle même, dans un document, page, application ou site et qui est prévue pour être indépendamment distribuable ou réutilisable par exemple dans un flux de syndication. Ce pourrait être un post de forum, un article de magazine ou de journal, une entrée de blog (article de blog), un commentaire soumis par un utilisateur, un widget interactif ou gadget, ou n'importe quelle autre élément de contenu indépendant.


Du coup je vois vraiment pas d'où te viens la notion d'extérieur.
La notion ici c'est indépendant...
Moi je vois ça comme une balise capable de contenir tout un texte indépendant des autres par exemple par son sujet ou par son type de contenu. Et le fait que cette balise et son contenu soit indépendant justifierai le besoin d'avoir un header ou un footer qui lui soit propre. Donc encore une fois je suis plutot de l'avis de dbenjamin...
Sujet clos
Aller à