Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :

 

X. La norme XHTML

Par Hugo ETIEVANT

  1. Pourquoi cette norme ?
  2. Syntaxe
  3. Exemples
  4. Mise en forme logique
  5. Feuilles de style
  6. Accessibilité

Pourquoi cette norme ?

Le XHTML (eXtended Hyper Text Markup Language), c'est du HTML respectant la syntaxe XML !

Le XML (eXtended Markup Language) étant un nouveau language de description du contenu des documents sur Internet. Très rigoureux dans sa syntaxe ce language se répend très vite auprès du monde professionel car il permet d'échanger les données issues de dataware house (gigantesques bases de données).

Le HTML est très utilisé mais est aussi - revers de la médaille - très mal utilisé. C'est la conséquence directe de la permissivité des navigateurs web qui ont été de plus en plus flexibles face aux erreurs de syntaxe contenues dans les pages.

Le XHTML n'est que du HTML (les mêmes balises avec les mêmes attributs) ni plus, ni moins : c'est exactement le même langage ! La seule différence du XHTML avec son jumeau HTML est que sa syntaxe ne souffre d'aucune souplesse.

Pourquoi alors avoir créé le XHTML si c'est pareil à du HTML ? Pour habituer les webdesigners à la rigidité syntaxique du XML qui va bientôt détroner le HTML.


Syntaxe

La grammaire du XHTML répond à certaines règles :

  • Les noms des balises et des attributs sont en minuscules.
    On écrit : <p> et plus <P>.

  • Les valeurs des attributs sont entre doubles quotes.
    On écrit : <p align="center"> et plus <p align=center>.

  • Tout attribut doit impérativement avoir une valeur.
    On écrit : <table border="1"> et plus <table border>.

  • Toute balise ouvrante doit être refermée.
    On écrit : <p>blabla</p> et plus <p>blabla.

  • Toutes les balises sont ouvrantes.
    On écrit : <br /> et plus <br> ou encore : <hr width="50%" /> et plus <HR WIDTH=50%>.

  • Les balises doivent être correctement imbriquées.
    On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.

Tout document qui se conforme strictement à ces règles sera dit bien formé.


Exemples

On va étudier quelques exemples pour bien se familiariser avec cette nouvelle écriture du HTML qu'est le XHTML.

Images

La balise IMG suivante : <IMG SRC="logo.gif" WIDTH=161 HEIGHT=68> devient : <img src="logo.gif" width="161" height="68" alt="logo" />.

Liens

La balise A suivante : <A HREF=/pages/default.html>cliquez là</A> devient : <a href="/pages/default.html">cliquez là</a>.

Tableaux

Le tableau suivant :
<TABLE BORDER WIDTH=100 HEIGHT=100>
<TR><TD><FONT SIZE=+2><I>Le CyberZoïde Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>

devient :
<table border="1" width="100" height="100">
<tr><td><font size="+2"><i>Le CyberZoïde Qui Frétille</i></font></td></tr>
<tr><td><img src="../images/index.gif" alt="index" /></td></tr>
</table>


Mise en forme logique

Le XML étant un système de balise du contenu, les mises en forme qu'il opère sont purement logiques. Ainsi avec le XML, on ne se préoccupe que de la structure logique du document. Pour la mise en forme (caractères, couleurs, marges...), on utilisera les feuilles de styles.

De même, en XHTML, il est recommandé d'abandonner les balises de mise en forme physique comme <i> (italic pour mettre en italique) au profit des balises de mise en forme logique comme <em> (emphase pour mettre en valeur).

Liste des balises de mise en forme logique
BaliseDescriptionExemple
<cite>pour effectuer une citationessai
<code>pour encadrer du codeessai
<dfn>pour introduire une sous-définitionessai
<em>pour mettre en valeuressai
<kbd>pour indiquer une commande de l'utilisateuressai
<samp>pour afficher une chaîne de caractère de manière littéraleessai
<strong>pour faire ressortir du texteessai
<var>pour indiquer une variableessai

Liste des balises de mise en forme physique
BaliseDescriptionExemple
<i>pour mettre en italiqueessai
<b>pour mettre en grasessai
<u>pour souligneressai
<small>pour diminuer la taille des caractèresessai
<big>pour augmenter la taille des caractèresessai
<sub>pour mettre en indiceessai
<sup>pour mettre en exposantessai
<tt>pour mettre police de chasse fixeessai
<s>pour barreressai
<strike>idemessai


Feuilles de styles

L'idéal est d'abandonner toute balise de mise en forme pour n'utiliser que les deux balises suivantes : span et div. Ainsi, fini les font, p, center et autres aberrations !

Evidemment, ceux deux balises devront être associées à des feuilles de style pour pouvoir mettre en forme vos pages.

Exemple : <div style="font-familly:verdana,arial;font-weight:bold;color:red;"> ou mieux : <div class="erreur">.

Note : span s'utilise localement pour un plusieurs mots alors que div s'applique à un bloc (car effectue un saut de ligne avant et après).

Exemple :
<div class="paragraphe">
Un paragraphe entier, avec beaucoup de lignes.
Et des passages <span class="important">dans d'autres styles</span>.
</div>


Accessibilité

La norme HTML 4 rend obligatoire l'attribut ALT (texte alternatif) de la balise IMG (image). En effet, c'est ce texte qui est affiché en lieu et place de l'image si celle-ci ne peut être affiché (absente, navigateur incompatible, navigateur non voyant). Lors du survol de la souris sur l'image, ce texte est affiché en info-bulle.

Pour ce ceux qui ne peuvent pas voir vos images aient connaissance du sens que portent vos images, pensez bien à mettre l'attribut ALT. Le texte de votre attribut ALT doit être le plus concis possible.

Pour les images ne portant pas de sens, comme par exemple les puces de liste, il faut donner à ALT une chaîne vide pour valeur.

Exemple :
<img src="images/etats.jpg" alt="Les états de la matière : solide, liquide et gazeux." />

Les états de la matière : solide, liquide et gaz.
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -