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
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
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 ».
Vos commentaires
Suivre les commentaires : |