Le terme "Web sémantique" est désormais utilisé de manière presque inflationniste. Beaucoup de gens ne savent pas vraiment ce que cette sémantique tant vantée implique. En réalité, c'est assez simple : grâce à la sémantique, les informations nécessaires ou souhaitées peuvent vraiment être extraites de vastes quantités de données.
Un exemple concret devrait illustrer l'importance de la sémantique. Les photos numériques sont une chose merveilleuse. Juste après leur capture, on peut les présenter à tout le monde sur Internet. Ce qui est vrai dans le privé s'est également depuis longtemps établi dans le cadre professionnel. Les agences de photos, les musées, les bibliothèques et les photographes proposent des photos, des peintures ou même des versions numériques de précieux textes via des bases de données d'images professionnelles. Sur les sites web correspondants, il existe ensuite des masques de recherche à travers lesquels la plate-forme peut être parcourue. L'exemple le plus populaire d'un moteur de recherche d'images sur le Web 2.0 est certainement Flickr.
Ceux qui ont déjà utilisé de tels moteurs de recherche d'images connaissent leurs limites : si vous saisissez par exemple le terme chou, vous verrez des photos de différents domaines. Ainsi, la recherche d'images Yahoo! affiche des photos d'une mésange à tête noire, d'un joueur de tennis nommé Kohl et de l'ancien chancelier Helmut Kohl.
À ce stade, l'un des inconvénients du WWW classique devient évident : car actuellement, les informations fournies peuvent être comprises par les humains, mais pas interprétées correctement par les machines - dans l'exemple montré ici, les moteurs de recherche.
Les machines ne peuvent lire des informations que si elles sont réellement présentes. Et c'est précisément à ce moment crucial que la sémantique entre en jeu.
Structurer les documents
Dans les versions précédentes d'HTML, il n'y avait tout simplement pas de moyen de structurer les documents sémantiquement. Si l'on voulait structurer un site web, on ne disposait en fait que de titres et de paragraphes. Voici un exemple typique de la structure d'un site web classique :
<h1> Chapitre </h1> <p> Paragraphe </p> <h2> Sous-chapitre </h2> <p> Paragraphe du sous-chapitre </p> <h3>
HTML met à disposition des éléments de structuration de document tels que h1 à h6. Cependant, il n'est pas possible de créer une structure extrêmement imbriquée avec ces éléments. En effet, HTML ne prévoit pas d'éléments h7 ou h8. C'est précisément là qu'intervient HTML5, qui introduit quelques éléments de structuration supplémentaires.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Ces éléments sont présentés dans ce tutoriel. Avant cela, cependant, une remarque : ne vous attendez pas à des miracles du point de vue visuel avec ces éléments. En effet, pour que les sites web basés sur des éléments sémantiques soient également attrayants, le CSS doit être utilisé. Et nous en discuterons plus tard.
Vous avez déjà rencontré certains éléments sémantiques, même s'ils n'ont peut-être pas grand-chose à voir avec la sémantique au premier abord. Voici un exemple d'un tel élément :
<progress min="0" max="100" value="40"></progress>
Cela génère une barre de progression. (D'ailleurs, l'élément progress a déjà été largement présenté dans cette série).
Cet élément illustre à quel point il est facile de créer du contenu qui peut être associé à un contexte précis. Il est en effet immédiatement reconnaissable par le logiciel qu'il s'agit d'une barre de progression. Ce n'est pas le cas avec des solutions qui reposent sur JavaScript pour générer une barre de progression.
Structures d'éléments sémantiques
Dans les documents HTML "normaux", la structuration du contenu repose généralement sur des éléments div. Ces éléments sont ensuite affectés de classes ou d'IDs pour pouvoir être formatés en CSS. Ce principe est également utilisé dans HTML5. En fait, une enquête menée par Google a montré que de nombreuses pages utilisent toujours les mêmes classes.
Un exemple :
<div class="nav"></div>
Par exemple, de nombreux développeurs utilisent nav pour inclure la navigation à l'intérieur de ce élément div. Cependant, en HTML5, cela ressemblerait plutôt à ceci :
<nav>Contenu</nav>
L'élément nav précise qu'il ne s'agit pas seulement d'une liste de liens hypertexte. En effet, cet élément décrit un bloc de contenu contenant des informations sur la navigation du site web dans un contexte bien précis.
Structuration moderne
À quoi ressemble typiquement la structure d'un document HTML ? Fondamentalement, elle est similaire, quelle que soit la nature du contenu de la page. La plupart du temps, les zones suivantes sont incluses :
• En-tête
• Menu principal
• Contenu
• Pied de page
Un site web qui utilise des éléments div pour la structuration pourrait ressembler à ceci :
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Recherche</div>
<div id="nav">Menu principal</div>
</div>
<div id="content">
<h1>Ceci est le contenu</h1>
<div class="section">
<h2>Sous-titre</h2>
<h3>Section</h3>
<!-- Ici se trouve le contenu -->
</div>
<div class="section">
<h2>Sous-titre</h2>
<!-- Ici se trouve le contenu -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Sous-menu</div>
</div>
<div id="footer">Pied de page</div>
</body>
Vous connaissez peut-être déjà de telles constructions de div. Afin que la structure soit logique pour les développeurs, ils attribuent des classes ou des identifiants appropriés aux zones div qui ont des noms "parlants". Ainsi, pour les développeurs, il est donc clair, par exemple, que dans la zone div avec l'identifiant footer, les contenus sont stockés qui appartiennent à la partie inférieure de la page. Le problème : les noms peuvent laisser deviner la structure du site Web, mais le site Web n'est pas encore structuré de manière sémantique. C'est précisément là que les nouveaux éléments HTML interviennent. En effet, ceux-ci permettent pour la première fois une véritable structuration des documents ou des sites Web.
Pour mieux comprendre, jetez un œil au document HTML5 suivant :
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Recherche</div>
<nav>Menu principal</nav>
</header>
<article>
<h1>Ceci est le contenu</h1>
<section>
<h2>Sous-titre</h2>
<h3>Section</h3>
<!-- Ici se trouve le contenu -->
</section>
<section>
<h2> Sous-titre</h2>
<!-- Ici se trouve le contenu -->
</section>
</article>
<aside>
<nav>Sous-menu</nav>
</aside>
<footer>Pied de page</footer>
</body>
Je vais bien sûr aborder les éléments utilisés dans ces tutoriels ultérieurement. Cependant, un simple coup d'œil à cet exemple montre déjà les avantages des éléments utilisés. Maintenant, il est enfin possible de marquer les zones des pages avec des éléments spécifiquement conçus pour elles. Tout ce qui appartient à l'en-tête de la page peut être inclus dans un élément header.
De plus, les éléments section et article sont désormais disponibles, ce qui permet de structurer beaucoup mieux les contenus réels des pages. Comme vous avez pu le constater, il est donc utile d'examiner attentivement les possibilités offertes par HTML5 en termes de structuration sémantique des documents.
