La Sémantique : A vos balises, prêts ? Partez !

CSS

posté le 12 mars 06 par Deeder

tags: css, w3c, sémantique

Introduction :

La sémantique est une valeur prônée par les standardistes et considérée comme une des plus importantes pour le W3C. Il n’existe malheureusement aucun outil capable de tester la sémantique de vos pages web. Ainsi, on laisse à l’appréciation du développeur seul le bien-fondé de son code. Pour un débutant, il est parfois difficile de s’y retrouver dans tant de subtilité, mais il est néanmoins nécessaire de ne pas passer outre ce point fondamental de l’accessibilité d’un site.

Définition :

La sémantique n’est rien de plus que l’art d’utiliser la chaque balise (x)HTML à bon escient, pour son rôle propre qui lui a été défini à travers les recommandations du W3C et cela indépendamment de son rendu par défaut.
Ainsi, chaque élément à un rôle approprié, une signification. L’intérêt du respect de cette signification est de pouvoir tirer des informations de la page rien qu’en analysant son code. C’est le principe des lecteurs d’écran par exemple.
Ce procédé a été mis en place à des fins d’accessibilité, de clarté et de différenciation des éléments et doit être appliqué au nom du respect des standards.

L’avènement et la popularisation du XML a amplifié l’importance de la sémantique. En effet, le XML est principalement basé sur la sémantique pour organiser les informations et les traiter par la suite. Le xHTML étant le résultat de l’union du méta-langage et du HTML, il est donc normal que cette notion soit non négligeable dans ce langage. Mais il ne faut pas oublier qu’elle s’applique aussi au HTML.

Exemples et mise en oeuvre :

Il y a des réflexes à avoir afin d’éviter les principales erreurs que l’on peut rencontrer sur le net. Tout d’abord, il faut savoir que tout texte, sauf pour les titres, les listes à puces et autres cas exceptionnels doit être inclus dans un paragraphe <p>, de la même manière que toute image <img /> doit être incluse dans un <p>.

Un menu étant considéré comme une liste de liens, nous utiliserons donc une liste à puces <ul> pour le mettre en page, qu’il soit orienté verticalement ou horizontalement. La mise en place d’une mise en page par les CSS nous permettra par la suite de modifier l’orientation de cette liste à puces.

Les titres <h1> à <h6> sont à préférer au code suivant :

<div class="titre">Titre</div>

De même, ils doivent être utilisés selon un ordre hiérarchique et architectural logique. Ainsi, tout <h3> aura été introduit et précédé d’un <h2> lui même précédé d’un <h1>. La choix des titres <hx> ne dépend pas seulement de leur importance mais aussi de leur hiérarchisation.

Les balises neutres <div> et <span> sont à proscrire pour remplacer une balise existante. On y privilégiera l’emploi de balises respectivement blocs et en-ligne adaptées et auxquelles on associera une mise en forme identique à celles des balises neutres. L’imbrication inutile de balises blocs est aussi à éviter.

Les tableaux <table> sont à proscrire pour la mise en page de sites web. Ils ne sont destinés qu’à la mise en page de données tabulaires. Les données tabulaires sont des données destinées à une classification dans un tableau à double entrée minimum. L’utilisation des tableaux pour la mise en page, bien que déconseillée a été et est toujours très utilisée pour des raison de facilité de compatibilité entre les navigateur mais elle est très lourde et comporte de nombreux désavantages.

Les balises <b> et <i> qui, contrairement à ce que l’on peut penser, ne sont pas invalides xHTML 1.0 Strict, ne sont pas forcément respectivement remplaçables pas les balises <strong> et <em>. En effet, même si elles sont interprétées de la même manière, elles n’ont pas le même sens sémantique.
Alors que <b> et <i> signifie une mise en gras et italique, <strong> et <em> signifie une forte et petite emphase, qui est le plus souvent modélisée par une mise en gras et une mise en italique mais qui pourrait être complètement différente.

Ambiguïté et difficultés d’interprétation :

Bien que la sémantique du (x)HTML soit généralement assez stricte, il existe des cas menant à une certaine ambiguïté. C’est par exemple souvent le cas pour un forum. Un forum doit-il être présenté sous la forme d’un tableau ou sous une mise en page (x)HTML/CSS ? Les données présentées y étant mi-tabulaires, mi-textuelles, il est difficile de trancher. Certains optent don pour des tableaux, d’autres pour une mise en page (x)HTML couplé à CSS. On laisse donc le choix au développeur. C’est selon son appréciation et sa philosophie qu’il décidera de la manière de concevoir son forum.

Conclusion :

La sémantique est encore une fois le signe d’une avancée technologique, qui permet de donner du sens à son code. Ainsi, ce code pourra être correctement exploité sous toutes ses formes grâces aux différents outils à disposition. Il ne faut donc pas choisir ses balises en fonction d’un rendu, qui sera facilement modifiable par les CSS, mais en fonction de sa signification première. C’est là tout l’art du développeur : donner un sens à un code, sans en sacrifier l’accessibilité, la mise en page, ni le rendu.