Balise HTML5 : Parle à ma « main »

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

Balise HTML5 : Parle à ma « main »

A compter d’aujourd’hui, l’élément html5 main pourrait rejoindre la panoplie du parfait intégrateur web à côté des autres balises permettant de regrouper du contenu palpable. Ce nouvel élément a pour mission de devenir la cible privilégiée du lien d’évitement « Skip to link » ou « Aller au contenu principal ». Comment l’utiliser ? C’est simple, il devrait tout simplement remplacer la <div role=’main’> que vous utilisez certainement depuis longtemps !

Pour lui appliquer des styles CSS, il suffit de lui faire subir le même sort que les autres balises HTML5 article, aside, figcaption, figure, footer, header, hgroup*, nav et section : main { display: block }. Plus simple encore, cette balise est déjà disponible dans le script html5shiv.js qu’il vous suffira d’intégrer dans votre… intégration !

Parmi les restrictions, on notera que l’élément main :

  • Est prévu pour être seul (pas deux main dans un document),
  • Ne doit pas être utilisé à l’intérieur des éléments article, aside, footer, header ou nav,
  • Se porte mieux avec l’attribut ARIA qui va bien <main role="main"></main>,
  • N’est pas prévu, d’une manière générale, pour servir de contenu principal d’une sous-section.

→ Merci à @bpierre pour l’information o/

* L’élément hgroup ne fait plus partie des spécifications, mais bon, en attendant qu’il disparaisse totalement…

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.



2 commentaires pour “Balise HTML5 : Parle à ma « main »”

  1. Luc dit :

    Encore une balise qui ne sert à rien.

    Si je ne me trompe pas, il n’y a pas de propriété spécifique pour faire un lien d’évitemment, (si ?) donc le « skip to link », est un a href= »contenuprincipal » avec dans la source html un #contenuprincipal que ce soit donc div#contenuprincipal ou main#contenuprincipal aucune différence…

    Encore une balise bullshit qui va simplement simplifier le travail aux rotot (qui à dit « à google » pour identifier la zone de contenu principale d’un site…

    KTHXBY

  2. Olivier C dit :

    Eh! Je ne viens pas souvent ici mais je m’aperçois que j’ai tort car j’ai toujours la surprise agréable d’apprendre quelque chose que je n’ai pas déjà lu 20 fois ailleurs : la dernière fois que je suis venu j’avais appris la disparition de hgroup. Merci pour cette info intéressante.



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