Pourquoi s'embêterait-il de marquer correctement et sémantiquement?

_{Notez que j'essaie de marquer aussi sémantiquement que possible parce que j'aime leur apparence et leur apparence, mais pas parce que je connais d'autres avantages renversants. Le but de ma question est de pouvoir éduquer les autres}

Eh bien, j'ai vu beaucoup d'articles et de tutoriels qui déclarent souvent "marquons cela de la manière la plus sémantique possible".

Mais une pensée étrange m'est venue, pourquoi?

Pourquoi aurait-on besoin (ou envie) de se préoccuper des éléments spécifiques qui transmettent le sens sémantique correct? Plus précisément, je fais référence aux nouveaux éléments HTML5, tels que <time>, <output>ou <address>. Surtout si la page "fonctionne" (elle rend bien dans tous les navigateurs).

Pourquoi voudrais-je utiliser des éléments comme <time>ou <address>, où rien (ou au pire cas, un générique <span>) ne fonctionne aussi bien?

Je pose la question parce que je vois une multitude de sites Web (très populaires) (y compris celui-ci) qui ne suivent pas ces soi-disant meilleures pratiques.

Fonctionnalité gratuite

Utiliser correctement <label>s signifie que vous pouvez cliquer sur l'étiquette pour entrer dans le champ de texte. Selon les spécifications officielles, de nombreux navigateurs ajoutent des fonctionnalités logiques par défaut à de nombreuses balises, ce qui signifie que vous pouvez utiliser moins de plugins JavaScript et écrire moins de code qu'un site entièrement constitué de <div>s et <span>s.

Accessibilité

En ce qui concerne la fonctionnalité gratuite, la sémantique compte beaucoup pour les logiciels de lecture d'écran. Le texte devant un champ de saisie ne sera pas lu de la même manière qu'un <label>testament. Les lecteurs d'écran vont ignorer la plupart de vos CSS, donc cela dépend principalement de la structure de votre HTML.

CSS logique

Pourquoi utiliser un div #headerquand vous pouvez utiliser un <header>style et directement? Les étiquettes sémantiques facilitent le marquage et rendent votre style beaucoup plus portable. Si vous avez un certain style à rayer et que vous utilisez toujours des <del>éléments, le style est beaucoup plus portable. <del>signifie la même chose pour tout le monde, mais chacun nommera sa .deletedTextclasse différemment.

Cela aide également à garder tout le monde sur la même page dans les grands projets; personne n'aime apprendre les conventions de nommage des classes ésotériques des autres.

SEO

Les moteurs de recherche tels que Google ont eu de plus en plus recours au HTML sémantique et aux métadonnées . Les extraits enrichis de Google utilisent également des métadonnées spéciales destinées à véhiculer un contenu sémantique.

Pourquoi ce n'est pas si commun

Cela prend du travail, et les gens sont habitués à juger un site Web en fonction de son apparence et de son fonctionnement . Souvent, la sémantique n’est pas prise en compte, car les personnes qui rédigent le dossier d’affaires pour les applications ne le comprennent pas ou pourquoi il est important.

Il est très difficile aux personnes non techniques de comprendre ou d’évaluer la sémantique HTML.

Si un site Web a l'air bien et qu'il semble fonctionner, pourquoi s'inquiéter? Beaucoup de gens ne savent peut-être même pas qu'il n'y a rien de plus. Semblable à l'accessibilité, cela a tendance à être ignoré jusqu'à ce que quelqu'un de votre équipe comprenne vraiment cela.

Si vous voulez que le HTML sémantique soit une priorité pour votre projet, vous devez en présenter le cas. Il est également utile de montrer à votre équipe / responsable le fonctionnement de votre site Web à l'aide d'un lecteur d'écran.

La réponse à cette question est simplement de transmettre des informations et de structurer votre document .

Lorsque vous utilisez des étendues et des divs, votre document n'a pas de structure. Il n'y a pas de listes, pas de paragraphes, pas de tableaux, pas de liens hypertextes. Rien. Il est inutile de choisir HTML comme langage de balisage et d'ignorer le vocabulaire qu'il offre pour exprimer et structurer votre contenu. La structure est le mot important ici. HTML est pour structurer ne pas afficher. C'est ce que CSS est pour.

Si vous balisez votre code de manière sémantique, vous donnez aux lecteurs humains ainsi qu'aux machines une chance de comprendre les données contenues dans vos éléments. Si vous utilisez des éléments span et div jusqu'au bout, vous ne disposerez pas de ces informations supplémentaires et il ne sera peut-être pas possible de les déduire à partir des valeurs.

De même, si je veux gratter des sites Web et extraire uniquement les titres pour créer une table des matières, mon araignée doit savoir quel est le titre. Il ne peut le faire sans les éléments appropriés.

Enfin, si vous n'utilisez que des divs et des span, vous aurez du mal à les dénommer avec CSS. Les sélecteurs CSS travaillent sur la structure de votre document. Si les structures sont généralement ambiguës, les règles CSS s’appliquent. Comment décidez-vous s'il div div divfait vraiment référence à table tr tdou body ul li? Vous devrez alors ajouter des classes et des identifiants, mais vous réinventez la roue.

Voir aussi la recommandation du W3C

L'utilisation des éléments sémantiques appropriés garantira que la structure est disponible pour l'agent utilisateur. Cela implique d'indiquer explicitement le rôle des différentes unités dans la compréhension de la signification du contenu. La nature d'un contenu en tant que paragraphe, en-tête, texte souligné, tableau, etc. peut être indiquée de cette manière. Dans certains cas, les relations entre les unités de contenu doivent également être indiquées, par exemple entre les titres et les sous-titres, ou parmi les cellules d'un tableau. L'agent utilisateur peut alors rendre la structure perceptible pour l'utilisateur, par exemple en utilisant une présentation visuelle différente pour différents types de structures ou en utilisant une voix ou une hauteur de ton différente dans une présentation auditive.

Pour ajouter aux réponses déjà bonnes ici, une chose que je n'ai pas vue mentionnée est la compatibilité en aval . À mesure que la spécification évolue, il est possible que des fonctionnalités supplémentaires soient spécifiées pour certains éléments sémantiques. Si votre code est sémantiquement correct, il pourra tirer parti de cette fonctionnalité sans entretien ou avec une maintenance minimale.

Une des raisons pour lesquelles vous ne voyez pas beaucoup de sites suivre la sémantique à la perfection est qu’il n’ya souvent pas d’analyse de rentabilisation. Si cela génère des ventes (ou une catégorie connexe telle que l'exposition), écrire du code HTML sémantique vaut alors la peine.

Le meilleur des cas que je puisse faire pour une utilisation sémantique des balises est lorsque vous consommez ou utilisez HTML avec un outil. Par exemple, l’utilisation de balises sémantiques vous permet de styliser directement des éléments sans craindre d’ajouter ou de supprimer des styles. En outre, si vous devez analyser le code HTML à l'aide d'un scraper ou de tout autre outil similaire, vous apprécierez certainement un code HTML bien formé et sémantique, car il devient plus facile d'écrire des requêtes XPath et DOM pour trouver ce dont vous avez besoin.

Je devrais noter que les classes ne remplacent pas directement les tags sémantiques. J'ai des classes réutilisables [error, information, warning]qui véhiculent des significations différentes et donc des styles basés sur l'étiquette à laquelle elles sont attachées.

Parce que cela peut être utile ou nécessaire pour les robots d'exploration et les services Web (ordinateurs AKA communiquant avec des ordinateurs). Si vous écrivez:

<span class="time">Sep 16 at 2:17</span>

... le robot d'exploration Web ne comprendra pas nécessairement qu'il s'agit d'une date, d'une heure. Ou il sera beaucoup plus difficile de le localiser comme une date.

Si tu utilises:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... il sera beaucoup plus facile pour tout robot d'exploration de rechercher et d'analyser les éléments.

Quand je parle de crawlers, je ne parle pas nécessairement des moteurs de recherche :)

Je dirige une petite société de conseil Web et notre approche actuelle consiste à ne pas utiliser les nouvelles balises HTML5, car nous essayons d’équilibrer de nombreux facteurs. Dans ce cas, l’équilibre est entre facilité d’utilisation, facilité d’utilisation et référencement:

• SEO: Quelles autres réponses ici ont dit - cela pourrait aider un peu pour le référencement, bien que, d'après mon expérience, plus une stratégie de référencement est évidente, moins elle a de chances d'aider.

• Facilité d'utilisation n ° 1: il est raisonnable de supposer que les balises HTML5 confèrent un avantage en termes de convivialité. Pour les utilisateurs non-voyants, il est certain que tout ce que leur navigateur accessible leur offrira sera meilleur que tout ce que je pourrai fournir. Pour votre utilisateur typique, c'est beaucoup plus discutable. L’utilisation d’un lecteur multimédia non spécifique fourni par votre navigateur est peut-être plus facile à utiliser que le widget moins familier que je mettrais autrement. Ou peut-être que la valeur par défaut de votre navigateur est la merde (comme la façon dont le lecteur MP3 par défaut de Chrome Windows cesse de fonctionner de temps en temps).

• Ergonomie # 2: Ancien IE. Le vieil IE nécessite un tas de shims HTML5 qui gonflent la page pour que chacune de ces balises fonctionne. Vous devez ajouter un script aux balises head qui appelle CreateElement () en boucle sur toutes les balises HTML5 que vous utilisez. Si vous ne voulez pas combiner chaque page pour les balises que vous utilisez, cela signifie chaque balise HTML5. Cela doit être exécuté sur chaque page, en ligne, ce qui signifie aucune mise en cache. Et mauvaise nouvelle: le vieil IE est le plus lent à exécuter le javascript, il crée donc une belle petite secousse pendant le chargement. Ensuite, vous devez insérer dans un tas de vieux scripts JavaScript et CSS, et souvent Flash, exclusivement pour IE, afin que tous les nouveaux éléments non pris en charge s'affichent correctement. Vous pouvez utiliser la fonction de détection avant de décider de charger l'ancien code IE, mais alors vous ' Faire en sorte que les anciens utilisateurs d'IE attendent que suffisamment de scripts soient chargés pour que cette fonctionnalité soit détectée avant même de commencer à demander tout ce qui permet à ces balises de fonctionner. Vous pouvez détecter les navigateurs et envoyer uniquement les anciens éléments d'Internet Explorer aux utilisateurs de ces navigateurs, mais cela peut rendre la mise en cache difficile ou impossible en fonction de votre plate-forme. Fournir un code différent à différents utilisateurs signifie également que les tests sont plus compliqués - avez-vous déjà un bogue d'asynchronisme? Que diriez-vous d'un qui ne se produit que sur un navigateur spécifique? Et seulement en production? Enregistre-moi. Donc, vous allez probablement envoyer ce fardeau à tout le monde. Fournir un code différent à différents utilisateurs signifie également que les tests sont plus compliqués - avez-vous déjà un bogue d'asynchronisme? Que diriez-vous d'un qui ne se produit que sur un navigateur spécifique? Et seulement en production? Enregistre-moi. Donc, vous allez probablement envoyer ce fardeau à tout le monde. Fournir un code différent à différents utilisateurs signifie également que les tests sont plus compliqués - avez-vous déjà un bogue d'asynchronisme? Que diriez-vous d'un qui ne se produit que sur un navigateur spécifique? Et seulement en production? Enregistre-moi. Donc, vous allez probablement envoyer ce fardeau à tout le monde.

Jusqu'à ce que IE8 décède, la valeur de ces nouvelles balises HTML5 n'est tout simplement pas assez élevée pour les problèmes de performances qu'elles apportent. Nous n'avons pas encore travaillé avec un public où il est presque mort *, mais un jour.

* Nos statistiques les plus récentes indiquent IE8 à 6% pour le site avec le moins de visiteurs IE8 et 24% avec le plus de visiteurs IE8. Loin, loin d'être mort.

La réponse courte est «Pas de bonne raison en pratique». Presque tous les arguments avancés en faveur du balisage «sémantique» ne sont que des pensées sur ce qui pourrait ou devrait se passer plutôt que sur quelque chose de tangible. Par exemple, les moteurs de recherche sont souvent appelés, mais il n'y a aucune preuve publique de leur prise en charge du moins timeou outputou address.

Indirectement, nous pouvons en déduire qu'ils ne s'en soucieront pas dans un avenir prévisible. Le site schema.org , de la part de certains des principaux moteurs de recherche, privilégie clairement une approche spécifique du «balisage sémantique» basée sur quelque chose de complètement différent, à savoir les microdonnées ( itemscopeet attributs associés). Et ils le font principalement pour les grands sites commerciaux ou communautaires.

Utiliser spanou divfonctionner plus bien que les nouveautés HTML5, ces dernières n'étant pas reconnues par les anciennes versions d'IE, même aux fins de stylisation. Vous avez donc besoin de quelques ruses pour les faire «fonctionner» même en tant qu’éléments de conteneur.

Cependant, certains éléments «sémantiques» ont une signification réelle qui leur est attribuée par les navigateurs, les logiciels d'assistance ou les moteurs de recherche. L’utilisation h1du titre principal a toujours été une bonne pratique pour de telles raisons. L'utilisation labeld'étiquettes de champs de formulaire a un impact réel sur la facilité d'utilisation et l'accessibilité. Etc; voir Le guide pragmatique de HTML: Principes .

HTML n'est pas simplement un langage d'interface utilisateur, c'est aussi un langage de structuration de données. Il a été conçu pour aider les machines hétérogènes à identifier de manière commune le type d’informations à venir du serveur. D'où tant de tags différents. Les pages HTML doivent être considérées comme des structures de données.