Mon site Web est standard ! Et le vôtre ?

Statut

Cet article fait partie intégrante du groupe de travail du W3C Quality Assurance Interest Group. Vous pouvez envoyer tout commentaire public sur la mailing list archivée publiquement à l'adresse public-evangelist@w3.org, ou vos remarques personnelles à l'adresse karl@w3.org. L'auteur remercie les personnes qui ont donné de leur temps pour des révisions ou des propositions.

Introduction

Vous trouverez ici des concepts et des techniques faciles à mettre en oeuvre vous permettant d'améliorer la qualité de votre site Web et de le rendre valide. Ce document est destiné aux utilisateurs de HTML, aux développeurs travaillant sur des applications Web, et aux webmasters.

La plupart des sites présents sur le Web ne sont pas valides. Nous pouvons émettre l'hypothèse que c'est le cas pour 99% des pages Web, mais il n'y a aucune statistique pour étayer cette affirmation. Il serait intéressant d'effectuer une enquête pour prouver que c'est effectivement le cas.

Pourquoi ?

Le HTML et les standards

Commentaires habituels

J'ai entendu de nombreux commentaires et critiques à ce sujet. La plupart d'entre eux sont dûs à un manque de connaissance et de compréhension de ce qu'est la validation HTML. Voici quelques exemples :

Selon Steve, chef d'entreprise : Si mon site Web est construit en respectant les standards, il sera sans intérêt et je perdrai des clients.

Avec les standards du W3C, vous pourrez avoir des sites Web tout à fait passionnants. La création d'un site respectant les standards n'a rien à voir avec la génération de pages Web composées seulement de texte.

Le W3C propose à l'heure actuelle un ensemble de technologies intégrées prometteuses. Vous pouvez faire l'expérience d'un site Web totalement multimédia à l'aide des technologies interopérables du W3C qui utilisent XHTML (Structured XML markup), CSS (Feuilles de style), SVG (2D vector animated graphics), et SMIL (Synchronized Multimedia). Ces technologies ont été conçues sur la base d'un consensus entre les différents acteurs du Web.
Alain, directeur technique : Je n'ai pas un budget suffisant pour me soucier des standards sur mon site. Cela coûterait trop cher !

Concevoir un site à l'aide des standards simplifiera la maintenance du code des pages Web parce que vous n'aurez pas besoin de versions différentes pour chaque navigateur. Vos pages auront une durée de vie plus longue et ne seront pas dépendantes de technologies volatiles. Ainsi la conception basée sur les standards Web vous coûtera en réalité moins cher.
Dean, directeur artistique : Si je respecte les standards, cela empiétera sur ma créativité.

Chaque médium artistique a des contraintes techniques, que l'on dessine, que l'on sculpte ou que l'on conçoive des pages Web. L'aquarelle ou la peinture à l'huile ont leurs propres contraintes, mais ces techniques, loin d'entraver la créativité, fournissent un cadre à l'expression artistique.

La conception à l'aide des standards Web va ouvrir de nouveaux horizons avec des techniques propres au médium, à la technologie et au public. Il y a beaucoup à explorer dans ce domaine. Nous sommes seulement en train de découvrir les bénéfices d'expériences multimédia basées sur les standards.
Claudia, Graphiste : Je ne me préoccupe pas de l'accessibilité. Les personnes avec des handicaps ne constituent pas mon public cible.

Vous aurez avantage à concevoir en respectant l'accessibilité. Les gens avec des handicaps représentent 8 à 10% de la population totale. Il est plus facile d'assurer la maintenance d'un site Web qui suit les règles de l'accessibilité (et par là même les standards Web). Le trafic de votre site Web va s'accroître, et une plus grande variété de navigateurs aura accès à votre contenu.

Dans certains pays la loi rend l'accessibilité obligatoire, comme en Australie (Disability Discrimination Act Advisory Notes Version 3.1 May 1999) ou aux Etats-Unis (Section 508 - Web-based Intranet and Internet Information and Applications). En Europe, on travaille aussi à cet objectif (e-accessibility).
Aminata, programmeuse Web : Pourquoi devrais-je respecter les standards ? Le Web n'est-il pas un espace de liberté ?.

Le Web est un espace de liberté partagé par de nombreux utilisateurs dont vous ne connaissez pas forcément les besoins. Les standards ont été conçus pour prendre en compte l'intégralité de ce public potentiel. C'est un défi pour la communauté Web que de créer à l'aide des standards Web. Vous ne serez pas liés à une entreprise ou à une technologie propriétaire. Vous pouvez utiliser des technologies indépendantes des exigences d'une plate-forme.
Karl, développeur Web : J'ai simplement suivi les instructions contenues dans les ouvrages.

Malheureusement, beaucoup de livres n'enseignent pas une bonne programmation Web. Quand vous créez un site, vous devriez contrôler que votre balisage est correct. Si vous êtes un développeur Web, soyez prudent dans l'utilisation des ouvrages qui servent à développer votre application et lisez les spécifications que vous tentez d'implémenter.

Certains sites Web accumulent des ressources pour aider les gens à concevoir des sites en accord avec les standards du W3C. Sur le site du W3C, vous trouverez un nombre croissant de tutoriels faisant la promotion de bonnes habitudes de travail.

Certains membres du W3C ont développé pour votre propre usage des logiciels librement utilisables. Nous vous encourageons à les utiliser chaque fois que cela est possible. Ces suites logicielles implémentent les technologies du W3C.
Tim, comptable : Mon éditeur HTML génère un balisage non valide.

De nombreux outils d'édition ne génèrent pas un balisage correct. Certains ont des vérificateurs syntaxiques intégrés, d'autres travaillent bien et beaucoup ne génèrent pas un balisage correct. Comme solution intermédiaire, il vous faut vérifier votre page Web avec un validateur HTML. Parallèlement, prenez contact avec le fabricant du logiciel (par mail, téléphone, lettre) et informez-le. Les entreprises peuvent bien travailler, si vous le leur demandez.
Valérie, rédactrice web : Ce n'est pas de ma faute. C'est à cause de la manière dont le générateur de gabarits a été conçu. (Souvent un système basé sur une interface Web).

Vous avez raison. Ce n'est souvent pas de votre faute. Si c'est un simple formulaire où vous n'écrivez jamais de HTML à la main, écrivez au développeur de cette interface ou à la personne responsable de la maintenance du site, jusqu'à ce que le problème soit résolu. Si vous n'avez pas la certitude que le contenu produit respecte les standards du W3C, validez le contenu à l'aide d'un validateur HTML, et présentez le rapport à votre webmaster, ou à la personne responsable du CMS.
Ning, développeur logiciel : Il n'y a aucune information pour m'aider. Tous les documents que j'ai trouvés sont en anglais.

Des documents et des spécifications ont été traduits dans d'autres langues. Le W3C maintient une liste de ces traductions.

Le HTML est un standard (de même que le XHTML !)

Le HTML a évolué durant son développement, et il est disponible en diverses versions. Toutes ces versions sont des standards, et vous pouvez choisir celle qui convient à vos besoins. La plupart du temps, la dernière version sera le meilleur choix, à moins que vous ne visiez un public très spécifique, ou des navigateurs anciens qui ne fonctionnent plus. La version que vous choisissez définit les éléments et les attributs que vous pouvez utiliser.

Par exemple, dans la version 4.01 de HTML, vous trouverez une liste des éléments et une liste des attributs que vous avez le droit d'utiliser dans vos pages. Vous pouvez éditer vos pages manuellement, un moyen traditionnellement appelé « codage à la main » ou « écriture dans la source ».

HTML 4.01 vous permet d'écrire un paragraphe et une ancre identifiant ce paragraphe de la manière suivante :


<p id="ref">Ceci est un paragraphe</p>

Soyez attentifs à la manière dont vous imbriquez vos éléments. Certains éléments ne peuvent pas être inclus dans d'autres, et certains attributs ne peuvent être utilisés qu'avec certains éléments.

Les éléments que vous pouvez insérer dans votre document ou implémenter dans votre logiciel dépendent de la version HTML. Le tableau ci-dessous contient une liste de définitions HTML, ou de définitions de type de document (DOCTYPEs), que vous pouvez utiliser :

Version	DTD	Déclaration DOCTYPE dans les documents
HTML 2.0	DTD	<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2	DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01	Strict, Transitional, Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0	Strict, Transitional, Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	DTD	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Vous ne pouvez pas valider un document si vous n'utilisez pas un de ces DOCTYPEs au début de votre document. Ne l'oubliez pas si vous écrivez vos documents à la main.

Éditeurs HTML: Tous les éditeurs HTML DOIVENT proposer un DOCTYPE et générer un balisage conforme au langage.
Gabarits HTML: Tous les gabarits HTML DOIVENT avoir un DOCTYPE.
Librairie HTML et générateur de gabarits (côté serveur): Toute librairie HTML ou tout générateur de gabarit DOIT retourner un DOCTYPE.

Ci-dessous, vous avez un exemple de modèle de document basé sur XHTML 1.0 strict :


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

<head>
	<title>Un modèle basé sur XHTML 1.0 Strict standard </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     ... Votre contenu HTML ici ...

</body>
</html>

Un modèle de document basé sur XHTML 1.0 Strict est très simple à réaliser. Les modifications du document et sa validation sont simples et rapides.

Valider les documents

La validation HTML

Un validateur HTML s'occupe simplement de vérifier si votre document est correct par rapport au DOCTYPE déclaré.

Si vous désirez vérifier la validité de votre document final quand il est affiché par un agent utilisateur (par exemple un navigateur Internet), vous pouvez utiliser le validateur HTML du W3C. Ce validateur HTML vous retournera une liste d'erreurs par rapport au DOCTYPE déclaré. Si votre document est exempt d'erreurs, le validateur retournera un message tel que : « Pas d'erreurs trouvées ».

Si vous éditez votre site Web à l'aide de formulaires (et que vous n'écrivez pas de balises HTML dans les champ de ces formulaires), vous pouvez transmettre les erreurs trouvées au webmaster de votre site et demander que le générateur de balisage HTML soit corrigé.

Si vous créez votre site à la main ou si vous écrivez directement le balisage, et que le validateur retourne des erreurs pour votre page, corrigez simplement votre code. Le validateur HTML vous indique la ligne où l'erreur est survenue.

Le validateur HTML fournit le numéro de la ligne où l'erreur est survenue, ce qui devrait vous aider à trouver l'emplacement du problème dans votre document. Il contrôle le fichier ligne par ligne, en commençant par la première ligne. Cela signifie qu'une erreur qui se trouve au début de votre document peut provoquer de nombreuses erreurs supplémentaires plus loin dans votre page. Une bonne méthode pour en venir à bout est de corriger la première erreur affichée, puis de valider à nouveau votre page. Vous constaterez souvent que régler un problème au début du document permet de résoudre plusieurs erreurs à la fois. Continuez ainsi jusqu'à que ce que toutes les erreurs soient éliminées, et le document qui en résultera sera valide.

Si vous utilisez un éditeur HTML et que vos pages ne sont pas valides après édition, notifiez-le au programmeur ou à l'entreprise. Vous devriez pouvoir contacter le personnel du support technique de l'entreprise.

Si vous êtes le développeur d'un générateur de gabarits, d'un outil d'édition ou d'un système de gestion de contenu, utilisez le validateur HTML pour résoudre les problèmes de votre implémentation. Vous pouvez également incorporer le validateur HTML dans votre logiciel ou votre back-end. Le code source du validateur HTML est disponible gratuitement. Le validateur est amélioré chaque jour et vous pouvez participer à son développement.

Remarque : certains documents peuvent être valides en regard d'une DTD et en même temps incorrects en regard de la spécification HTML. Dans un futur proche, nous présenterons une liste des erreurs possibles non détectées par le validateur HTML.

Liste de validateurs HTML

Valider des liens

Un autre problème important avec de nombreux sites Web est la permanence d'une URL. Quand vous ajoutez des liens vers d'autres sites depuis vos documents, vous vous attendez à ce que ces liens restent stables et permanents. Cela signifie que l'information que vous voulez montrer devra toujours être là quand quelqu'un lisant votre site web cliquera sur l'un des liens que vous avez publié. Vous voulez également vérifier et garantir que les liens que vous avez établis vers d'autres pages web ou dans d'autres sections de votre site soient exempts d'erreurs. Dans cette optique, un outil a été développé : le vérificateur de liens du W3C.

Le vérificateur de liens génère un rapport sur les liens. La durée du rapport dépend du temps nécessaire pour charger et vérifier tous les liens présents dans une page. Pour vérifier les liens, le programme exécute exécute une requête HTTP HEAD du document. Si le serveur est mal configuré, vous pouvez obtenir un rapport erroné même si le lien est valable, simplement parce que le serveur n'est pas en mesure de renvoyer le HEAD. Dans ce cas, vous devriez écrire au webmaster du site pour lui demander de régler la configuration du serveur.


Checking link http://webstandards.org/
HEAD http://webstandards.org/  fetched in 0.1s

Vous trouverez ci-dessus un exemple qui donne le temps nécessaire pour charger le lien.

Après la liste de liens, vous obtenez un rapport sur les liens qui sont brisés ou redirigés, ce qui vous aidera à réparer les liens incorrects.

Si vous désirez plus d'information sur l'importance des liens, nous vous invitons à lire le document Cool URIs don't change écrit par Tim Berners-Lee.

Si, en tant que webmaster, vous désirez installer un programme sur votre site pour aider les gens à vérifier leurs pages web, le code source du vérificateur de liens du W3C est disponible gratuitement.

Valider CSS

Depuis 1996, les feuilles de style en cascade (CSS) ont permis de séparer la structure de la présentation de manière élégante et efficace. L'année dernière (2001), de nombreux agents utilisateurs ont implémenté la reconnaissance de CSS 1 et CSS 2. L'utilisation des feuilles de style vous permet de maintenir en un seul endroit toutes les informations de mise en forme de votre document.

Au moment de la rédaction de cet article, vous pouvez choisir entre CSS 1 et CSS 2 pour mettre en forme vos documents.

La mise en page à l'aide des feuilles de style comporte de nombreux avantages, comme la réduction du coût du design de votre site Web et l'accroissement de son interopérabilité (votre site peut être lu par différents agents utilisateurs). La mise en page de votre site Web pour plusieurs versions d'agents utilisateurs avec des tableaux et du JavaScript accroît le coût de la conception de 30%.

N'utilisez pas l'élément FONT avec l'attribut FACE. Cela est considéré comme nuisible du point de vue de l'internationalisation. Si vous voulez apprendre la meilleure manière de vous débarrasser de votre élément FONT et adopter les feuilles de style, nous vous encourageons à lire le tutoriel de Todd Fahrner Beyond the FONT tag: Practical HTML text styling.

Comme avec les services de validation HTML et de validation des liens, vous pouvez vérifier la validité de votre feuille de style. Vous pouvez également vérifier la validité des feuilles de style externes appelées par votre document. Si vous désirez installer votre propre mouture sur votre site Web, le code source du validateur CSS est disponible gratuitement.

Valider l'accessibilité

Faire un site web qui valide n'est pas suffisant. La plupart du temps vous ne connaissez pas votre public. Les personnes qui ont accès à votre site ont un matériel, un navigateur différent et/ou des handicaps spécifiques. Il y a de nombreux avantages financiers à retirer d'un design accessible. Malheureusement, il s'avère moins aisé de valider vos documents du point de vue de l'accessibilité. Certains outils, comme Bobby, peuvent vous aider, mais ils ne constituent en rien une réponse définitive à vos problèmes d'accessibilité. Vous aurez sans doute besoin de vérifier votre contenu avec l'aide d'une personne handicapée. La Web Accessibility Initiative maintient une liste de ressources qui vous aideront à concevoir des sites accessibles.

Des outils pour améliorer la qualité pas à pas

Les gens se découragent souvent devant l'ampleur de la tâche que représente la validation de tout un site, à cause du nombre de pages invalides qu'il comporte, ou parce qu'ils ne savent pas par où commencer. C'est simple, retenez la devise SMART: Small, Meticulous, Accessible, Regular, Template (NdT : Petit, Méticuleux, Accessible, Régulier, Gabarit). Progresser pas à pas vous aidera à obtenir un site Web valide sans peine et sans découragement. Ainsi, pensez progressif et trouvez des solutions qui rendront votre travail plus aisé, comme par exemple l'utilisation d'un générateur de gabarits.

Voici une liste d'outils qui vous aideront à améliorer votre site Web.

HTML Tidy

Tidy a été développé à l'origine par Dave Raggett. Il vous aidera à rendre une page Web valide. Tidy est parfois incapable de réparer toutes les erreurs. Tidy n'est pas un outil d'édition. Il vous aidera seulement à résoudre certains problèmes.

Le top 10 des documents invalides

Il est très difficile parfois de savoir quelles pages de votre site Web sont invalides. Si vous exécutez un script parcourant toutes vos pages, vous obtiendrez une liste énorme de pages invalides.

Alors quelle solution trouver ?

Au W3C, Gerald Oskoboiny a développé un outil progressif pour sites Web qui ne noie pas les webmasters sous les informations. Il envoie un rapport des dix documents invalides les plus fréquemment consultés, en fournissant un avertissement de façon à ce qu'ils puissent être corrigés. Chaque semaine, le webmaster recevra un nouveau rapport répertoriant les 10 documents les plus invalides. Cet outil est disponible pour le grand public. Vous pouvez l'adapter à vos propres besoins.

Olivier Théreaux, de W3C, a aussi developpé une version plus portable de cet outil, et utilisable comme un plug-in : le LogValidator.

Cet outil prend les derniers logs d'un serveur Web et les traite par le biais des modules de validation. Ces modules de validation contrôlent la validité des documents les plus demandés pour une certaine technologie. Le module par défaut est celui de la validation HTML, d'autres seront bientôt disponibles.

Ainsi, vous serez à même de corriger l'orthographe de vos pages Web, de voir si vous avez inclus des métadonnées, de vérifier si les liens sont toujours valables, etc. Une documentation de l'API vous aidera à créer de nouveaux modules selon vos besoins.

Remerciements

Merci aux personnes qui ont relu cet article : Ian Jacobs, Susan Lesch, Olivier Théreaux, Stephanie Troeth, Jeffrey Zeldman, ainsi qu'aux personnes de la public-evangelist mailing-list.

Cet article n'aurait pas non plus pu être écrit sans la participation de Kim Nylander, rédacteur technique, qui m'a relu et aidé.

http://www.w3.org/QA/2002/04/Web-Quality

Fiche technique

Article original : My Web site is standard! And yours?
Auteur : Karl Dubost
Date de parution : 08 avril 2002
Traduction : Philippe Janvier
Date de traduction : septembre 2005
Thème : Web design
Niveau : Tous niveaux

À propos de l'auteur

Karl Dubost travaille au W3C comme Conformance Manager.