Balises HTML, structure, sémantique et SEO

[HawkEye]

...Pourquoi, comment respecter la sémantique des balises et structurer votre page correctement ?...

Un article sympa à lire sur HiSEO, et qui peut s'avérer très utile à certains.

[Hiseo]

Tu m'as bien eu Hawk !

[druart]

Merci Hawk de nous faire partager ce lien.

En ce qui me concerne il est en plein dans ma tasse de thé du moment (enfin si tant est que ma Dame ne casse pas toute la vaisselle)

Me voilà bien fourni en lecture désormais.

A moi les aspirines !

[elcantar]

Merci pour ce lien,

Article intéressant ! -> +1 reco

[Musimo]

Félicitations pour ton blog Hiseo

NB: J'apprécie le mémento du référencement!

[Hiseo]

Merci Musimo

[tonguide]

Très intéressant, surtout les exemples qui sont plutôt bien réussi et explicite.

Par contre, entre <i> et <em> au dernière nouvelle, je pensais que ça ne changé pas grand chose, et pareil pour <b> et <strong> (ça a peut-etre changé depuis, je lis plus bcp d'actu ref.)

[Hiseo]

Par contre, entre <i> et <em> au dernière nouvelle, je pensais que ça ne changé pas grand chose, et pareil pour <b> et <strong> (ça a peut-etre changé depuis, je lis plus bcp d'actu ref.)

c'est ce quelqu'un d'autre m'a fait remarquer aussi en mettant en garde même sur le fait de « masquer » l'aspect visuel de ces balises (em et strong) pouvait constituer un risque : le moteur considérant qu'on cherche à le tromper.
Le problème c'est que ni lui ni moi n'avons trouvé (pour ce qui concerne Google) d'informations précises sur ce point.

[tonguide]

ok, parce que sinon, sémantiquement, c'est vrai que ton article est bon, mais est-ce que google l'entend de la même façon, c'est pas une certitude.

Il faudrait faire des tests, mais ça doit pas être simple à prouver par A+B

[Marie-Aude]

c'est ce quelqu'un d'autre m'a fait remarquer aussi en mettant en garde même sur le fait de « masquer » l'aspect visuel de ces balises (em et strong) pouvait constituer un risque : le moteur considérant qu'on cherche à le tromper.
Le problème c'est que ni lui ni moi n'avons trouvé (pour ce qui concerne Google) d'informations précises sur ce point.

Je ne crois pas que ce soit un danger de "masquer" l'aspect visuel, étant donné que cet aspect visuel est, comme tous les autres, une pratique par défaut dans les feuilles de style des moteurs.
Masquer "tout" aspect visuel (y compris pas une partie purement graphique, comme une image, pourrait effectivement être un abus, mais :
1- amha l'interprétation des css n'est pas encore poussée à ce point là
2- il faut de toutes façons une vérif manuelle : ce n'est pas parce qu'un strong n'est pas en gras qu'il n'est pas mis en évidence.

[Hiseo]

@ tonguide
s'il y a risque il est tout de façon mesuré tant qu'il n'y a pas d'abus d'occurrences de mots clés.
Il ne s'agit pas de web-spammer les moteurs mais de leur parler du sujet de l'article tout en ayant un aspect visuel qui « parle » au lecteur

@ marie-aude
je crois que Google devenant un peu parano avec les abus qu'il a pu détecter interprète tant le code que la CSS de manière très fine maintenant.

[Marie-Aude]

Je suis allée voir ton exemple en détail, et je t'ai répondu sur ton blog.

Je crois que ce que tu montres n'est pas un marquage sémantique c'est juste remplacer <b> par .gras, mais basiquement c'est toujours la même chose, un marquage uniquement pour l'apparence.

Baaaaaaaaaaaad

[Hiseo]

ah ! crotte de crotte !
Marie-Aude, le commentaire que tu as déposé sur le blog (je t'en remercie d'ailleurs) a été rendu incompréhensible car les balises ont été interprétées.
(mémo pour moi-même : faudra tu te penches sur ça d'ailleurs, gars)

1 000 excuses donc.

Pourrais-tu le reposter dans le sujet pour qu'on puisse en débattre ici ?
Voici ce que j'ai pu récupérer :

Pour poursuivre la discussion du forum, je pense que la balise doit correspondre à quelque chose de visuel, mais pas obligatoirement du caractère gras.

En revanche, je ne vois pas l'intérêt de remplacer le par .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

On peut dans ton exemple utilement remplacer le par la balise qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.


la sémantique c'est mon
truc
est inutilement compliqué :

la sémantique c'est mon
truc t'évite deux balises. A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication

Enfin quand je triture les balises, je me pose toujours la question "est ce que le rendu par un navigateur sans css sera équivalent à celui de ma page stylée ?" et ici ce n'est pas le cas. Un navigateur parlant fera l'emphase sur les mots en "strong" et pas sur ceux en .gras

Avec mes remerciements, je te prie d'agréer l'expression de mon sentiment le plus... le plus...
(voix Off :
- le plus quoi ?
- euh...
- et c'est qui cette Marie-Aude d'abord ?
- Mais Chérie...)

Bon je dois vous laisser Marie-Aude : j'ai un problème « sémantique » avec mon épouse...

ÉDITÉ :
Raison de l'édition : la balise Alt de prétendait que Marie-Aude était un Smiley :

je suis un smiley

[Marie-Aude]

Bon allons y

Pour poursuivre la discussion du forum, je pense que la balise doit correspondre à quelque chose de visuel, mais pas obligatoirement du caractère gras.

En revanche, je ne vois pas l'intérêt de remplacer le par <strong> par une classe .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

On peut dans ton exemple utilement remplacer le <em> par la balise <cite> qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.

Code: Tout sélectionner

<p>Eh oui, <strong><span class="gras"> la sémantique</span> </strong> <span class="gras">c'est mon
truc</span>.</p>

est inutilement compliqué :

Code: Tout sélectionner

<p>Eh oui, <span class="gras"><strong> la sémantique</strong>c'est mon truc</span>.</p>

A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication C'est d'ailleurs pourquoi je n'aime pas les éditeurs visuels, de type TinyMCE qui ont souvent la balisite aigüe.

Enfin quand je triture les balises, je me pose toujours la question "est ce que le rendu par un navigateur sans css sera équivalent à celui de ma page stylée ?" et ici ce n'est pas le cas. Un navigateur parlant fera l'emphase sur les mots en "strong" et pas sur ceux en .gras

Pour la peine je vais compléter maintenant

Je pense surtout que toute cetet gymnastique est inutile.
Dans ce cas, mettre la phrase qui doit apparaître en gras entièrement dans les balises strong n'est pas négatif. Cela correspond à une réalité (tu veux souligner cela) et l'ensemble des mots mis en évidence participe au contenu sémantique.

Contenu sémantique riche -> un peu plus que "juste les mots clés" -> meilleur référencement

[Hiseo]

Bon allons y
En revanche, je ne vois pas l'intérêt de remplacer le par <strong> par une classe .gras. En faire une classe ne change pas le "problème de fond" qui est d'avoir un marquage purement de style, et pas de contenu.
La classe .gras n'a aucune sémantique

Bien sûr. Mais ce n'est pas ce je dis. C'est de remplacer <b> par <span class="gras">

On peut dans ton exemple utilement remplacer le <em> par la balise <cite> qui est aussi par défaut en italique le plus souvent, et qui est beaucoup plus proche sémantiquement parlant de ton contenu.

Là tu vas faire hurler le W3c
La balise <cite> a une grande valeur sémantique dans la mesure où elle désigne une source dans une citation :

<blockquote cite="http://www.monsite.fr/citation.htm">
<p>
<cite title="Author">Lui.</cite>
<cite title="Title" lang="fr">
<q>
<a href="http://www.monsite.fr/citation.htm" hreflang="fr">
La sémantique c'est mon truc</a></q></cite>.
<cite title="Le site de MonSite" lang="fr">Mon Site</cite>.
<cite title="Date">Juin 2008</cite></p>
<p><q lang="fr">
C'est la sémantique-tique du rédacteur (a chanter sur l'air du « La Tagadac-tac-tique du Gendarme » par Bourvil)</q></p>
</blockquote>

Code: Tout sélectionner

<p>Eh oui, <strong><span class="gras"> la sémantique</span> </strong> <span class="gras">c'est mon
truc</span>.</p>

est inutilement compliqué :

Code: Tout sélectionner

<p>Eh oui, <span class="gras"><strong> la sémantique</strong>c'est mon truc</span>.</p>

A priori, le fait de répéter côte à côte les même balises prouve une mauvaise imbrication

Certes. L'exemple est poussé au bout de la logique qui atteint ses limites : celles de l'imbrication. Tant de code pour si peu de mots.
C'est du raffinement comme je l'écrivais et cela pour suivre la recommandation du W3C sur l'emphase :

Text markup : Emphasis - in HTML Techniques for Web Content Accessibility Guidelines 1.0 - W3C novembre 2000 : -http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-emphasis