[XHTML] Standards & sémantique

But

Le W3C, est chargé de publier les standards des différents langages du Web tels que XHTML, CSS et bien d’autre encore … Avoir des syntaxes standards permettent à tous les navigateurs, si tenté qu’ils les respectent, d’interpréter et d’afficher correctement et uniformément nos pages XHTML. Alors certes, tous n’est pas encore tout rose, Internet Explorer 6 fait d’ailleurs figure de très mauvais élève, ce qui à conduit Microsoft à nous proposer Windows Internet Explorer, mais alors qu’à l’époque, les éditeurs se livraient à une guéguerre impitoyable sur le marché des navigateurs en imposant leurs propres balises (balises propriétaires), aujourd’hui, le W3C est arrivé à prendre le dessus en imposant une ligne de conduite à suivre en matière de standards.

Vous l’aurez donc compris. Ecrire correctement le code source de ses pages traduit une volonté de créer des sites standards accessibles à tous et à toutes les plateformes. Car c’est bien de cela qu’il s’agit. Il existe plusieurs systèmes d’exploitation (Windows, Linux, Mac …), plus d’une centaine de navigateurs (Internet Explorer, Opera, FireFox, Mozilla, Safari, Konqueror, Lynx …) mais surtout, plusieurs types de visiteurs. Il y a ceux qui sont dits normaux, sans handicap particulier, à qui seul l’aspect visuel du site pourrait convenir. Mais il y a ceux qui sont atteint d’handicap, qu’ils soient physiques ou mentaux, pour qui les sites Web se doivent d’être accessibles.

Sémantique

L’accessibilité est donc au cœur du problème actuel. Un site accessible passe donc par un code source correctement structurer ce qui nous amène donc à parler de sémantique. La sémantique d’un document n’est pas, comme j’ai pu déjà l’entendre, une syntaxe correctement écrite et validée par l’outil de validation du W3C, mais plutôt une utilisation logique des balises XHTML en fonction du type de contenu. D’ailleurs, cet outil de validation ne vérifie que si la syntaxe est correcte et que les balises obligatoires sont bien présentes en fonction de la DOCTYPE utilisée. Un document syntaxiquement correct mais sémantiquement incorrect sera validé par le W3C mais inaccessible aux navigateurs alternatifs.

Voici les deux exemples de sémantiques incorrectes les plus courants :

* L’utilisation des tableaux pour la mise en page et non pour un listing de données
* L’utilisation d’une balise <p> à qui l’on applique une classe CSS "titre" au lieu d’utiliser un élément <h1>

Avec une sémantique correcte, tout le monde y trouve son compte. Les visiteurs, quelque soit le navigateur qu’ils utilisent, pourrons correctement lire le contenu de notre site que ce soit en ce souciant de la présentation visuelle ou non (tel que les navigateurs en mode texte, lecteurs de braille …), mais aussi les développeurs qui faciliterons la tache des robots d’indexation.

Déclarer la DOCTYPE

Il existe plusieurs versions de HTML et plusieurs versions de XHTML. Beaucoup d’entres elles sont encore utilisées sur le Web mais toutes n’ont pas les même exigences. Afin d’indiquer quelle syntaxe de quelle version nous allons utiliser il est nécessaire de déclarer une DOCTYPE.
La DOCTYPE permet au navigateur d’interpréter correctement notre page mais est surtout indispensable à la validation par le W3C.
La déclaration de la DOCTYPE est toute première ligne de nos pages.

* Liste des DOCTYPES recommandées par le W3C
* Validateur XHTML du W3C

Vous remarquerez qu’il existe une DOCTYPE spécifique aux frames pour XHTML 1.0. Nous la laisserons définitivement de côté de manière volontaire, tant l’utilisation des cadres est déconseillée.
La version « Transitional » est assez indulgente vis-à-vis de certaine balises HTML destinée à la présentation des données en les acceptant. En revanche, la version « Strict » ne les accepte pas et incite donc les développeurs à utiliser CSS pour présenter ses pages.

Le fait de ne pas utiliser la DOCTYPE XHTML 1.1 est un vieux débat sur lequel je ne m'attarderais pas sur cet article. Concrètement, il ne suffit pas que son document soit validé XHTML 1.1 pour qu'il soit réellement du XHTML. Il ne l'est pas tant qu'il n'est pas utilisé avec le bon type MIME (en l'espèce : application/xhtml+xml au lieu de text/html). Ce type MIME pour XML prend donc toutes les obligations de ce langage et donc celle d'un document comportant zéro erreur. Lorsque la page est chargée, le navigateur déclanche une analyse XML et si la moindre erreur est détectée, elle s'affiche à l'écran et aucune portion de votre site n'est affichée.

Tout au long des tutoriaux, nous utiliserons la DOCTYPE XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Définir la langue et l’encodage

Après la DOCTYPE, il est également obligatoire de déclarer le langage et le type de caractères utilisé dans le texte de notre page. Le langage se défini au niveau de la balise alors que comme vous le savez surement déjà, l’encodage se défini au sein d’une balise dans les en-têtes du document.

* A lire : Le minimum que tout développeur doit savoir sur Unicode

Structure type d'une page XHTML 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<!-- Coprs de la page -->
</body>
</html>

Ecrire du HTML valide

Les balises :

Comme vous le savez, HTML est basé sur des balises. Elles sont délimitées par des balises ouvrantes et des balises fermantes. Une différence notable depuis XHTML est que désormais, toutes les balises doivent être fermées y compris les balises n’en ayant pas de fermantes tels que les balises <br> et <img>. De plus, les personnes ayant l’habitude d’écrire le nom des balises en majuscules devront prendre celle de les écrire en minuscules.

Bien entendu, la présentation est désormais assurée par CSS, il est donc évident que toutes les balises de présentations telles que <font>, <center>, <u> ... sont désormais interdites.

Plusieurs balises peuvent être imbriquées, comme <strong>, <em> … à condition qu’elles soient fermées dans le même ordre qu’elles ont été ouvertes.

Voici une version incorrecte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<P><FONT color="#FF0000">Le code source de cette page est <strong><em>invalide</strong>
</em> XHTML 1.0 !</FONT></P>
</body>
</html>

Et en voici la version correcte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<p style="color:#FF000;">Le code source de cette page est <strong><em>valide</em></strong>
XHTML 1.0 !</p>
</body>
</html>

Les attributs :

Tout comme les balises, XHTML introduit une série d’obligation de syntaxe sur les attributs et CSS en rend donc quelques uns obsolètes. Les attributs se déclarent au sein des balises ouvrantes et leurs valeurs sont comprises entre doubles quotes.

Les attributs de présentation tels que align, color, border ... sont désormais interdits. Les CSS se chargeront de les remplacer.

Voici une version incorrecte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<table border='1'>
<tr>
<td>
<p class='cssclass'>Le code source de cette page est <b>invalide</b> XHTML 1.0 !</p>
</td>
</tr>
</table>
</body>
</html>

Et en voici la version correcte :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<table style="border:1px solide #000;">
<tr>
<td>
<p class="cssclass">Le code source de cette page est <strong>valide</strong> XHTML 1.0 !</p>
</td>
</tr>
</table>
</body>
</html>


Les différents types d’éléments :

Il existe deux types d’éléments HTML :

* Les éléments de type bloc
* Les éléments de type en ligne (inline)

Chacun a sa structure bien spéciale. Les éléments de type bloc sont placés les uns en dessous des autres, comme les paragraphes <p> les titres <h1>, <h2>, ... les listes <li>, en revanche, les éléments de type en ligne sont comme leur nom l’indique de portions du code source, comme un lien, un texte renforcé <:strong> ...

Les éléments de type bloc peut renfermer d’autre éléments de type bloc en plus des éléments de type en ligne alors que les éléments en ligne ne peuvent contenir que des éléments en ligne.

Voici une version incorrecte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<em>
<div>
<p>Cette partie du code mise en emphase est invalide XHTML 1.0 car un élément
de type en ligne ne peut contenir un élément de type bloc !</p>
</div>
</em>
</body>
</html>


Et en voici la version correcte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<div>
<p><em>Cette partie du code mise en emphase est valide XHTML 1.0 car un élément
de type en bloc peut contenir un élément de type en ligne !</em></p>
</div>
</body>
</html>


Valider son site

1. Vérifier les éléments nécessaires à la validation (DOCTYPE, encodage, langage ...)
2. Aller sur http://validator.w3.org
3. Entrer l’URL ou directement le code source de votre page et lancer la validation
4. Corriger les éventuelles erreurs indiquées par le validateur
5. Mettre le logo de votre validation sur votre site si vous obtenez le message de félicitations

Valid XHTML 1.0 Strict

Conclusion

Vous vous attendiez peut être à ce que je vous fasse une liste détaillés des balises à utiliser et celles à jeter à la poubelle en vous disant à quel moment il faut les utiliser mais là n’était pas le but de cet article. D’ailleurs, vous verrez qu’au fil des tutoriaux, vous apprendrez naturellement à utiliser les bonnes balises au bon moment. Parfois, plusieurs peuvent faire l’affaire alors que d’autres fois seule une est appropriée.

Ce qu’il faut surtout retenir de ce premier tutorial, c’est surtout que l’utilisation des standards et d’une sémantique correcte sur vos pages Web est d’une importance sérieuse aujourd’hui. C’est la volonté d’ouvrir son site à toutes les plateformes, tous les utilisateurs et tous les navigateurs. Séparer le contenu de la forme permet à des navigateurs, même anciens, d’afficher correctement le contenu de la page. Mettre en place une sémantique correcte, utiliser les bonnes balises au bon moment, assure un accès aux données de vos pages aux utilisateurs handicapés, utilisant des navigateurs alternatifs. C’est d’ailleurs, sur cette sémantique que s’appuient les moteurs de recherche tels que Google. Les interfaces basées sur des tableaux HTML imbriqués ou alors à base d’image transparentes sont donc à proscrire.

Pour finir, il est vrai que j’emploi avec alternance les termes HTML et XHTML, alors pour ceux qui se perdent sachez que la différence est essentiellement syntaxique. XHTML n’est qu’une nouvelle version d’HTML basée sur XML, d’où le "X" en première lettre plutôt qu’un HTML 5.0 ...