Je vous propose un tutorial original sur les doctypes. Ce n'est pas très difficile mais apprenez les, ça peut être utile pour eviter les erreurs W3C sur votre site Web.
I - Initiation aux Doctypes
On parle de 'Doctype' pour faire court. Il s'agit en fait d'une ligne de déclaration du type de document. La ligne est placée en début du fichier HTML. Elle indique au navigateur dans quel type de HTML la page a été codé (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...). Cette ligne ressemble à ce code :
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "type_de_HTML" "adresse_de_DTD">
type_de_HTML est l'identificateur de la version du HTML utilisé. adresse_de_DTD donne l'URL de la «document type declaration» (DTD), à savoir un document spécifiant les propriétés de chaque élément, balises et attributs, de ce type de HTML.Par exemple, on aura :
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Ces doctypes sont généralement mis en place par l'éditeur HTML utilisé. Si vous codez votre site web vous même, il n'y aura donc aucune question à se poser.
II - Pourquoi mettre un Doctype ?
Tout d'abord, lors de la déclaration du Doctype, W3C pourra validé (ou non) votre site. Sans le Doctype, il vous mettra un petit message d'erreur. La plus part d'entre vous mettrons ce code sans réellement savoir de quoi il en retourne.
Cette ligne n'est prise en compte que par les navigateurs récents comme Firefox, Opera7, IE6 ou plus. Le navigateur se casse moins la tête à tout déchiffrer : il ne prendra pas en compte les balises qui ne sont plus valides. La tache est donc plus simple pour le navigateur
.Sans doctype, le navigateur va tout interpréter. Les codes non-valides vont poser un problème. Le navigateur va donc chercher à l'interpreter grâce aux versions antérieures du HTML ou à des habitudes qui se sont mises en place dans les premiers navigateurs sans trop tenir compte de la norme internationale de l'époque. Il est donc possible que l'affichage du site soit légerement modifié.
III - Internet Explorer : un cas à part
En règle général, lorsqu'un site a été validé par W3C, on pourrait enlever la doctype : les navigateurs (IE exclu) interprèteraient le site de la même manière qu'avec le Doctype.
Mais Internet Explorer met le bazar ! Il arrive de temps en temps que cette interprétation change la disposition des boîtes de votre site Web. En effet, les attributs width et height sont interprétés autrement. La dimension des boîtes peuvent changer en passant de Mozila à IE.
IV - Les doctypes possibles
1 - HTML 4.01
- Code: Tout sélectionner
<!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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
2 - xHTML 1.0
- Code: Tout sélectionner
<!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 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
V - Je choisi quel Doctype ?
1 - HTML 4.01 transitional
Le document est du HTML : il ne peut pas être traité comme du XML.
Pas de balises propriétaires (<marquee>, <embed>, etc).
La fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td est optionnelle.
Les balises peuvent être écrites en majuscules ou en minuscules.
Pour les valeurs des attributs HTML, les guillemets peuvent être omis.
Les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION selected="selected">.
L'attribut target des liens est autorisé.
Les éléments IFRAME sont autorisés (mais pas FRAMESET ni FRAME).
Les attributs et éléments de présentation suivants sont autorisés :
Eléments : BASEFONT et FONT.
Eléments : CENTER, U, STRIKE et S.
Attributs : ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT de l'élément BODY.
Attributs : BGCOLOR, HEIGHT, NOWRAP, WIDTH des éléments internes de tableaux.
Attributs : BORDER, HSPACE, VSPACE des images et objets.
Attributs : CLEAR, NOSHADE, SIZE, WIDTH des lignes de séparation HR.
Attributs : COMPACT, TYPE des éléments de liste, et attributs START, VALUE des listes numérotées.
Attribut : WIDTH de l'élément PRE.
2 - HTML 4.01 strict
Le document est du HTML : il ne peut pas être traité comme du XML.
Pas de balises propriétaires (<marquee>, <embed>, etc).
La fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td est optionnelle.
Les balises peuvent être écrites en majuscules ou en minuscules.
Pour les valeurs des attributs HTML, les guillemets peuvent être omis.
Les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION selected="selected">.
Mais :
Les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être dans un CSS.
L'attribut target des liens n'est pas autorisé.
Les IFRAME ne sont pas autorisés (ni FRAMESET et FRAME).
3 - HTML 4.01 frameset
Les règles sont identiques à HTML4.01 transitionnal, mais l'élément BODY n'existe plus. Il est remplacé par l'élément FRAMESET, qui contient les éléments FRAME.
4 - XHTML 1.0 transitional
Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (IE bloque un peu dans ce domaine).
Les balises propriétaires ne sont pas autorisées.
Toutes les balises sans exceptions doivent être fermées.
Toutes les balises et leurs attributs doivent être en minuscules.
Les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il faut écrire uniquement <option selected="selected">.
Les guillemets sont obligatoires autour de toutes les valeurs d’attributs.
Mais, exactement comme en HTML 4.01 transitionnal, on a :
L'attribut target des liens est autorisé.
Les éléments iframe sont autorisés (mais pas frameset ni frame).
Les attributs et éléments de présentation suivants sont autorisés :
Eléments : basefont et font.
Eléments : center, u, strike et s.
Attributs : alink, background, bgcolor, link, vlink, text de l'élément body.
Attributs : bgcolor, height, nowrap, width des éléments internes de tableaux.
Attributs : border, hspace, vspace des images et objets.
Attributs : clear, noshade, size, width des lignes de séparation HR.
Attributs : compact, type des éléments de liste, et attributs start, value des listes numérotées.
Attribut : width de l'élément pre.
5 - XHTML 1.0 strict
Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (IE bloque un peu dans ce domaine).
Les balises propriétaires ne sont pas autorisées.
Toutes les balises sans exceptions doivent être fermées.
Toutes les balises et leurs attributs doivent être en minuscules.
Les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il faut écrire uniquement <option selected="selected">.
Les guillemets sont obligatoires autour de toutes les valeurs d’attributs.
Mais, à l’inverse du XHTML 1.0 transitionnal, et exactement comme en HTML 4.01 Strict :
Les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être dans un CSS.
L'attribut target des liens n'est pas autorisé.
Les iframe ne sont pas autorisés (ni frameset et frame).
6 - XHTML 1.0 framset
Les règles sont identiques à XHTML 1.0 transitionnal, mais l'élément BODY n'existe plus. Il est remplacé par l'élément FRAMESET, qui contient les éléments FRAME.
7 - Conclusion
Si vous utilisez des iframe ou un attribut target, Utilisez XHTML 1.0 transitional.
Si vous voulez utiliser les frameset et frame : utilisez la DTD XHTML 1.0 frameset.
Sinon vous pourrez utiliser du XHTML 1.0 strict.
Le XHTML1.0 n'est pas plus difficile à apprendre que le HTML 4.01, au contraire : la syntaxe rigoureuse limite les risques d'erreurs.
En effet, le XHTML 1.0 est souvent préférable.
Lien utile : WC3
J'espère que ce tutorial vous permettra de comprendre ce qu'est un Doctype et à quoi il sert
.
