Les standards du web

« Les standards web veulent servir de base commune... de fondement au web pour que les navigateurs et les autres logiciels puissent comprendre le même vocabulaire de base. » Eric Meyer

Le W3C (World Wide Web Consortium) et d'autres organisations ont défini des technologies pour créer et interpréter les contenus web. Les standards actuels sont :

• Le langage de balisage hypertexte extensible (XHTML) 1.0 [en]
• XHTML 1.1 [en]
• Le langage de balisage extensible (XML) 1.0 [en]

• Les feuilles de style en cascade (CSS) Niveau 1 [en]
• CSS Niveau 2
• CSS Niveau 3 (document de travail) [en]

• Le modèle d'objets de document (DOM) Niveau 1[en]
• DOM Niveau 2[en]

• ECMAScript 262 [en] (la version standard de JavaScript)

• Le langage de balisage pour les mathématiques (MathML) 1.01 [en]
• MathML 2.0 [en]
• Les graphismes vectoriels redimensionnables (SVG) 1.0 [en]

• procurer le plus d'avantages au plus grand nombre d'usagers possible ;
• assurer la viabilité à long terme de n'importe quel document web ;
• simplifier le code et réduire les coûts de production ;
• construire des sites accessibles à un plus grand nombre de personnes et à une plus grande variété de périphériques Internet ;
• continuer de fonctionner correctement au fur et à mesure que les navigateurs évoluent et que de nouveaux périphériques font leur apparition.

Pour les designers et les développeurs web, les standards web consistent à utiliser les standards existants (les langages structuraux, de présentation, d'objets de document et de script) et à adopter de meilleures pratiques (écrire un code valide, sémantiquement correct et accessible)... pour la plus grande joie de tous.

III-A. Site web traditionnel▲

III-B. Site web conforme aux standards▲

Le balisage sémantiquement correct fait usage des éléments HTML conformément à leurs finalités propres. Le HTML bien structuré possède une signification sémantique pour un large éventail d'agents utilisateurs (navigateurs sans feuilles de style, navigateurs textuels, PDA, engins de recherche, etc.).

Pour le balisage, il faut utiliser les éléments HTML standards et éviter de styler d'autres éléments HTML pour les faire ressembler aux premiers. En termes simples, cela signifie :

• pour les en-têtes, utiliser les éléments d'en-tête en commençant par <h1> ;
• pour les paragraphes de texte, utiliser les éléments de paragraphe ;
• pour les listes, utiliser les éléments de liste.

La validation et un processus qui consiste à mesurer la conformité d'un document à l'aune d'une norme officielle semblable à celles qui ont été émises par le W3C. Un document qui a été vérifié et qui a passé le test est considéré comme valide.

• parce qu'un code valide s'affichera plus rapidement qu'un code avec des erreurs ;
• parce qu'un code valide s'affichera mieux qu'un code invalide ;
• parce que plus les navigateurs deviennent conformes aux standards, plus il est impératif d'écrire un HTML conforme et valide.

• le service de validation HTML du W3C [en] ;
• le service de validation CSS du W3C [en] ;
• le validateur HTML du WDG [en] ;
• le validateur CSS de Stylesheets.com [en] ;
• plusieurs logiciels de production sont maintenant dotés de leur propres outils de validation.

• commencer par un doctype approprié ;
• prendre garde aux différents modes de fonctionnement des doctypes (conforme aux standards, capricieux, etc.) ;
• utiliser une table de caractères définie ;
• fermer tous les éléments HTML ;
• ajouter l'attribut "alt", même s'il n'a pas de valeur, à chaque image ;
• faire régulièrement usage d'un validateur HTML ;
• régler toutes les irrégularités décelées avant de publier ;
• introduire la validation dans sa méthodologie de travail.

• parce que cela rend votre site accessible à une plus large auditoire (handicapés visuels, handicapés moteurs, handicapés cognitifs, etc.) ;
• parce que cela rend votre site accessible à un plus large éventail de périphériques (portables, lecteurs d'écrans, navigateurs textuels, engins de recherche, etc.) ;
• parce que c'est exigé par la loi pour tout site gouvernemental (notamment aux États-Unis et au Royaume-Uni).

• associer un équivalent textuel à tout contenu non-textuel ;
• construire des tableaux de données accessibles (en identifiant les en-têtes de lignes et de colonnes, etc.) ;
• élaborer des formulaires accessibles (en utilisant "label for", "id", <fieldset>, <legend>, etc.) ;
• utiliser du texte balisé plutôt que des images pour transmettre de l'information ;
• fournir un lien permettant de sauter le menu ;
• définir des clés d'accès ;
• utiliser des unités de mesure relatives pour contrôler la mise en page et la présentation ;
• s'assurer que les documents peuvent être consultés indépendamment des feuilles de style ;
• définir des métadonnées pour ajouter des informations d'ordre sémantique.

Le développeur web doit chercher à soustraire toute instruction de présentation du code HTML, écrire un code propre et sémantiquement correct.

• accessibilité du code à une plus grande variété de périphériques ;
• plus facile de faire des changements d'ensemble (un seul fichier CSS à modifier plutôt que toutes les pages une à une) ;
• moins de code sur la page, donc de plus petits fichiers et un chargement plus rapide ;
• moins de code sur la page, donc plus facile de coder ;
• permet aux usagers de choisir un design en fonction de leurs besoins (changeur de style) ;
• contrôle accru sur le code (possibilité d'ordonner le code pour les lecteurs d'écran).

Présence d'instructions de présentation sur toutes les pages HTML

Les instructions de présentation sont groupées dans un fichier CSS séparé

Plusieurs fichiers CSS pour contrôler séparément les navigateurs modernes, les imprimantes et les navigateurs désuets

Un des avantages des CSS réside dans le fait de pouvoir transformer l'apparence de tout un site sans toucher à une seule ligne de code HTML.

• sans feuilles de style ;
• sans feuilles de style, mais avec des conteneurs <div> ;
• en HTML ;
• habillé d'un design en CSS ;
• habillé d'un autre design en CSS ;
• en sa version imprimable

• chargement plus rapide des fichiers (moins de code, pas de tableaux imbriqués, code valide, etc.) ;
• contenus accessibles à une plus grande variété d'utilisateurs (gens normaux, aveugles, déficients visuels, dyslexiques, handicapés moteur, etc.) ;
• contenus accessibles à un plus large éventail de périphériques (lecteurs d'écran, navigateurs, navigateurs textuels, portables, engins de recherche, imprimantes, réfrigérateurs, etc.) ;
• permet aux usagers de personnaliser l'apparence du site (changeur de style) ;
• offre une version imprimable pour chaque page.

• facilité de maintenance (moins de code, plus de lisibilité) ;
• coûts d'hébergement réduits (moins de code) ;
• meilleur positionnement dans les engins de recherche ;
• design facilement modifiable sans toucher au code ;
• offre des possibilités de personnalisation aux usagers ;
• offre une version imprimable sans avoir à dupliquer le contenu ;
• augmente l'accessibilité (nécessaire aux clients gouvernementaux).

• codage plus facile (modulaire) ;
• maintenance plus facile (moins de code, plus de lisibilité) ;
• moins de dépendance aux technologies particulières (stabilité du code à travers un plus large éventail de périphériques) ;
• gain de compétitivité dans un monde qui se tourne de plus en plus vers les standards web.

• nécessite de nouveaux apprentissages ;
• ne surmonte pas les problèmes d'incompatibilité entre navigateurs ;
• certaines mises en page demeurent plus faciles à réaliser avec des tableaux qu'avec des CSS.

Les standards web ne sont pas à prendre ou à laisser. Tous les développeurs devraient tendre vers une intégration progressive des standards.

L'acquisition de nouvelles habitudes de travail prend du temps et demande de la pratique. Plutôt que de se précipiter et devenir vite frustré, mieux vaut se fixer des buts réalisables et passer aux standards web graduellement. Par exemple :

• mettre un doctype approprié à toutes les pages ;
• associer un texte "alt" à toutes les images ;
• rédiger des titres de page significatifs.

• valider le code ;
• coder d'une manière sémantiquement correcte ;
• remplacer les balises <font> et les déclarations de couleur par des instructions CSS ;
• rendre les formulaires et les tableaux de données accessibles, et inclure un lien pour sauter le menu.

• remplacer les mises en page simples par un positionnement CSS de base (padding, margin, etc.) ;
• mettre fin aux mises en page par tableaux et tout faire en CSS.

• lire des tutoriels et des livres pour apprendre le langage CSS ;
• se réserver du temps pour apprendre le positionnement CSS à l'abri de toute pression ;
• essayer plusieurs types de mises en page CSS pour acquérir de la confiance en vous-mêmes.

• un chargement plus rapide des fichiers ;
• un code accessible à un plus large éventail d'usagers et de périphériques ;
• des possibilités de personnalisation par l'usager ;
• l'implémentation facile de versions imprimables ;
• une diminution des coûts d'hébergement ;
• un meilleur positionnement dans les engins de recherche ;
• une maintenance plus rapide et plus efficace ;
• une longueur d'avance sur la concurrence.

Bref, les standards web avantagent vos visiteurs, vos clients et vous.

• http://www.zeldman.com [en]
• http://webstandards.org [en]
• http://webstandardsgroup.org [en]
• http://www.nypl.org/styleguide/ [en]

• http://brainstormsandraves.com/articles/semantics/structure/ [en]

• http://validator.w3.org/[en]
• http://www.htmlhelp.com/tools/validator/[en]
• http://webboy.net/presentation/ict2004/validation.htm[en]
• http://webboy.net/presentation/validation.cfm

• http://www.joeclark.org/[en]
• http://www.accessify.com/[en]
• http://www.juicystudio.com/[en]

• http://webboy.net/presentation/ict2004/01.htm [en]
• http://webboy.net/presentation/ict2004/02.htm [en]
• http://webboy.net/presentation/ict2004/03.htm [en]
• http://westciv.com/style_master/academy/css_tutorial/ [en]
• http://css.maxdesign.com.au [en]
• http://www.thenoodleincident.com/tutorials/css/ [en]