Dans la première partie de cette série nous avons examiné les défaillances qui ont conduit aux éléments structurels nouveaux dans HTML5; dans la deuxième partie de la série nous avons examiné en détail les conséquences de ces défaillances; Dans cette dernière partie, nous chercherons une voie à suivre et tirerons des conclusions sur l’état actuel des choses.

Ce n'est pas un problème abstrait: les gens doivent en fait enseigner ce genre de choses. La prochaine génération de concepteurs de sites Web et de développeurs apprendra à utiliser HTML5 comme point de départ. Je suis désolé pour quiconque doit essayer d’expliquer les grandes lignes et les sections concernant la récolte actuelle et future des élèves. Peut-être vont-ils sagement s'en tenir au format simple qui fonctionne toujours bien: utiliser des div avec un identifiant ou une classe / es.

Il est raisonnable de suggérer que les agents utilisateurs à l'avenir, tels que les navigateurs et les lecteurs d'écran, feront peut-être plus avec les éléments structurels de HTML5, ce qui les rendra plus acceptables pour nous en tant qu'auteurs.

L’opéra Bruce Lawson a suggéré que sur le WHATWG liste de diffusion en 2009 :

Après tout, je ne connais aucun agent utilisateur pouvant utiliser le temps, la section, le pied de page, la grille de données, etc.

Et voici ce que Hickson, l'éditeur HTML5, a répondu:

Je ne. La plupart des nouveaux éléments sont simplement destinés à faciliter le style, de sorte que nous n’ayons pas à utiliser de classes.

Tout cela, et l'éditeur ne voit même pas les agents utilisateurs utiliser ces éléments. Ils sont là, dit-il, pour nous sauver de l'utilisation des classes. En d'autres termes, le créateur de ces éléments semble ne pas savoir pourquoi ils sont même dans la spécification, sauf pour «rendre le style plus facile».

Avons-nous besoin de plus de sémantique en HTML?

Il y a une école de pensée qui dit que nous n'avons besoin que d'une poignée de nouvelles sémantiques. Après tout, les spécifications seraient gonflées s'il y avait des dizaines ou des centaines de nouveaux termes ajoutés.

D'un côté, je suis d'accord. En termes de structuration d' une page Web de base, je dirais que nous serions mieux sans les éléments de sectionnement de HTML. Ce qui était autrefois un exercice simple d'utilisation des divs est devenu un désordre compliqué en HTML5 sans gain net.

Cependant, en termes de sémantique en général, il y a des cas où plus de sens peut être ajouté à la structure de notre page Web (que ce soit HTML4, 5 ou ce qui vient après) en utilisant des attributs supplémentaires sur nos éléments existants.

ARIA pour l'accessibilité

L'un des éléments les plus faciles à implémenter sur un site existant ou nouveau est celui des sites ARIA. (ARIA signifie Accessible Rich Internet Applications et est une spécification qui définit un moyen de rendre les applications Web et les pages Web plus accessibles.)

Les repères ARIA sont un sous-ensemble de la spécification ARIA globale et un type simple de métadonnées permettant aux utilisateurs malvoyants et malvoyants de lire les parties importantes d'une page, à savoir les «repères». Nous ajoutons simplement role = "landmark-name" à un élément existant, de la même manière que nous ajouterions class = "class-name" à un élément. Les points de repère AIRA sont discuté en comparaison avec HTML5 ici .

Les repères ARIA correspondent beaucoup mieux à ce que nous faisons actuellement. Le nommage est un peu compliqué, mais au moins ils reflètent la pratique de la création Web. Par exemple, nous pouvons utiliser:

  • bannière pour l'en-tête de la page globale.
  • navigation pour la navigation.
  • complémentaire pour les barres latérales.
  • contentinfo pour le pied de page.
  • principale pour la zone de contenu principale.

(N'oubliez pas que les informations sur les bannières, les informations principales et les informations sur le contenu ne doivent être utilisées qu'une seule fois par document.)

Les repères ARIA constituent une solution simple qui améliore les options de navigation pour les utilisateurs de lecteurs d'écran, sans se heurter au territoire obscur des documents HTML. Ils sont rapides et faciles à mettre en œuvre et devraient vraiment faire partie de votre modèle de projet HTML de base.

Moteurs de recherche

Nous avons donc plus de sémantique pour l'accessibilité, mais nous avons également plus de sémantique pour les moteurs de recherche.

Tout d'abord, permettez-moi d'être absolument clair que les éléments HTML5 ne présentent aucun avantage pour le référencement que ce soit. C'est un mythe, et nous devons le mettre au lit. L'utilisation d'une balise d'article ne vous aidera pas, ni votre client, à se classer plus haut que le prochain. Vous pouvez être sûr que Google a trouvé comment trouver et classer votre contenu maintenant.

Toutefois, les moteurs de recherche souhaitent comprendre comment afficher (note: pas classer ) le contenu Web de manière plus structurée.

Par conséquent, au fil des ans, les principaux moteurs de recherche ont mis au point ou adopté des méthodes standard existantes pour baliser des données structurées dans une page Web afin d’extraire les informations appropriées. Par exemple, lors de la recherche de commentaires, vous avez peut-être remarqué que les évaluations par étoiles apparaissent dans les meilleurs résultats de Google. Il s’agit d’un cas où les moteurs de recherche peuvent extraire le score de la revue de manière standardisée et améliorer l’affichage de leurs résultats. Les recettes sont un autre exemple où le temps de cuisson est indiqué pour chaque résultat. Bien que ces données n'améliorent pas le classement d'un site, le résultat plus détaillé peut inciter un plus grand nombre d'utilisateurs à cliquer, il y a donc un avantage potentiel pour un site, et il est souvent nécessaire dans une course à l'armement où tous vos concurrents le font. en tous cas.

Alors que ce type de données riches existe depuis un certain temps sous diverses formes, l’année dernière, les principaux moteurs de recherche lancé un vaste éventail de normes pour ce type de données structurées. Ils les appellent des «schémas» et ils sont hébergés à Schema.org . Ils utilisent la norme de microdonnées de HTML et ont déjà été mis en œuvre par eBay, IMDB, Rotten Tomatoes, etc.

C'est le plus grand pas en avant vers un web plus sémantique depuis des années, et pourtant cela a été fait à huis clos avec peu de fanfare et aucun processus normatif. Il a été déposé sur nous sans avertissement, et a principalement volé sous le radar de la communauté de conception de sites Web. Il y a beaucoup de chevauchement avec la sémantique HTML5 aussi, par exemple il y a des schémas pour des articles , web des pages et web éléments de la page , parmi beaucoup plus de schémas qui incluent tout de Épisodes télé à les conditions médicales . C'est aussi la manière recommandée de décrire des vidéos sur le web.

Après tout le débat sur la sémantique de HTML (et son absence), les moteurs de recherche ont clairement fait savoir qu'ils souhaitaient disposer de beaucoup plus de données sémantiques dans notre balisage, mais sur des structures existantes, et non sur de nouveaux éléments.

Mais pour nous, en tant que communauté intéressée par la sémantique et les standards du Web, l’approche imparfaite de HTML en matière de sémantique ou l’approche fermée des grands moteurs de recherche n’est pas la meilleure voie à suivre.

À certains égards, le cheval de sémantique HTML5 s’est brouillé; c'est à nous de contenir les dégâts. En ce qui concerne schema.org, c'est un tout nouveau monde, et nous devrions l'examiner de très près, ou un autre petit groupe va déterminer ce qui est dans notre intérêt - et celui du Web - pour nous. En fait, c'est peut-être déjà arrivé.

Conclusions

Terminons avec quelques conclusions.

  • Les rubriques sont importantes: en premier lieu, nous devons vraiment nous préoccuper de la structure de nos pages pour aider les utilisateurs aveugles ou malvoyants à essayer de se déplacer avec des lecteurs d'écran. Les vénérables éléments h1-h6 peuvent être limités, mais ils sont fortement sollicités par les utilisateurs de lecteurs d'écran.
  • La structure HTML5 est un gâchis: nous devrions probablement ignorer complètement les éléments structurels HTML. Ils ont été un peu un désastre - nous avons essentiellement fourchu les spécifications, créé beaucoup de contours brisés et gaspillé trop de temps à essayer de nous faire une idée d'un système fondamentalement cassé. Vive les divs.
  • Considérer les repères ARIA: l' ajout de repères ARIA à votre site est un autre moyen simple et efficace d'aider les utilisateurs de lecteurs d'écran.
  • Considérez schema.org et l'avenir de la sémantique: schema.org est soutenu par les principaux moteurs de recherche, et même s'il s'agit certainement d'un casse - tête pour le moment, il semble que l'avenir des données structurées sur le Web soit futur.

La spécification HTML5 comporte de nombreuses parties intéressantes, allant des nouvelles fonctionnalités de formulaires à l’implication de l’API de l’historique et de Canvas. En fait, sans le WHATWG, qui a été le moteur de HTML5, nous serions toujours coincés avec HTML4 / XHTML 1.0 alors que nous attendions que le W3C agisse ensemble. Néanmoins, le fait que HTML5 et toutes les technologies connexes soient nouvelles et passionnantes ne signifie pas que nous devons accepter tout ce que nous avons reçu.

Parfois, cela vaut la peine de voir comment la saucisse HTML est faite, donc nous savons ce que nous mangeons. Et dans le cas de la sémantique structurelle de HTML, je préfère passer.

Envie de plus? Le livre de Luke "The Truth About HTML5" est disponible pour un temps limité sur notre site partenaire MightyDeals.com à un incroyable 50% de réduction.

Avez-vous utilisé les repères ARIA ou Schema.org? Voyez-vous un avenir pour les éléments structurels de HTML5? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, utilisations image de structure via Shutterstock.