Chapitres :

• 01 - Introduction :
• 02 - Déclaration type XML :
• 03 - Contenu de la page :
• 04 - Les Balises :
• 05 - Emboîtage des éléments :
• 06 - Régles pour les Attributs :
  
  
  • 06/01 - Guillemets pour les valeurs des attributs :
  • 06/02 - Enoncer les valeurs des Attributs :
  • 06/03 - Attributs "name" et "id" :
  • 06/04 - Attribut "alt" :
  • 06/05 - Attribut "type" :
    
    
• 07 - Caractères spéciaux :
• 08 - Externalisez les scripts et les feuilles de style :
  

Les règles pour passer de HTML à XHTML

Depuis janvier 2000, le XHTML est le langage préconisé par le W3C pour la conception des pages Web. XHTML est le successeur de HTML 4 et le prédécesseur de XML : il joue de rôle de passerelle entre les deux langages. Voici les règles pour passer de HTML à XHTML1. ..

Chaque page doit être déclarée de type XML. Une page Web normalisée pour le XHTML 1.0 se structure comme ceci :

Toute page doit contenir les éléments html, head, title et body. Les pages doivent être structurées de manière très rigoureuse comme ceci :

Fermer les balises :

Toute balise ouverte doit obligatoirement être fermée. Le cas typique, c'est la balise <p> qui marque un paragraphe. Il faut introduire à la fin du paragraphe la balise de fermeture </p>.

Mais aussi les balises seules :

Les balises seules ne s'appliquent pas au texte : elles ont un rôle en elles-mêmes. Par exemple <br> (pour le saut de ligne) ou encore <img> (pour l'insertion d'une image). On pourrait les coder comme ceci : <br></br>, <img...></img>. Mais c'est inutile car le W3C a prévu une forme abrégée : <br />, <img />. N'oubliez surtout pas l'espace avant le / car les vieux navigateurs (Netscape 4 par exemple) ne pourraient pas les interpréter.
Ceci s'applique aux balises suivantes : <area />, <base />, <basefont />, <br />, <col />, <frame />, <hr />, <img />, <input />, <isindex />, <link />, <meta />, <param />.

Utilisez exclusivement les minuscules pour le nom des balises :

Le XML étant sensible aux majuscules et minuscules, toutes les balises qu'elles contiennent doivent être en minuscules.

Ceci n'est pas valable :
<H1 ID="TitrePrincipal">Titre</H1>

Il faut plutôt faire comme ceci :
<h1 id="TitrePrincipal">Titre</h1>

Emboîtez correctement les éléments.

Quand vous ouvrez des balises successives, il faut obligatoirement les fermer dans l'ordre inverse de leur ouverture.

Par exemple, ceci n'est pas correct :
<p>Paragraphe contenant <div> un calque </p> </div>

Mais ceci est correct :
<p>Paragraphe contenant <div> un calque </div></p>

Ou encore ceci :
<div><p>Calque contenant un paragraphe</p></div>

06/01 - Guillemets pour les valeurs des attributs :

Placez entre guillemets les valeurs des attributs.
Toutes les valeurs d'attribut, quel que soit le type de données (texte, nombre, valeur logique) doivent être encadrées de guillemets simples ou doubles (" ou '). En outre, elles ne peuvent pas contenir d'espace, ni de saut de ligne ou de paragraphe.

Voici ce qu'il ne faut pas faire :
<div id=...></div>.

Faites plutôt :
<div id="..."></div>

ou encore:
<div id='...'></div>

06/02 - Enoncer les valeurs des Attributs :

Enoncez de manière explicite les valeurs de tous les attributs.

En HTML, certaines balises possèdent des attributs qui peuvent être mentionnés sans valeur.
Par exemple : l'attribut checked de la balise input. Bien qu'il s'agisse d'une redondance, la valeur de l'attribut doit obligatoirement être indiquée comme ceci checked="checked".

Avant, vous pouviez encoder :
<input type="checkbox" checked>

Il faut dorénavant encoder :
<input type="checkbox" checked="checked" />

Cette règle s'applique aux attributs suivants : checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly et selected.

06/03 - Attributs "name" et "id" :

Remplacez l'attribut name par id :

En HTML, name servait à nommer les ancres ou tout autre élément (un calque, une image, ...).
Il faut maintenant le remplacer par id. Mais, étant donné que peu de navigateurs interprètent id, il est préférable d'utiliser simultanément les deux attributs name et id en leur attribuant une valeur identique.

Ceci n'est donc plus correct :
<div name="texte">

Mais ceci est correct :
<div name="texte" id="texte">

Attention, l'attribut name ne peut plus du tout être utilisé dans les balises a, applet, form, frame, iframe, img, et map. Seul id est acceptable.

06/04 - Attribut "alt" :

Ajoutez toujours l'attribut alt aux éléments img et area :

L'attribut alt affiche une infobulle au passage de la souris ou remplace l'image dans le cas où celle-ci n'est pas affichée. Il doit être mentionné même s'il est vide.

Comme ceci :
<img src="image.jpg" alt="webinnov" />

06/05 - Attribut "type" :

Ajoutez toujours l'attribut type dans les éléments script et style :

Lorsque vous déclarez un script ou une feuille de style externe, le type des données doit être mentionné.

Déclarez un script comme ceci :
<script language="javascript" type="text/javascript">

Et une feuille de style, comme ceci :
<link href="style.css" rel="stylesheet" type="text/css">

ou comme ceci :
<style type="text/css"> .

Codez les caractères spéciaux.

Dans les valeurs des attributs, y compris les URL, les caractères doivent être remplacés par leur entité.
Par exemple : © pour le signe du copyright. Ceci est surtout vrai pour les caractères qui ont une signification spéciale en HTML : <, >, &.

Codez-les plutôt comme ceci :
&amplt;, &ampgt;, &ampamp;.

Cette URL n'est pas correcte :
<a href="index.php?a=1&b=2">

Celle-ci est correcte :
<a href="index.php?a=1&ampamp;b=2">

Voir le tableau des correspondances

Vous ne pouvez plus inclure les blocs de style et de script entre <!-- et --->, ce qui empêchait les anciens navigateurs d'afficher le texte des éléments s'ils ne pouvaient pas l'interpréter.

En XHTML strict, il faut insérer les scripts et les styles dans une section CDATA comme ceci :
<script language="javascript" type="text/javascript">
<![CDATA[Le code javascript]]>
</script>

Mais la plupart des navigateurs n'interprètent pas CDATA. Il est donc préférable d'isoler les CSS et les scripts dans des fichiers extérieurs.

Il seront alors déclarés de la manière suivante :

<link href="style.css" rel="stylesheet" type="text/css">

et
<script src="script.js" type="text/javascript"></script>