HTML5 — Pas de balise aside dans un hgroup ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

HTML5 — Pas de balise aside dans un hgroup ?

Après Une orientation encore trop « littéraire » et pas assez « web » je m’interroge aujourd’hui sur un autre aspect des spécifications HTML5 :  cette tendance à dire aux éditeurs de contenus comment il doivent écrire ou mettre en forme leurs documents. Aujourd’hui, j’ai eu la surprise de voir une page rejetée par le validateur au motif qu’un Element aside not allowed as child of element hgroup in this context. Autrement dit, un élément aside n’est pas autorisé à être enfant d’un élément hgroup. C’est agaçant parce que je trouvais que mon marquage en avait sous la santiag :

<hgroup id="brand"">
  <h1><a href="/"><?php echo get_bloginfo ( 'title' ); ?></a></h1>
  <h2><?php echo get_bloginfo ( 'description' ); ?></h2>
  <aside>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('logo')) : ?>
        <p><img src="images/logo.png" alt></p>
    <?php endif; ?>
  </aside>
</hgroup>
Bon, évidemment les exemples des specs sont assez claires et hgroup n’est pas censé contenir autre chose que des niveaux d’en-tête de h1 à h6. Si on veut regrouper d’autres éléments on peut le faire à un autre niveau, comme la balise header.

Oui mais voilà : dans mon idée, l’image incluse dans aside — qui aurait pu n’être qu’un background – est destinée à être imprimée sans que l’utilisateur ne bidouille les options d’impression, d’où sa présence en dur dans le code HTML.

Je n’ai pas cherché à couper les cheveux en quatre ; je suis sûr qu’en cherchant un peu on pourrait trouver «what 1000» occasions légitimes et sémantiques (c’est-à-dire qui font sens du point de vue de l’auteur du document) pour justifier la présence d’un élément aside dans un hgroup.

Maintenant que le lait est tiré il faut le boire, certes, mais plus je réfléchis et plus je trouve que HTML5 a le «cul entre deux chaises» : soit il y a trop de balises spécifiques, soit pas assez, sans parler des restrictions comme celle que je viens de soumettre à votre attention.

N’hésitez pas à me remettre les idées en place dans les commentaires si quelque chose d’évident m’a échappé ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



16 commentaires pour “HTML5 — Pas de balise aside dans un hgroup ?”

  1. CUT HERE dit :

    Je pense que tu cherches un problème où il n’y en a pas Bruno :). Ton image fait partie de ton header, mais n’est pas à titre pour autant.

  2. Bruno Bichet dit :

    cut-here — Oui, je cherche p-ê la petite bête, mais bon, c’est moi qui décide si oui ou non mon image à un statut de titre ;) A la limite, le fait que j’ai envie/besoin de mettre un aside dans un hgroup ne devrait pas (should not) être le problème des specs. Un peu comme il était ridicule d’obliger à mettre une balise enfant pour un blockquote : aucun (ou très peu) d’éditeur HTML n’avait pris la peine de se plier à ce caprice de html4 ;)

  3. piouPiouM dit :

    Si tu souhaites inclure un élément aside dans ton en-tête, il te faut le sortir de hgroup et réunir le tout dans un , comme suit :

    <header> <hgroup id= »brand »> <h1><a href= »/ »><?php echo get_bloginfo ( ‘title’ ); ?></a></h1> <h2><?php echo get_bloginfo ( ‘description’ ); ?></h2> </hgroup> <?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘logo’)) : ?> <aside><p><img src= »images/logo.png » alt></p></aside> <?php endif; ?> </header>

  4. Bruno Bichet dit :

    piouPiouM — oui bien sûr, c’est ce à quoi j’avais pensé mais ce que je veux dire, c’est qu’en général on fait un site aussi à partir d’une maquette. Et malgré ce que l’on peut lire un peu partout, on ne fait pas ce que l’on veut avec les CSS : la mise en forme est fortement dépendante de la position des éléments les uns par rapport aux autres dans le code HTML.

    Disons que je ne vois pas pourquoi je serais obligé de faire de la bouse au niveau CSS (déplacements de bloc en position: absolute). J’ai peur qu’on en arrive à ajouter un h3 au hgroup juste pour ajouter un logo en float: left; même si la « sémantique » n’y trouve pas son compte…

  5. Neovov dit :

    Pourquoi un <aside> ?

    Si on lit la définition de la spécification, un élément aside permet de représenter du contenu tangentiellement relié au contenu et qui peut être séparé du contenu.

    Dans ton exemple, tu t’en sers pour mettre un logo. Si je suis la sémantique de aside, ton logo est-il lié à ton contenu ? Peut-il être séparé du contenu ?

    Et d’ailleurs, un titre est-il un contenu ;) ?

    <hgroup> est à utiliser quand tu dois regrouper des headings. Sans regroupement (sémantique), ton contenu se réfèrerait à ton dernier titre. Hors, parfois tu as besoin de spécifier une hiérarchie particulière. Les exemples fournis dans la spécification sont intéressants (http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element).

    piouPiouM propose quelque chose de structuré différement. Un <header> permet de fournir une introduction (et de proposer de la navigation), ça s’applique bien dans ton cas.

  6. Neovov dit :

    (mis à part le <aside> qui ne sert à rien)

  7. Bruno Bichet dit :

    @Neovov — Je pensais avoir été assez clair dans le billet :

    Bon, évidemment les exemples des specs sont assez claires et hgroup n’est pas censé contenir autre chose que des niveaux d’en-tête de h1 à h6. Si on veut regrouper d’autres éléments on peut le faire à un autre niveau, comme la balise header.

    Dans ce cas précis, je voulais que le logo soit relié directement aux headings regroupés dans le hgroup, d’une part en terme de « sémantique » mais aussi en terme de mise en forme CSS (en gros je voulais pouvoir placer mon logo en float left ou right par rapport aux headings contenus dans ce hgroup).

    Mais bon, c’est pas grave : je voulais surtout partager ma frustration sur ce coup-là et aussi commencer une série dans la même veine parce que mon petit doigt me dis qu’on n’est pas au bout de nos surprises avec HTML5 ^^

  8. Je suis pas de ceux qui voient d’un bon oeil HTML5. Je me pose surtout des questions sur XHTML5 car avec le retour des attributs mal formés comme , je me demande si on va devoir se traîner des comme ce vieux problème du avec XHTML 1.0.

    Je trouve ça dommage que l’on ait pas parlé de XHTML5 directement car XML c’est bon pour le web et sa cohérence. Bref, je pense attendre un peu avant de changer ma manière de coder car il y a des chances pour qu’on finisse par se dire qu’on a fait une grosse connerie avec HTML5…

  9. arf ! - comme input type= »file » multiple - se traîner des trucs comme input type= »file » multiple= »multiple » en XHTML5 - comme ce vieux problème du input type= »checkbox » checked= »checked »

    Sans parles des noms de balise en majuscules, de la syntaxe pernicieuse etc… etc…

  10. MrThieu dit :

    En d’autres mots, HTML5 semble une évolution au premier coup d’oeil, mais apporte son lots de restrictions dont on se passerait bien.

  11. sous cet dit :

    C’est agaçant parce que je trouvais que mon marquage chaussure air jordan en avait sous la santiag

  12. suis pas dit :

    mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets survetement femme avec les nombreux navigateurs qui se battent pour occuper

  13. not allowed dit :

    Les exemples fournis dans la spécification sont intéressants c’est bon nike tn requin pas cher pour le web et sa cohérence

  14. Bravo pour votre article que je me suis permis de citer comme référence. Baskets Jordan 6, cette charte aurait été écrite et appliquée.

  15. alli Lisa dit :

    cette tendance à dire aux éditeurs de contenus air jordan femme comment il doivent écrire ou mettre en forme leurs document

  16. andre dit :

    le fait que j’ai envie/besoin de mettre un aside dans un hgroup ne devrait pas (should not) être le problème des specs.http://www.andre-santini.fr HTML5 semble une évolution au premier coup d’oeil, mais apporte son lots de restrictions dont on se passerait bien.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site