Une rapide entrée en matière pour XHTML
Tags: w3c
Petite introduction aux règles à respecter pour créer des pages web bien structurées, et conforment à la norme XHTML.
XHTML et CSS remplacent HTML et son ensemble de balises de formatage. XHTML et HTML sont très similaires, et la transition de HTML vers XHTML n’induit qu’une petite courbe d’apprentissage et un nouvelle façon de penser. Quant à l’apprentissage de CSS, c’est un petit peu plus compliqué.
Voici donc une approche en trois parties pour adopter XHTML :
- apprendre quelles sont les différences entre HTML et XHTML
- réfléchir sérieusement à la structure du document
- soumettre vos pages au validateur XHTML
HTML contre XHTML
Opérer la transition de HTML vers XHTML n’est pas si difficile que ça. En fait, il n’y a que cinq facteurs principaux à prendre en compte :
A. Assurez vous que toutes les pages débutent par le DOCTYPE et l’espace de noms adéquat.
Les documents XHTML doivent commencer avec une balise qui indique au navigateur comment les interpréter. Les pages Web de toutes les bibliothèques devraient commencer par une déclaration DOCTYPE du type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vous en trouverez d’autres sur le site suivant : site du W3C. Mais sachez pourquoi vous les utilisez car chacunes d’entre elles ont des spécificités bien particuliès.
B. Ecrivez toutes les balises en minuscules.
HTML n’est pas sensible à la casse, mais XHTML l’est et demande à ce que tous les éléments <P> deviennent des éléments <p>, que les <TD> deviennent des <td>, et ainsi de suite. La plupart des éditeurs HTML vous permettront de définir l’écriture par défaut du balisage en minuscules.
C. Mettez tous vos attributs entre guillemets.
En HTML, vous n’avez pas besoin de mettre de guillemets autour des valeurs des attributs. Avec XHTML, celles-ci doivent être mise entre guillemets. Exemple : width="85%" et non width=85%.
D. Fermez tous les éléments.
En HTML, vous avez la possibilité d’ouvrir de nombreux éléments comme <p> et <li> sans avoir à les refermer. Mais en XHTML, chaque <p> doit être fermé par un </p>, et chaque <li> doit être fermé par un </li>.
E. Fermez les éléments “vides”.
En XHTML, même les éléments vides comme <br> et <img> doivent être fermés en incluant un espace et une barre oblique à la fin de chacune de ces balises :
<br />
<img src="library.gif" />
Pensez à la structure du document
Comme tous les langages de balisage, XHTML est supposé donner une structure logique au document. Quand vous écrivez le code de vos documents, pensez en termes de plans traditionnels :
<h1>Sujet ou idée principale</h1><p>Texte d’introduction.</p><h2>Sujet secondaire</h2><p>Texte du sujet secondaire.</p>
Évitez la tentation d’utiliser tous les éléments de formatage désapprouvés ou supprimés comme les balises <font> qui sont utilisées de manière erronée pour procurer une structure visuelle là où il n’existe aucune structure logique.
Ne faites pas ceci :
<p><font color="olive" size="7">Sujet ou idée principale</font>
Mais faites cela :
<h1>Sujet ou idée principale</h1>
Vous pourrez alors appliquer une feuille de style pour donner à l’élément <h1> un style particulier, de sorte qu’il s’affichera avec une couleur olive et une taille plus grande que celle du texte.
En balisant votre document, demandez-vous quelle information votre code enverra à l’appareil qui devra l’utiliser. Si vous vous retrouvez en train de créer une liste comme celle-ci :
un objet<br />un autre objet<br />un troisième objet<br />
Pensez plutôt à utiliser une liste ordonnée ou non ordonnée. Voici un exemple avec une liste non-ordonnée (balise ul - Unordored List) :
<ul><li>un objet</li><li>un autre objet</li><li>un troisième objet</li></ul>
La meta-information fournie par le balisage en apprendra plus à l’appareil qui va l’utiliser sur l’information qui lui est envoyée.
De plus, grâce à ce genre de liste, vous pouvez très simplement imbriquer des éléments dans les autres :
<ul><li>un objet principal<ul><li>un objet se rapportant au principal</li><li>unautreobjet se rapportant au principal</li></ul></li><li>un autre objet</li></ul>
Travaillez avec un validateur
La façon la plus rapide de vérifier votre code et d’apprendre XHTML est de valider vos pages. Le service de validation du W3C testera vos pages pour voir si celles-ci sont valides. C’est-à-dire, si celles si sont conforment au DOCTYPE utilisé d’un point de vue syntaxique.
Ainsi, il recherchera les balises non refermées, des caractères non conformes (les débutants rencontrent la plupart du temps des erreurs sur l’entité AND symbolisée par &). Toutes les erreurs qu’il renvoie correspondent à un contexte technique. Or, les normes ne sont pas que techniques, il y a aussi un aspect philosophique (sémantique).
Avec le validateur d’accessibilité Bobby -un formulaire Web par lequel vous pouvez vérifier l’accessibilité de votre site- le validateur XHTML du W3C fonctionne aussi grâce à un formulaire Web. Passez votre URL dans la zone de saisie, sélectionnez Submit et le validateur testera votre page.
Si le document n’est pas valide, le validateur vous donnera une analyse des problèmes rencontré. Les premières validations peuvent être très frustrantes. Le rapport d’erreur est technique et identifie parfois la mauvaise erreur ; vous aurez peut être à faire un petit travail d’enquêteur.
Voilà pourquoi, vous trouverez ici, des liens vers Opquast, site regroupant des bonnes pratiques à mettre en oeuvre lors de la conception de site web.