Création de sites web aux standards

Document rédigé initialement pour une collègue qui semble en avoir que faire... pour que ce ne soit pas du temps de perdu je le colle là. C'est incomplet mais c'est un premier jet.

Sémantique

Pour valider un site le « validateur » du W3C (http://validator.w3.org/) est intéressant mais cela reste une machine et ne peut faire le travail d’un humain. Par exemple il ne sais pas valider l’un des points les plus importants des standards HTML et XHTML : la sémantique.

(X)HTML ne sont pas des langages de mise en forme, ce sont des langages de structuration, ainsi ils permettent de dire « ici on as un titre, ici on as un paragraphe, ici on as une liste, etc. » indépendamment du rendu à l’écran.

Les tableaux HTML (élément <table>) ne doivent pas êtres utilisés pour la mise en page de votre document, ceux-ci servent à présenter des données tabulaires (statistiques, feuille Excel, etc.)

Il faut donc veiller à utiliser les éléments HTML à bon escient.

Pour plus d’informations sur la sémantique voir par exemple Respecter la sémantique XHTML sur Open Web.

Séparer structure et présentation

Il faut, autant que faire se peut, séparer la structure (le code HTML) du document de sa mise en forme. Ainsi, tout ce qui concerne la mise en forme du document doit se trouver dans la feuille de style. Le document HTLM, comme nous venons de le voir, ne contiendra que la structure du document. Ainsi selon le médium utilisé (navigateur graphique, navigateur texte, téléphone portable, synthèse vocale, etc.) l’information sera disponible sans parasites.

Ne pas mettre de styles « en ligne » (à l’aide de l’attribut style="…") ni de styles dans l’en-tête du document, préférez la feuille de style externe.

Ne pas mettre de balises et d’attributs de mise en forme tels que <font> ou align= vous aurez des erreurs sur le validateur et il aura raison de vous les signaler puisque la présentation n’a pas sa place dans le document (X)HTML. :)

Variante strict

Pour le type de document (doctype) choisir la variante « strict » plutôt que « transitional ».

En HTML 4.01 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En XHTML 1.0 :

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

Quoi choisir entre HTML 4.01 et XHTML 1.0 ? Il n’y a pas de réponse affirmative à cette question, par contre il est sûr qu’utiliser XHTML demandera plus de rigueur et augmentera la qualité du produit fini. J’aurais donc personnellement tendance à conseiller XHTML.

Pour aller plus loin avec les déclarations de type de document :

Les standards, oui mais doucement

Maintenant il ne s’agit pas d’appliquer des règles drastiques, pour le bien de tous une transition aux standards en douceur est la bienvenue. Ainsi vous pouvez par exemple utiliser un tableau pour la structure générale de votre document.

Par exemple si vous avez un site qui se présente sur trois grandes colonnes vous pouvez utiliser un tableau pour mettre en forme ces colonnes. Par contre n’imbriquer pas les tableaux, vous pouvez faire autrement avec CSS.

Ne passez pas trop de temps à vouloir faire un site entièrement aux standards, allez-y doucement, par petites touches en essayant de vous améliorer à chaque nouvelle chartes.

Ne remplacez pas toutes les cellules de tableaux par des <div>, il y a sûrement un élément porteur de sens qui convient mieux comme un <p>, un <h1>, un <h2> etc.

Il ne s’agit pas de « faire des sites en <div> » mais d’utiliser les standards du web, autrement dit, il s’agit de respecter les normes (X)HTML et CSS. Sombrer dans la « divite » n’est pas une meilleure solution.

Le petits plus

  • Utiliser UTF-8 plutôt que iso-8859-1
  • Pour les polices, utiliser les tailles relatives (em, ex, etc.) plutôt que les tailles absolus (px, pt, etc.)
  • Préférer le format .png au .gif ; le png est le seul format web à supporter la transparence alpha

Sites références

Ouvrages vivement conseillés

Haut de page