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é 😉
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.
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 😉
Si tu souhaites inclure un élément
aside
dans ton en-tête, il te faut le sortir dehgroup
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>
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…
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.
(mis à part le <aside> qui ne sert à rien)
@Neovov — Je pensais avoir été assez clair dans le billet :
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 ^^
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…
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…
En d’autres mots, HTML5 semble une évolution au premier coup d’oeil, mais apporte son lots de restrictions dont on se passerait bien.