Introduction au (X)HTML
Dans le Web moderne on parle de plus en plus de séparation entre la structure et la présentation des documents Web. On va donc commencer par définir ces deux termes : la structure et la présentation d'un document Web.
- Structure d'un document Web : La structure d'un document correspond à son organisation. C'est la façon dont on se représente le document dans sa tête. Un document contient un titre, puis des sous-titres et dans chaque partie on trouve des paragraphes et ainsi de suite. La structure n'est pas linéaire, elle est arborescente : on a la notion de fils/père qui entre en jeu (un paragraphe est le fils d'un chapitre de notre document par exemple). Dans le mot structure se cache également le mot sémantique : chaque élément de la structure a une sémantique, une nature, une signification, un sens. Par exemple : un document contient un titre, il contient des sous-titres, des paragraphes, toutes ces choses constituent la sémantique du document.
- Présentation d'un document Web : La présentation c'est la couche de peinture que l'on applique sur notre construction (notre structure). C'est le "look" que va avoir notre document, comment va t'il s'afficher… Quand on parle de présentation on a le mot visuel qui vient à l'esprit, mais en réalité la présentation d'un document ne s'arrête pas la. On peut également présenter un document à un aveugle en utilisant un synthétiseur vocal. On verra par la suite comment tout cela fonctionne mais la présentation d'un document ne rentre pas dans le sujet de cet article. On verra dans de prochains articles que la présentation peut être décrite par les CSS.
Le XHTML est un langage qui permet de créer la structure et le contenu d'un document Web. Il ne permet en aucun cas de créer sa présentation.
Maintenant que les notions de bases sont acquises, on va passer à la pratique.
La syntaxe du XHTML (XML)
Grossièrement, un document Web est constitué de contenu, de balises, et d'attributs. Le contenu du document est le texte, les images, les vidéos, la musique … que l'on met dans notre document. Les balises servent à structurer ce contenu et les attributs permettent de préciser la signification des balises.
Commençons donc par définir les mots balise et attribut :
- Balise : Une balise est un élément de notre document. Elle permet de structurer de façon arborescente le document. On parle de balise ouvrante et de balise fermante : par exemple "<strong>" est une balise ouvrante tandis que "</strong>" est une balise fermante, dans cet exemple strong est le nom de notre balise.
- Attribut : Un attribut est une propriété d'un élément. Il permet de préciser le rôle ou certaines propriétés d'une balise dans le document. Par exemple : dans le code suivant
<div id="menu">, id est un attribut de la balise ouvrante div dont la valeur est menu (les doubles guillemets sont importants autour de la valeur).
Le XHTML est basé sur XML, il hérite donc de sa syntaxe. Voila les principales règles à retenir :
- Une balise ouverte doit toujours être fermée. Exemple :
<html>…</html>. Les balises n'ayant pas de contenu doivent être fermé en rajoutant "/>" à la fin de la balise. ex:<img src="…" alt="…" /> - Les noms des balises et des attributs sont toujours en minuscule. Exemple :
<html>et pas<HTML> - Les valeurs des attributs doivent être entre guillemets doubles (ou simple). Exemple :
<div id="menu">
Voila maintenant un exemple concret de contenu structuré à l'aide de balises :
<body> <h1>L'Osmose</h1> <h2>Définition</h2> <p><strong>Osmose :</strong> phénomène de diffusion à travers une membrane semi-perméable ...</p> <h2>Démonstration</h2> <p>Versez 200ml d'eau douces dans deux récipients identiques et transparents ...</p> </body>
La balise "<body>" est la racine de notre structure : c'est elle qui englobe toutes les autres balises. Les balises "<h1>", "<h2>", et "<p>" sont des balises filles de "<body>", elles sont contenues par la balise "<body>". La balise "<strong>" est une descendante directe de sa balise mère "<p>". On a donc bien une structure arborescente :
+ body
+ h1
+ h2
+ p
+ strong
+ h2
+ p
Nous verrons un peu plus loin ce que signifie les différentes balises que nous venons d'utiliser dans notre exemple : body, h1, h2, p, strong.
Modèle d'un document XHTML
Voici à quoi ressemble un document XHTML vide :
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </html>
Le contenu du document se trouvera alors entre les balises <html> et </html>.
L'attribut encoding="ISO-8859-1" signifie que l'on va utiliser des caractères français pour écrire notre document. (en réalité ce n'est pas tout à fait juste, je ferais plus tard un article pour expliquer les nuances des jeux de caractères)
Un élément obligatoire dans un document XHTML est son titre. On donne le titre du document dans une partie appelée en-tête. L'en-tête se situe au début du document (après la balise <html>) ; elle est délimitée par les balises <head> et </head>.
Le titre est défini à l'aide de la balise title. Voici un exemple :
<head> <title>Titre du document</title> </head>
Finalement voici le code XHTML correspondant à notre exemple précédent :
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>L'Osmose</title> </head> <body> <h1>L'Osmose</h1> <h2>Définition</h2> <p><strong>Osmose :</strong> phénomène de diffusion à travers une membrane semi-perméable ...</p> <h2>Démonstration</h2> <p>Versez 200ml d'eau douces dans deux récipients identiques et transparents ...</p> </body> </html>
Pour tester ce document, vous pouvez copier le code dans un fichier texte vide (vous pouvez le nommer document.html) puis vérifiez qu'il s'affiche dans votre navigateur favoris (je vous conseil mozilla).
La sémantique du XHTML
On a vu précédemment que les balises permettent d'organiser le document, de le structurer. Mais cette structure n'est bien entendu pas innocente, chaque éléments de la structure a une signification, une nature, une sémantique. Connaître la sémantique des éléments permet d'utiliser des balises qui vont enrichir le document, utiliser des balises génériques pour structurer chaque partie de son document ne va par contre rien apporté en terme de compréhension. En effet, on voit de plus en plus sur le Web l'utilisation abusive de la balise "<div>" qui permet de structurer son documents en bloques génériques n'ayant pas de sémantique. L'utilisation des balises génériques doit être évitée quand une balise équivalente (avec sémantique) existe. Ne pas utiliser la sémantique c'est se priver d'un niveau de compréhension du document. Pour s'en convaincre il suffit d'imaginer un aveugle lisant votre document en braille, pour lui les informations sémantiques des balises sont très importantes !
Je vais maintenant lister les différentes balises les plus utilisées dans la rédaction d'un document Web, en expliquer le sens et montrer dans quel contexte on peut les utiliser.
Les titres : "<h1>, <h2>, <h3> <h4>, <h5>, et <h6>"
Ces balises permettent de créer différents niveaux de titres. h1 est un titre important, h2 un peu moins, et ainsi de suite.
Exemple :
<h1>L'Osmose</h1>
Les paragraphes : "<p>"
Cette balise permet de délimiter un paragraphe. Un paragraphe sera affiché avec un espacement avant et après, permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des éléments du document.
Exemple :
<p>Cette semaine, en lien avec l'actualité</p>
Les liens : "<a href="">"
Un lien permet de relier une partie d'un document (le plus souvent du texte) à un autre document. Un document est identifié par son URL. Pour référencer le document visé, on utilise un attribut de la balise "<a>" qui se nomme "href" dont la valeur est l'URL du document cible.
Exemple :
<a href="http://www.w3.org">Le site du W3C</a>
Les images : "<img alt="" src="" />"
Les images sont des fichiers (png, jpg, gif) que l'on peut insérer dans des documents Web en utilisant la balise "<img>". L'attribut "src" permet de référencer le fichier de l'image (de la même façon que pour les liens). Un autre attribut important et obligatoire est "alt" (alterné) : c'est un texte décrivant le contenu de l'image. Le texte alterné permet de remplacer l'image si celle ci n'est pas accessible, il est utilisé sur les terminaux textes et pour les déficients visuels.
Exemple :
<img alt="Logo de mon site Web" src="logo.png"/>
Les listes non-ordonnées: "<ul>, <li>"
Également appelées listes à puces, elles permettent de créer des listes d'éléments. Elles commencent par un "<ul>" et terminent par un "</ul>". Chaque élément de la liste est contenu dans une balise "<li>".
Exemple :
<ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul>
Les listes ordonnées: "<ol>, <li>"
Ce type de liste est similaire aux listes à puce mis à part que l'ordre des éléments a une importance. Elles sont affichées avec des numéros. Elles commencent par "<ol>" et finissent par "</ol>".
Exemple :
<ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ol>
Les listes de définitions: "<dl>, <dt>, <dd>"
Ces listes permettent d'afficher des listes de définitions de termes. Les listes de définitions commencent par un "<dl>" et finissent par un "</dl>". Chaque terme décrit est contenu dans une balise "<dt>" et la description est contenue dans une ou plusieurs balises "<dd>".
Exemple :
<dl> <dt>Cosmologie</dt> <dd>La cosmologie est la tentative d'étudier la forme et l'évolution de l'Univers dans son ensemble.</dd> <dt>Entropie</dt> <dd>L'entropie est la quantité physique qui mesure le degré de désordre d'un système.</dd> </dl>
Les divisions : "<div>"
Cette balise permet de délimiter des bloques génériques dans le document. Ils sont utilisés pour rajouter de la structure au document. Ceci est souvent nécessaire pour la présentation du document. Par exemple on peut mettre un menu dans une division pour pouvoir le positionner sur une colonne à droite ou à gauche. Avant d'utiliser une division, il est important de bien vérifier qu'elle est bien nécessaire pour ne pas surcharger la structure du document.
Exemple :
<div id="menu"> <ul> <li>Accueil</li> <li>Actualités</li> <li>Météo</li> </ul> </div>
Il existe encore beaucoup de balises que je n'ai pas évoqués et je compléterai certainement la liste plus tard. Si vous voulez une liste exhaustive, vous pouvez aller piocher directement dans les spécification XHTML du W3C (ici en français).
Vérifier son document (le valider)
Personne n'est à l'abri de faire des erreurs, il est donc important de vérifier que son documents ne comporte pas d'erreurs au niveau de la syntaxe et de sa structure avant de le publier.
Le W3C propose un outil en ligne qui permet de vérifier ses documents très simplement. Voici le lien : Validateur du W3C. Vous pouvez l'utiliser de deux façons : en envoyant votre document local sur le site, ou en donnant l'URL de votre document online.
Cet article nous a permis de comprendre la notion de structure dans un document Web. La prochaine étape sera de comprendre comment le présenter : on verra dans un prochain article que le langage CSS est fait pour ça. Voila j'ai terminé cette introduction au XHTML, j'espère avoir été assez clair. N'hésitez pas à me faire part de vos remarques dans le forum.
Liens
- OpenWeb (fr)
)
Discussion
Très bon article ! Un seul bémol : attention à l'utilisation du prologue XML qui fait passer IE ⇐ 6 en mode Quirks.
Je me permets de faire un peu de pub pour “Squelettor”, un outil mis à disposition sur Alsacréations, qui permet de générer la structure de base d'un document (X)HTML (DTD, élements html, head, title, body, …) : http://css.alsacreations.com/outils/squelettor/index.php