5568 sujets

Sémantique web et HTML

Bonjour. Voilà, tout est dans le titre. C'est une question que je me pose depuis longtemps. J'ai passé ma journée d'hier à scruter le code source des meilleurs et plus grands sites/blogs sur les standards ou conformes aux standards et on peut dire que l'usage des métadonnées dans le <head> des pages XHTML est très variable.

Alors ma question est simple : quelles métadonnées sont vraiment nécessaires et utiles aujourd'hui ? d'abord du point de vue de la sémantique stricte et de l'accessibilité globale ? et ensuite, bien sûr, du point de vue des moteurs de recherche ? Quelles sont les balises <meta> standards (si ça existe) ?

Merci de vos lumières car autant on trouve quantité de ressources sur XHTML/CSS, autant elles concernent toujours la partie <body> et, sur le <head>, je ne trouve rien d'approfondi, détaillée et fiable, ni ici ni ailleurs, qui dise exactement ce qu'il est recommandé de faire avec les balises <meta>, aujourd'hui, en 2008.
Modifié par piffeo (12 Jul 2008 - 10:26)
Merci. Je connaissais le billet du blog Google Webmaster Central, mais j'ai quand même trouvé dans tes 2 liens des précisions que je n'avais pas. En l'occurrence, j'ai été frappé d'apprendre qu'aucun moteur majeur n'a jamais implémenté les balises Dublin Core.

Au final, ce qui est sidérant, c'est de comprendre qu'aujourd'hui, les 2 seules balises meta qui peuvent encore jour un rôle dans l'indexation et le référencement sont <meta name="description"...> et <meta name="keywords"...> (et encore, pour cette dernière, c'est à peine certain, car Google n'en tient pas compte). Les Dublin Core sont toutes belles mais, ne servent à rien...

La question qui en résulte pour moi est : à quoi bon mettre des balises <meta>, qu'elles soient Dublin Core ou non ? à quoi bon qualifier l'information d'une page web par des métadonnées si personne ne l'indexe ? ça sert à qui ?

Autre point, j'y pense : à quoi servent toutes ces balises <link rel="..."...> que beaucoup de blogueurs et de sites utilisent dans leur <head> ? cela apporte vraiment quelque chose ? quand on examine le code source de sites bien codés aujourd'hui, c'est plutôt ces <link rel...> qu'on voit en masse, au lieu des balises <meta> : quelqu'un sait à quoi ça sert précisément ?

Merci.
Modifié par piffeo (12 Jul 2008 - 15:39)
piffeo a écrit :
Autre point, j'y pense : à quoi servent toutes ces balises <link rel="..."...> que beaucoup de blogueurs et de sites utilisent dans leur <head> ? cela apporte vraiment quelque chose ? quand on examine le code source de sites bien codés aujourd'hui, c'est plutôt ces <link rel...> qu'on voit en masse, au lieu des balises <meta> : quelqu'un sait à quoi ça sert précisément ?.
J'avais commencé à écrire un billet en rapport avec ça mais je ne l'ai jamais fini. Tu peux trouver le brouillon là : Les attributs rel et rev, créateurs de relations.
J'ai lu attentivement ton post, et je me sens dans le même cas de figure que toi : je ne comprends pas à quoi servent les tartines de balises <link rel...> qu'on trouve dans le <head> de nombreux sites -- souvent des blogs, mais par exemple aussi le site officiel du W3C -- , et j'ai tendance à faire la même conclusion que toi : actuellement, ça ne sert à rien, si ce n'est -- ajouterais-je -- à alourdir le code que doivent lire les navigateurs et outils d'indexation (ou alors à se sentir trop à-la-mode-du-W3C Smiley cligne ).

Pour mieux illustrer, comparons le <head> de 2 blogs, celui de Tristan Nitot, dont le seul nom suffit à laisser penser que son <head> signifie quelque chose, et celui de Sébastien Billard, dont la lecture m'a été conseillée un peu plus haut dans ce topic.

Le <head> du Standblog

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="MSSmartTagsPreventParsing" content="TRUE" />
  <title>Standblog</title>
  
  <link rel="contents" title="Archives" href="http://standblog.org/blog/archive" />
    <link rel="section" href="http://standblog.org/blog/category/Standards" title="Standards" />
    <link rel="section" href="http://standblog.org/blog/category/Navigateurs" title="Navigateurs" />
    <link rel="section" href="http://standblog.org/blog/category/Accessibilite" title="Accessibilité" />

    <link rel="section" href="http://standblog.org/blog/category/Politique" title="Politique" />
    <link rel="section" href="http://standblog.org/blog/category/Humour" title="Humour" />
    <link rel="section" href="http://standblog.org/blog/category/TropDeStandards" title="Trop de standards..." />
    <link rel="section" href="http://standblog.org/blog/category/StandblogBlogs" title="StandBlog et blogs" />
    <link rel="section" href="http://standblog.org/blog/category/Technologie" title="Technologie" />
    <link rel="section" href="http://standblog.org/blog/category/Cuisine" title="Cuisine" />
    <link rel="section" href="http://standblog.org/blog/category/Livres" title="Livres" />
    <link rel="section" href="http://standblog.org/blog/category/En-vrac" title="En vrac" />
    <link rel="section" href="http://standblog.org/blog/category/Mozillaeurope" title="Mozilla-Europe" />

    <link rel="section" href="http://standblog.org/blog/category/En" title="en" />
    <link rel="section" href="http://standblog.org/blog/category/References" title="Références" />
    <link rel="section" href="http://standblog.org/blog/category/Moto" title="Moto" />
    <link rel="section" href="http://standblog.org/blog/category/Environnement" title="Environnement" />
    <link rel="section" href="http://standblog.org/blog/category/Dangers-des-drm" title="Dangers des DRM" />
    <link rel="section" href="http://standblog.org/blog/category/Photo" title="Photographie" />
    
                            <link rel="previous" title="billets précédents" href="http://standblog.org/blog/page/2" />
                
                      
    <link rel="chapter" href="http://standblog.org/blog/post/2008/07/11/En-vrac" title="En vrac" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/07/08/Une-semaine-de-vrac" title="Une semaine de vrac !" />

          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/07/03/Actu-Mozilla" title="Actu Mozilla" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/28/Wouaaaah" title="Wouaaaah !" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/27/En-vrac-avant-la-fete-Firefox-3a-Paris" title="En vrac, avant la fête Firefox 3à Paris" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/27/Big-questions" title="Big questions" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/26/Visiting-the-Nerds-paradise" title="Visiting the Nerds paradise" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/26/Soiree-Firefox-3-a-Paris-le-27-juin-demain" title="Soirée Firefox 3 à Paris, le 27 juin (demain)" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/25/Openweb-a-propos-du-CSS-Working-Group-du-W3C" title="Openweb à propos du CSS Working Group du W3C" />
          
    <link rel="chapter" href="http://standblog.org/blog/post/2008/06/25/En-vrac-de-retour-de-Slovenie" title="En vrac, de retour de Slovénie" />
    
(.../...)
</head>


Comme vous pouvez le voir, y en pas mal de <link rel...> : "section", "chapter", mais on trouve aussi "bookmark" sur le site du W3C ou encore des tas de "archives" chez Fred Cavazza. La question est : à quoi ça sert ? La seule réponse que j'ai trouvée, c'est qu'un jour peut-être les navigateurs seront capables de transformer ces "relations" en un menu graphique (c'est ça ?). Et après ? Quel intérêt ? Est-ce que cela sera utile pour le référencement ? pour l'accessibilité ? pour quelque chose ? Si oui, moi je veux bien bourrer mes pages web de <link rel> mais il faudrait me donner au moins une bonne raison de le faire. Smiley langue

À l'inverse, voici le <head> minimaliste de Sébastien Billard
<head>
	<meta http-equiv="Content-Type"
	content="text/html; charset=ISO-8859-1" />
	<meta name="MSSmartTagsPreventParsing" content="TRUE" />

<title>
Référencement, Design et Cie</title>

		<link rel="alternate" type="application/rss+xml" title="RSS" href="/referencement/rss.php" />
	<link rel="alternate" type="application/xml" title="Atom" href="/referencement/atom.php" />
	<link rel="alternate" type="application/rss+xml" title="Commentaires RSS" href="http://s.billard.free.fr/referencement/rss.php?type=co" />

	<link rel="alternate" type="application/xml" title="Commentaires Atom" href="http://s.billard.free.fr/referencement/atom.php?type=co" />
	<link rel="stylesheet" type="text/css" href="/referencement/themes/sofresh/style.css" media="screen" />
	
</head>

Pas une seule <link rel...> autre que le strict nécessaire pour CSS et la syndication. Et même pas une <meta name="description">. Incroyable, non ?

Alors, moi, ma question qui persiste, c'est : à quoi bon bourrer nos <head> de <link rel> ? ou même d'autre chose ? qu'est-ce qui est vraiment utile dans un <head> ?

Merci.
Modifié par piffeo (12 Jul 2008 - 15:09)
Je suis plutôt d'accord avec le message de Laurent Denis. J'avais jamais pensé au fait de remplacer complètement les menus par ça et au final je me demande si ce serait vraiment si "merveilleux".
Imaginons que tous les navigateurs possèdent une barre de navigation comme Opera pourrait-on pour autant supprimer tous les menus des sites ? Ne serait-ce pas ennuyeux de voir toujours uniquement le contenu car les menus seraient dans la barre ?

Après une courte réflexion je pense que ça pourrait être un autre style d'internet, peut-être plus adapté au petits écrans ou aux navigateurs texte.

Pendant que j'écris je viens de penser à autre chose : y a pas une balise <menu> en HTML 5 ? Si oui alors ce nouvel internet plus sobre est tout à fait possible, on peut imaginer un navigateur qui n'afficherai que le contenu et utiliserai les relations pour reconstituer les menus dans une barre ou autre mais pour ça il faut que les relations soient indiquées dans la page.
Vient alors la question de savoir où renseigner ces relations ? Dans head via la balise <link> ou dans les menus de la page via les balises <a> ? Je penche - comme toujours - pour un mélange des deux mais en préférant la deuxième solution et en gardant la première pour compléter.

Édit : finalement un petit billet sur le sujet ça ne ferait peut-être pas de mal ...
Modifié par Changaco (12 Jul 2008 - 17:23)
<menu> a été viré de HTML 4.01 pour des raisons foncièrement stupides. Ca faisait « doublon » avec les listes ordinaires (ul/ol), alors pourquoi garder un clone inutile, c'était à peu près la réflexion que les concepteurs d'HTML 4.01 on dû faire, d'après ce que j'ai compris de ce que j'ai lu çà et là. Cette balise fait donc une apparition dans HTML5.
A propos.

Quelqu'un pourrait-il m'indiquer dans toutes les normes du W3C où apparaît la notion de "site" ? Existe t-elle seulement?

A part des liens "a", les attributs "rel" et "rev", qu'existe t-il de normalisé qui définisse un site web (une somme de documents reliés par des liens, comme tout internet Smiley cligne ) ? C'est quoi le web sans URI ?

A méditer (malgré la traduction pénible à lire): Architecture du World Wide Web
Modérateur
Igor a écrit :
Quelqu'un pourrait-il m'indiquer dans toutes les normes du W3C où apparaît la notion de "site" ? Existe t-elle seulement?
Il n'y a pas de notion de site mais plutôt de ressource et d'URI, chaque ressource pouvant (ou non) contenir plusieurs autres ressources.

Après, pour ce qui est de la notion de site web, c'est en quelque sorte une (collection de) ressource(s) disponible(s) sur le réseau à une URL donnée et définie par un unique propriétaire.
a écrit :
A part des liens "a", les attributs "rel" et "rev", qu'existe t-il de normalisé qui définisse un site web (une somme de documents reliés par des liens, comme tout internet Smiley cligne ) ?
HTTP.

... et, pour être plus précis, pas "comme tout internet" mais comme tout le web : une des applications d'internet.
a écrit :
C'est quoi le web sans URI ?
Une erreur 404. Smiley lol
Administrateur
Bonjour,

Dublin Core> j'imagine que dans le monde de SGML, des bibliothèques au sens large (médiathèques et cie, là où on entasse, conserve, trie et expose/retrouve/prête/publie des milliers de "trucs"), de la documentation de 120 000 pages en 45 langues (un groupe pharmaceutique mondial, la NASA, ...), Dublin Core peut être intéressant pour tracer un document Smiley smile À condition que ce soit généré automatiquement!

koala64 a écrit :
Une erreur 404.

Flash Smiley rolleyes
Felipe a écrit :
Bonjour,

Dublin Core> j'imagine que dans le monde de SGML, des bibliothèques au sens large (médiathèques et cie, là où on entasse, conserve, trie et expose/retrouve/prête/publie des milliers de "trucs"), de la documentation de 120 000 pages en 45 langues (un groupe pharmaceutique mondial, la NASA, ...), Dublin Core peut être intéressant pour tracer un document Smiley smile À condition que ce soit généré automatiquement!


D'un autre côté les balises meta ne sont pas la seule manière de "sémantiser" les données de documents web et sont somme toute très pauvres. Embarquer du Dublin Core ou autres vocabulaires structurés dans le contenu ou des portions de contenus d'un document web (ou le lier via un un <link rel="" type="" ... />) est autre chose qui ouvre des possibilités plus intéressantes pour un web de données. Qualifier le "conteneur" d'un document web (son enveloppe HTML) recelant des données variées en nature est très limité, sauf si on ne prend que le seul horizon du web actuel et du référencement, par contre qualifier son contenu avec des données structurées (via RDF par exemple) est autre chose.

Par exemple une page HTML ou XHTML décrit par des balises sa propre structure, mais ne qualifie pas le contenu exprimé entre les balises:

<p>Paris Web 2008 aura lieu les 13, 14 et 15 novembre à Paris</p>

ou
<p><strong>Paris Web 2008</strong> aura lieu les <em>13, 14 et 15 novembre</em> à <em>Paris</em></p>

ou encore

<h2>Paris Web 2008 :</h2>
<ul>
<li>Date : 13, 14 et 15 novembre 2008;</li>
<li>Lieu : Paris</li>
</ul>


Ces trois structures html sont différentes, mais l'information délivrée est la même (j'aurais mis des <b>, des <i> ou des <blink> le message serait le même): Paris Web 2008 aura lieu les 13, 14 et 15 novembre 2008 à Paris. A savoir: ceci est un évènement, il s'intitule Paris Web 2008, il a lieu du 13 au 15 novembre à Paris.

Dans l'état aucun outil (moteur par exemple) ne pourra moissonner cette information et qualifier un évènement en indiquer son intitulé, sa date, son lieu, faire des comparaisons de date, de disponibilité, un logiciel ne pourrait l'ajouter à un agenda etc.

Si par contre je me réfère à un vocabulaire déjà existant comme iCAL, je vais pouvoir structurer et mon contenu HTML et indiquer que Paris est le lieu, que 13, 14 et 15 novembre sont les dates de l'évènement, que Paris Web 2008 est le titre de ces conférences et l'exposer et le donner en pâture aux outils qui sauront l'exploiter indépendamment de la structure HTML que j'aurais choisie.

Un exemple exprimant tout cela à la fois en xHTML et RDFa (sous réserve d'erreurs, il est tard Smiley cligne ):


...
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:xsd='http://www.w3.org/2001/XMLSchema#'
xmlns:cal='http://www.w3.org/2002/12/cal/ical#'>
...
<div typeof='cal:Vevent'>
<h3 property='cal:summary'>Paris Web 2008</h3>
<p>Du <span property='cal:dtstart' content='2008-11-13' datatype='xsd:datetime'>13/11</span> au <span property='cal:dtend' content='2008-11-15' datatype='xsd:datetime'>15/11</span>
à <span property='cal:location'>Paris</span>.</p>
</div>


Pour reprendre ton exemple des bibliothèques et de leurs ressources, Dublin Core est très bien. Chaque livre édité est affublé d'un ISBN (numéro unique d'identification). Si un catalogue en ligne de bibliothèque indiquait que la suite de caractères constituant l'iSBN est un ISBN, un moissonneur pourrait établir des liens (çà existe déjà Smiley cligne ). Par exemple avec cette seule information afficher dans cette même page des informations contrôlées sur l'auteur, l'éditeur etc.

Seulement sans un vocabulaire comme Dublin Core ou autre ce n'est pas possible Smiley cligne

<p>ISBN: 978-2212122558</p>


<p><span property="dc:identifer" content="urn:isbn:978-2212122558">ISBN: 978-2212122558</span></p>


Désolé j'ai un peu dévié des balises meta pour la sémantique stricte et de l'accessibilité globale Smiley biggrin
Bonjour Smiley smile

Les link rel sont en général peu utilisés, d'ailleurs les navigateurs majeurs ne les affichent pas (Lynx le fait). Leur présence sur certains sites tient je pense surtout au fait que ces sites utilisent des CMS créés par des standardistas zélés (Dotclear les inclut par exemple, mais j'ai viré les link rel de mon <head> sur le blog car inutiles).

Ca date un peu mais en 2005, aucun moteur de recherche ne suivait les liens link rel : http://s.billard.free.fr/referencement/?2005/05/13/79-moteurs-de-recherche-et-liens-link-rel
Smiley cligne
personnellement, en usager 'lambda', lorsque je regarde les résultats d'une recherche dans google ou autre je vois que sont surtout pris : 'title' et 'description', 'keywords' étant surtout de plus en plus abandonnés, sauf par une grande majorité d'annuaires ... le reste me semble un peu superflu et surtout engenre à mon goût bien trop de polémiques pour bien peu de choses ... si l'on a un doute, on en met d'autres ... cela ne mange pas de pain !
(l'on ne parle bien ici que des balises metas ou title dans le code source ?)
@+
b g