5568 sujets

Sémantique web et HTML

Hello à toutes et à tous.
J’ai publié un article que je soumets (en résumé) ici à votre sagacité.
Son objet ?
L’utilisation des balises dites « sémantiques » et des balises typographiques pour « parler » à la fois avec les moteurs de recherche et les lecteurs internautes.

Je précise quels sont les types de balises HTML et leur raison d’exister :
- Les balises d'indications (ces fameuses balises dites « sémantiques ») : abbr, blockquote, strong etc.
- Les balises de fonctions : a, div, form etc.
- Les balises de structure : Hn, p, ul, table, etc
- Les balises typographiques : b, i, tt

Prenons ce texte
http://pix.nofrag.com/9/6/3/e61b8c69030525564241444be1a4d.png
et son code :

<h1>Le rédacteur Web</h1>
<p><strong>Le rédacteur Web</strong> (<em>Homo textus</em>) est
un <strong>mammifère</strong> omnivore de l'ordre des hominidés, 
qui écrit des textes devant son ordinateur en se signalant par 
des volutes de fumée qui s'échappent du foyer de sa pipe.<br />
Le rédacteur Web est considéré, à raison, comme un <strong>
obsédé textuel</strong>.</p>

L'intention de l'auteur est de faire mémoriser par le lecteur 5 mots :
« rédacteur Web » « mammifère » « obsédé textuel »
Ce dernier retiendra donc qu'un rédacteur Web est un mammifère obsédé textuel.

Mais ce marquage pose 2 problèmes :

1. Les moteurs de recherche ne saisissent ni l'humour, ni le second degré. Comment lui indiquer les mots qu'il doit retenir ?
D'autant plus que dans la famille des balises d'indication Smiley joke n'existe pas.
2. « Homo textus » utilise la balise Smiley em pour le passage en italique car c'est une convention que de mettre en italique un terme d'une autre langue.
Or, cette balise est une balise d'indication pour dire au moteur que c'est un mot important. Comment lui dire ne pas le relever ?

L'auteur va jouer au « jeu des 4 familles » et va composer son texte pour que celui-ci soit retenu par le lecteur ET le moteur :

1. Dans la famille balises d'indications, je veux le (em et le strong
2. Dans la famille des balises typographiques, le (b et le i)

Il va définir un style de police normal pour les 2 balises d'indication :
   1.  strong {font-weight:normal}
   2. em {font-style:normal}

Puis, reprendre son marquage :
<h1>Le rédacteur Web</h1>
<p><strong><b>Le rédacteur Web</b></strong> (<i>Homo textus</i>) 
est un <b>mammifère</b> omnivore de l'ordre des hominidés, 
qui <strong>écrit des textes</strong> devant son <strong>
ordinateur</strong> en se signalant par des volutes de fumée 
qui s'échappent du foyer de sa pipe.<br />
Le rédacteur Web est considéré, à raison, comme un <b>
obsédé textuel</b>.</p>

L'aspect visuel sera exactement le même, mais le robot retiendra de ce texte :
« rédacteur web » « écrit des textes » « ordinateur »
L'objectif est atteint.

Je parle ensuite de raffinements techniques mais c'est un détail.

Quand j'ai travaillé à préparation de l'article je me suis posé la question du long-terme. Et bien sûr, c'est dans la perspective d'HTML 5 que l'enjeu se situe.
À la lecture de ce paragraphe (sur la page du W3C, « HTML 5 differences from HTML 4 ») :
a écrit :
The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.

j'ai été conforté dans l'idée que structurer ces textes pour remplir ce double objectif que d'être bien compris par l'internaute et par les moteurs de recherche était pertinent.
Certains sont dubitatifs.
Et vous ?

PS : l'intégralité de l'article sur trouve à cette adresse, -http://www.hiseo.fr/optimisations/html-un-langage-descriptif/
Modifié par Sventovit (01 Jul 2008 - 14:10)
Et les synthétiseurs vocaux que l'on peut paramétrer pour hausser la voix quand ils trouvent un strong ou un em, tu en fais quoi ??
ET les navigateurs texte en ligne de commande, ils mettent quoi en évidence ? les strong et les em, et pas les b et les i, évidemment, parce que b et i relève uniquement de l'esthétique.

Donc à mon avis ton truc est un peu faussé. En plus j'ai l'impression que tu cherches un peu à « gruger » les moteurs. S'ils ne comprennent certes pas l'humour, l'être humain qui tombera sur ta page depuis un moteur le comprendra très bien lui. Je ne vois pas où il y a un problème et en quoi il faut différencier les moteurs des autres.

Voilà, ce n'est que mon avis, mais j'entre dans la lignée de ceux qui sont dubitatifs. Si I est parfaitement adapté pour indiquer un nom latin qui n'a pas d'autre valeur sémantique que l'italique (on le fait par convention), strong et/ou em indique une certaine importance qu'il n'y a pas lieu de cacher. C'est important pour tout le monde, ou pour personne. Ca ne dépend pas du type de lecteur, mais du message que le rédacteur a voulu faire passer.
On pourrait rajouter comme cas de figure la lecture dans un navigateur graphique, CSS désactivées. Ou encore (cas bien plus courant) la lecture dans un agrégateur de flux RSS/Atom.

Mais même si la méthode était «parfaite», il me semble que ça resterait une tentative finaude pour gruger les moteurs. Certes pas aussi radicale que du texte caché ou des H1 et H2 affichés en texte normal (ou des liens internes planqués de la même façon, tiens...), mais ça reste un traitement différencié des moteurs et des visiteurs. Quand on ne mâche pas ses mots, ça s'appelle du spamdexing. Smiley cligne
Le problème avec les astuces pour moteurs c'est que ça nécessite de créer du code supplémentaire et le jour où l'algo change on se retrouve avec plus de problèmes qu'avant Smiley smile L'idéal est de considérer Google et les autres comme des utilisateurs normaux et attendre patiemment qu'ils se comportent comme tels. Pour les changements de langue qui nécessitent ponctuellement de l'italique purement formelle (présentation graphique) on a <span lang="EN-en" style="font-style:italic"> qui n'"emphase" pas l'extrait.
Ou mieux:
<span lang="en">whatever</span>

span[lang=en],
span[lang=la] {
	font-style: italic;
}

(Et tant pis pour IE6. Smiley cligne )

En passant, c'est pas HTML5 qui réhabilite l'élément I en en faisant un élément «sémantique», indiquant une variation dans la tonalité du discours?
Hop: http://www.w3.org/TR/html5/text-level.html#the-i

En HTML5, selon ce brouillon, on écrirait donc plutôt:
<i lang="en">whatever</i>

(Ce que je fais déjà pour ma part.)
Modifié par Florent V. (06 Jul 2008 - 11:47)
...accessoirement le fait qu'il existe un font-style:oblique à côté du font-style:italic m'a toujours semblé assez flou. Autant en print je comprends la différence (une italique est dessinée autrement que la roman, alors qu'une oblique est une roman dessinée penchée), autant sur le web ça me paraît plus ésotérique.
Sur le coup les specs avancent que :
a écrit :
Le style de police précise l'aspect dans lequel doit être rendu le texte, normal, italique ou oblique. La désignation italic indique un aspect plus incliné que celui du texte normal, mais pas aussi incliné qu'une écriture manuscrite. La dénomination oblique, une forme penchée de l'aspect normal, est plus couramment employée dans les familles de police sans serif. Ces définitions évitant de qualifier une police normale légèrement penchée d'oblique ou une police normale en caractères grecs d'italique ;


a écrit :
oblique
Spécifie une police dite oblique dans la base de données de police de l'agent utilisateur. Les polices dont le nom contient les mots Oblique, Slanted ou Incline sont typiquement étiquetées 'oblique' dans la base de données de police de l'agent utilisateur. Celles avec ce label ayant pu avoir été obtenues électroniquement en inclinant une police normale ;
italic
Spécifie une police dite italique dans la base de données de police de l'agent utilisateur, ou, s'il n'y en a pas, une avec un label 'oblique'. Les polices dont le nom contient les mots Italic, Cursive ou Kursiv seront typiquement étiquetées 'italic'.

Faire appel au dessin disponible dans la base de données polices de l'UA me paraît hasardeux puisqu'on ignore a priori de quoi elle est constituée. Du coup "italic" ou "oblique", si ils font appels à des étiquetages différents, ne garantissent en rien une différentiation de l'affichage, et donc utiliser l'un ou l'autre est strictement équivalent puisqu'on ne sait au final ce que l'UA décidera d'utiliser ?

(edit) ou doit-on comprendre que "oblique" étant plus restrictif que "italic" -- puisqu'"italic" palliera à l'absence de version "oblique" -- c'est cette dernière qui sera utilisée prioritairement, auquel cas on ne voit pas bien à quoi "oblique" sert ?
Modifié par Arsene (07 Jul 2008 - 14:19)
Tiens j'avais pas vu ce topic. Je suis d'accord avec ce qui a été dit c'est à Google ( et autres ) de s'adapter aux pages et non l'inverse.
Florent V. a écrit :
(...)Quand on ne mâche pas ses mots, ça s'appelle du spamdexing. Smiley cligne

eh bien avec le recul je peux affirmer maintenant que loin d'être considérées comme des tentatives de spamming mes pages ont été mieux appréciées par les moteurs.