Tutorial list



Pourquoi plusieurs variantes de DTD en XHTML ?

En bref

Les balises et attributs devenus obsolètes entre le HTML ou XHTML strict et transitional, et les moyens de les remplacer.

Le web évolue et les besoins aussi. Avec l'expérience, on se rend rapidement compte qu'une page en HTML 2 ou 3 devient rapidement lourde et impossible à maintenir. La raison principale en est le mélange dans le langage des balises structurant le contenu et de celles spécifiant la présentation.

Depuis le HTML 4, le langage a évolué et impose dorénavant une séparation du contenu et de la forme. Les balises HTML4.01/XHTML sont ainsi utilisées seulement pour structurer le document, et les feuilles de styles CSS doivent être utilisées pour indiquer au navigateur la manière de présenter chaque élément du contenu.

La variante « strict » du HTML4.01 et du XHTML 1.0 respectent entièrement cette philosophie, et les versions ultérieures du XHTML iront dans ce sens. Mais pour un passage en douceur à cette nouvelle manière de conçevoir les documents, le W3C a créé une autre variante, « transitional » qui permet encore l'utilisation de certaines balises modifiant la présentation comme <font>, <center> etc.

Dans ces deux variantes, vous remarquerez cependant la disparition des balises pour utiliser des frames: il existe en effet une troisième variante pour continuer à les employer : la variante « frameset ».

A noter : la variante strict de HTML 4.01 est identique à la variante strict XHTML 1.0 au niveau des balises disponibles et de leurs attributs. Il en va de même pour les variantes transitional et frameset. Pour connaitre toutes les balises disponibles, consultez la documentation du HTML 4.01. Dans la suite de ce document, nous allons seulement voir les différences (balises en plus ou en moins) entre chaque variante. Mais rappelons tout d'abord la syntaxe des DTD à utiliser.

Syntaxe des DTD

En HTML

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

En XHTML

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

Différences entre transitional et frameset

La variante frameset reprend toutes les balises et attributs de la variantes transitional. Deux balises ont été rajoutée : frameset et frame.

Différences entre strict et transitional

Cette partie va vous permettre de convertir facilement un document non conforme, ou conforme HTML 4.01 transitional, en document XHTML1.0 strict. Comme nous l'avons déjà évoqué précédement, la variante strict oblige une séparation du contenu et de la présentation. Cela implique donc la suppression de toutes les balises et attributs de mise en forme, et l'obligation de passer par les CSS.

Les balises obsolètes en XHTML strict

Les balises obsolètes et les alternatives à leur utilisation
Balise Alternative
<frameset>, <frame> Utilisez la variante frameset du XHTML
<iframe> Utilisez la variante transitionnal du XHTML.
<font> et <basefont> Utilisez les styles CSS font et ses derivés : font-family, font-size, font-weight etc.
<u> le style text-decoration : underline;
<s> et <strike> le style text-decoration : line-through;
<menu> et <dir> Ces balises ont en fait la même fonction que <ul>, seule l'apparence par défaut change. Remplacez-les par une liste <ul> et modifiez l'apparence avec les styles list-style et dérivés (list-style-type…), et éventuellement margin ou padding
<center> le style text-align : center; à mettre sur l'élement parent si on veut centrer des élements de type « inline », ou mettre sur les balises de type « bloc » les styles suivants : margin-left : auto; margin-right : auto;
<isindex> Utilisez la balise <input>
<applet> Utilisez la balise <object>

Les attributs obsolètes en XHTML strict

Les attributs obsolètes et les alternatives à leur utilisation
Attribut Balises concernées Alternative
align <div>, <p>, <h1 à h6>, <hr>, <object>, <img>, <input>, <legend>, <table>, <caption> le style text-align à mettre sur l'élement parent si on veut aligner des élements de type « inline », ou mettre sur les balises de type « bloc » les styles suivants : margin-left , margin-right
background <body> le style background-image que l'on peut utiliser conjointement avec les styles background-position et background-repeat pour positionner et définir la répetition de l'image de fond (il est d'ailleurs possible d'utiliser ces styles sur pratiquement toutes les balises).
bgcolor <body>, <table>, <tr>, <td>, <th> le style background-color
border <object>, <img> le style border
clear <br> le style clear
compact <ul>, <ol>, <dl> jouer sur les styles margin ou padding
height <td>, <th> le style height
hspace, vspace <object>, <img> le style margin
language <script> Aucun. L'attribut type suffit : <script type="text/javascript">
link, alink, vlink <body> Définissez un style par défaut sur la balise <a> ainsi que sur les pseudos classes :link , :visited et :active
name <img>, <form> utilisez l'attribut id
noshade <hr> l'ensemble des styles border , en particulier border-style
nowrap <th>, <td> Le style white-space : nowrap;
size <hr> le style height
start <ol> Utilisez les styles pour gérer des compteurs
target <base>, <link>, <a>, <area>, <form> aucun
text <body> le style color
type <ul>, <ol>, <li> le style list-style
value <li> Utilisez les styles pour gérer des compteurs
width <hr>, <pre>, <td>, <th> le style width

Autres différences

A l'intérieur des balises <form>, <noscript> et <blockquote>, il ne peut plus y avoir des balises de type « inline ».

Une question, une remarque ? Écrivez à l'auteur à laurent.jouanneau@openweb.eu.org.




Tutorial list

 To help you using your templates, we have outlined best of breed tutorials on essential aspects of the web. The tutorials are listed by increasing level of knowledge and they are all under the copyright of their respective authors (who we thank very much). To improve your skills and discover new techniques, we would highly recommend you the reading of this RSS Tutorial List. We are continuously seeking for the best tutorials websites and we display their latest RSS Feed here : 40 superbes tutoriaux du web (RSS) -- New --

Discover CSS

  1. CSS First Steps
  2. Handling CSS Buttons
  3. CSS images bullet list
  4. Background images with CSS
  5. First steps in CSS positionning : 1 Output and relative position
  6. First steps in CSS positionning : 2 Float position
  7. First steps in CSS positionning : 3 Absolute position
  8. First steps in centering a CSS box
  9. Managing CSS Tables
  10. Managing images with CSS

Discover (X)HTML Language

  1. First steps with XHTML
  2. From HTML to XHTML
  3. Use of forms
  4. Document Type (DTD) and old HTML Tags

Other interesting tutorials

  1. 40 excellent tutorials (RSS) -- New --
  2. http://normandlamoureux.com/cours/xhtml
  3. http://www.mammouthland.net
  4. http://fr.selfhtml.org/
  5. http:/fr.html.net/tutorials/css/
  6. http://pompage.net/pompe/listes/