Initiation au XHTML

page en cours d'élaboration

Cette page résulte de la session de cours qui s'est déroulé le 14.12.06 sur le chan #ubuntu-fr-classroom du réseau Freenode.

Ce cours a été mené par _Enchained.

Le XHTML est un langage de balisage servant à créer des pages web. Il est la dernière norme proposée par le w3c. La version 1.0 que l'on va utiliser ici est en fait une simple reformulation du langage HTML avec une syntaxe XML. De ce fait, il sert de langage de transition entre le HTML et le XML. Il offre donc la possibilité de créer une page qui sera lue à la fois par un ancien navigateur ne comprenant que le HTML et les nouveaux navigateurs qui interprètent le XML.

Le XHTML est un langage à balises. On va donc voir les éléments composant ce langage :

Les balises servent à marquer le contenu du document afin de le structurer.

On distingue :

• la balise ouvrante : exemple : <p>
• la balise fermante : exemple : </p>

Certaines balises n'ont qu'un seul élément. On pourrait les qualifier de balises simples ou auto-fermantes (Note: ces termes sont personnels).
Elle ressemble alors a une balise ouvrante fermée à la fin. exemple : <br />

Les balises peuvent prendre des atributs.
Ces attributs auront une valeur associée.
La syntaxe est : <balise attribut="valeur">

La différence entre HTML et XHTML porte principalement sur les règles de syntaxe de ces deux langages.

• Des éléments comme html, head ou body sont optionnels.
• Certaines balises fermantes sont optionnelles, notamment pour p (paragraphe) et li (item de liste).
• Les noms de balises et de leurs attributs peuvent mélanger majuscules et minuscules.
• Les guillemets ne sont pas toujours obligatoires autour des valeurs d'attribut.
• Les éléments vides n'ont pas de balise fermante <img src="image.png" alt="image">.

Vous l'aurez compris : HTML est assez souple sur la syntaxe.
XHTML lui est beacoup plus strict et donc apporte une rigueur de syntaxe qui est un "plus" en développement web.

• Tous les éléments doivent être explicitement balisés (et donc html, head, body,…)
• Toutes les balises doivent être fermées.
• Les éléments vides aussi : <img src="image.png" alt="image.png" />
• Les noms de balises et d'attributs doivent être en minuscules.
• Tous les attributs doivent avoir une valeur explicite.
• Les valeurs d'attributs doivent être entre guillemets.

En plus de ces règles de syntaxe, les balises d'un document XHTML se doivent d'être bien imbriquées, c'est à dire que si on ouvre une balise X puis une balise Y, il faudra d'abord refermer la balise Y avant de refermer la balise X.

Exemple

<p><em>texte</em></p>   BON
<p><em>texte</p></em>   MAUVAIS

Afin d'obtenir un code lisible (humainement), on veillera à bien indenter le code (l'indentation consiste à insérer une tabulation (ou des espaces selon ce que l'on préfère) à chaque fois qu'on descend d'un niveau dans l'imbrication des balises, et à l'inverse à supprimer une tabulation (ou espaces) lorsque l'on remonte d'un niveau dans l'imbrication.

Exemple
bien indenté

<div>
  <p>un premier paragraphe</p>
  <div>
    <p>autre chose</p>
  </div>
</div>

non indenté

<div>
<p>un premier paragraphe</p>
<div>
<p>autre chose</p>
</div>
</div>

On remarquera que le premier exemple est beaucoup plus lisible, puisqu'on voit visuellement "l'arborescence" du document.

Avant de commencer à rédiger une page en XHTML, il faut se poser la question de l'encodage de caractères utilisé.

Sous Ubuntu, l'encodage utilisé par le système (par défaut) est UTF-8.
Sous Windows, c'est un "pseudo" ISO-8859-1 qui est utilisé.

Vous devez donc choisir si vous aller coder votre page en ISO ou en UTF-8.

L'encodage iso-8859-1 prend en compte les caractères spéciaux des langues d'europe occidentale comme le français (accents, cédilles, …)
L'encodage iso-8859-15 est le même, avec en plus le support du € et d'autres symboles.
L'encodage utf-8, lui comprend tous les caractères de toutes les langues.

Une fois l'encodage choisi, il faut savoir que vous devrez spécifier cet encodage dans vos fichiers et que les fichiers eux mêmes doivent être enregistrés avec cet encodage, et donc il faudra veiller à ce que l'éditeur texte et le système d'exploitation utilisé prenne en charge cet encodage.
De plus, il faudra aussi que le serveur qui délivrera vos pages aux visiteurs supporte l'encodage choisi.

La première ligne du document spécifie qu'on va utiliser une syntaxe de type XML avec l'encodage utf-8 (remplacer par l'encodage choisi si différent).

<?xml version="1.0" encoding="utf-8"?>

Ensuite, il faut déclarer quelle DTD on utilise.
La DTD va indiquer au navigateur web quelles sont les règles de syntaxe et de grammaire que respecte le document (et donc comment les interpréter).

Pour chaque version de XHTML (comme pour HTML), il existe 3 DTD :

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "DTD/xhtml1-frameset.dtd">

La DTD Frameset est prévue pour faire un site utilisant les Frames, ce qui est vivement déconseillé pour des raisons d'accessibilité.

La DTD Transitional est une version un peu plus souple que la Strict, vous autorisant à mettre quelques informations de mise en page dans le XHTML, ce qui rendra un changement de design plus compliqué.

La DTD Strict, elle, vise à réaliser un site web en séparant contenu (structure) et sa mise en page. C'est la façon la plus rigoureuse de faire un site web et donc celle qu'on choisira. L'intérêt de la séparation du contenu et de la mise en page est que tout le design sera géré via un seul fichier (une feuille de style CSS), et donc on pourra changer le design d'un site entier en modifiant un seul fichier.

La racine d'un document est la balise html.
On inclue dans la balise <html> ouvrante des attributs pour spécifier l'espace de nommage utilisé par XHTML et la langue du document :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Sous l'élément <html>, se trouve l'élément <head> qui contiendra les meta-données du document, dont le titre de la page et l'encodage des caractères :

<head>
  <title>titre de la page</title>
  <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=utf-8" />
</head>

L'élément <body> contient le contenu affiché (corps du document).

Voici donc un modèle de page XHTML dans lequel il ne reste plus qu'à insérer le contenu :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>titre de la page</title>
    <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=utf-8" />
  </head>
  <body>
    
  </body>
</html>

Il existe deux types de balises. Le type aura un impact sur le comportement, le positionnement et l'affichage de l'élément.

Les éléments de types "block" sont des éléments en rapport avec la structure générale du document et qui marquent le "plan" de la page comme les titres, paragraphes, blocs de citation, listes, …

Les éléments "inline" ("en ligne" ou encore "au fil du texte") sont utilisés pour enrichir localement des portions de texte : liens hypertextes, emphases et renforcement, ou tout autre effet possible sur du texte…

On peut utiliser six niveaux hiérarchiques de titres. On utilise la balise <hX> </hX>, où X est un nombre entre 1 et 6, 1 étant le niveau le plus important :

<h1>Titre le plus important</h1>
<h2>Titre moins important</h2>
<h3>Titre encore moins important</h3>
<h4>Titre encore moins important</h4>
<h5>Titre encore moins important</h5>
<h6>Titre le moins important</h6>

Cette balise déroge à la règle des balises block puisqu'elle ne peut pas contenir un autre élément block.