Le DOCTYPE qu’il vous faut

Par Jeffrey Zeldman

Nouveau ! HTML5 arrive progressivement, et son doctype est bien plus simple à retenir : <!DOCTYPE html>. En le rencontrant, tous les navigateurs actuels passent en mode de rendu standard, vous pouvez donc l'utiliser dès aujourd'hui.

Vous avez fait tout ce qu'il fallait, mais votre site ne s'affiche et ne fonctionne pas comme il le devrait dans les derniers navigateurs.

Vous avez utilisé du XHTML valide et des CSS. Vous avez utilisé le Modèle d'Objet de Document (DOM) normalisé du W3C pour manipuler les éléments dynamiques de la page. Pourtant, dans certains navigateurs développés pour supporter ces normes, votre site ne fonctionne pas correctement. Un DOCTYPE fautif en est probablement la cause.

Ce bref article vous fournira des DOCTYPEs fonctionnels, et vous expliquera les effets pratiques, réels, de ces balises autrement très abstraites.

Pourquoi un DOCTYPE ?

Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE.

Comme mentionné dans de précédents articles d'ALA (et dans d'autres endroits intéressants), les DOCTYPEs sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux normes, comme Mozilla, IE5/Mac, et IE6/Win.

Un DOCTYPE récent qui inclut une URI complète (une adresse web complète) commande à ces navigateurs d'afficher votre page en utilisant le "mode conforme" (NdT : "standard-complient mode" , vous pouvez retomber souvent sur le terme), traitant ainsi votre (X)HTML, CSS, et DOM de la manière que vous voulez.

Utiliser un DOCTYPE incomplet ou désaprouvé -voire aucun DOCTYPE- déclenche dans ces navigateurs le mode "Quirks" (NdT : "habitudes bizarres") qui va considérer votre balisage comme invalide et démodé, conforme seulement aux normes déprimantes de l'industrie de la fin des années 90.

Dans ce mode, le navigateur va essayer de traiter votre page en mode de rétro-compatibilité, affichant vos CSS comme IE4 aurait pu le faire, et retournant à un DOM propriétaire et spécifique au navigateur (IE retourne au DOM IE; Mozilla et Netscape 6 retournent vers Dieu sait quoi).

De toute évidence, ce n'est pas ce que vous voulez. Mais c'est souvent ce que vous aurez, à cause de la prépondérance des informations erronées ou incomplètes sur les DOCTYPEs, que cet article va s'efforcer de corriger.

(Note : Le navigateur Opera ne joue pas suivant ces règles ; il essaie toujours d'afficher les pages en mode conforme aux normes. Viva Opera ! D'un autre coté, il n'offre pas encore un support solide du DOM W3C. Mais c'est en passe de changer.)

Où sont passés tous les DOCTYPEs ?

Puisque que les DOCTYPEs sont vitaux au fonctionnement des standards web dans les navigateurs, et que le W3C en est le principal instigateur, vous pourriez vous attendre à ce que le site du W3C vous offre une liste des DOCTYPEs valides, et vous penseriez trouver cette information rapidement, facilement, et en un seul endroit. Mais à l'heure où nous écrivons ces lignes, ça n'est pas le cas.

w3.org n'est pas A List Apart, WebReference, ou Webmonkey. Son but n'est pas d'aider les designers web, les développeurs et les gestionnaires de contenu à se tenir au courant des dernières pratiques ou recommandations technologiques. Ce n'est pas son travail.

Le W3C publie une série de didacticiels, quoique la plupart des développeurs web l'ignorent. Mais le site du W3C héberge principalement une collection de Propositions, Documents de Travail et Recommendations, écrites pour des geeks par des geeks. Et lorsque je dis geek, je ne parle pas de professionnels du web comme vous et moi. Je parle de gens qui nous font ressembler à grand-mère la première fois qu'Elle a Eu un Message™.

Vous pouvez chercher des DOCTYPEs toute la journée sur w3.org sans trouver une seule page qui les énumère tous. Et lorsque vous arrivez enfin à en traquer un (généralement en relation avec une Recommendation ou un Document de Travail ), il ne fonctionne généralement pas sur votre site.

Éparpillés à travers le site du W3C, vous trouverez des DOCTYPEs sans URI et des DOCTYPEs avec des URIs relatives qui pointent sur le site du W3C lui-même. Utilisées sur votre page web, ces URIs pointeraient vers des documents non-existants, détruisant ainsi tous vos efforts et ceux du navigateur.

Par exemple, beaucoup de sites arborent fièrement ce DOCTYPE, copié-collé directement de w3.org :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">

Si vous regardez la dernière partie du DOCTYPE ("DTD/xhtml1-strict.dtd"), vous verrez que c'est à l'origine un lien relatif vers un document se trouvant sur le site du W3C. Puisque ce document est sur leur site et non sur le vôtre, l'URI est inutile au navigateur.

Le DOCTYPE que vous devriez utiliser est en fait :

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

Notez que ce DOCTYPE inclut une URI complète en fin de balise. Puisque la balise pointe vers un emplacement valide sur le web, le navigateur sait où le trouver et affichera votre page en conformité avec les normes.

Des DOCTYPEs qui marchent

Alors quels DOCTYPEs devrions-nous utiliser ? Heureux que vous posiez la question. Les DOCTYPEs complets dont nous avons besoin sont les suivants :

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">	

<!DOCTYPEhtml 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">

Étapes suivantes

Comment pouvez-vous aider à améliorer le support des normes sur le web ? À part ajouter cette page à vos favoris (et recopier ces DOCTYPEs pour votre propre usage), si votre éditeur web insère des DOCTYPEs vous pouvez les vérifier et les comparer à ceux de cette liste.

Beaucoup de fabricants de logiciels bien intentionnés ont copié-collé dans leurs programmes des DOCTYPEs incomplets depuis le site du W3C. Résultat : lorsque vous utilisez l'option d'insertion de DOCTYPE de ces logiciels, le navigateur passe en mode "Quirks" et tout votre travail part en fumée.

Ça vaut le coup de contacter les gens qui fabriquent votre suite de dévelopement préférée, et de poliment leur faire part de ce problème pour correction dans la prochaine mise à jour (dans certains cas, vous pouvez modifier votre éditeur vous-même).

Bientôt sur vos écrans

Nous avons toutes les raisons de penser que le site du W3C affichera bientôt une liste de DOCTYPEs corrects et utilisables, ainsi que d'autres informations essentielles, le tout dans un endroit facile à trouver (NdT : cette liste existe désormais). D'ailleurs, Karl Dubost, Conformance Manager de l'équipe Quality Insurance du W3C, a contribué aux informations contenues dans ce petit article.

De même, dès que le site du Web Standard Project sera ré-ouvert (très prochainement), il comportera aussi cette information. (NdT : vous pouvez y trouver aujourd'hui des modèles de pages avec DOCTYPEs complets.

Mais des sites sont conçus et construits tous les jours, et vous avez besoin de cette information tout de suite -alors la voilà.

Joyeux développement, et bon affichage !

Nouveau ! HTML5 arrive progressivement, et son doctype est bien plus simple à retenir : <!DOCTYPE html>. En le rencontrant, tous les navigateurs actuels passent en mode de rendu standard, vous pouvez donc l'utiliser dès aujourd'hui.

Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Jeffrey Zeldman est le directeur créatif ainsi que le rédacteur en chef du site A List Apart.
Son dernier livre, Designing With Web Standards, s’impose déjà comme une référence en matière de web design.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

Web design

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site