Sur cette page :

1. Le langage à balises
   1. Un peu de théorie
   2. Qu’est-ce qu’une balise ?
   3. Décrire et préciser
   4. Bien hiérarchiser

3.1# Un peu de théorie

Le principe des langages à balises, et plus particulièrement les langages HTML et XHTML, est de décrire le sens des données d’une page. A partir de maintenant, nous allons nous concentrer sur XHTML. Pour les puristes, je vais omettre les parallèles avec XML, qui risquent plus d’embrouiller les lecteurs qui ne sont pas habitués à cette technologie.

Le HTML est un langage servant à structurer le contenu de la page. Il permet de décrire le plus précisément possible leur sens sémantique : un paragraphe, une citation, une énumération ou même un raccourci clavier, par exemple.

Le résultat d’une page contenant uniquement du HTML ressemblera en quelque sorte à un document de traitement de textes sans ajouter d’éléments de présentation, comme la police ou la couleur. L’image suivante illustre une page HTML, sans styles.

Pour définir le type de contenu et créer cette arborescence, on entoure le contenu de balises.
C’est ce dont nous parlerons dès le prochain paragraphe. Nous commencerons donc à produire du code.

3.2# Qu’est-ce qu’une balise ?

Une balise commence par le signe < et se termine par le signe >.
Un exemple de balise :

<balise>

D’un point de vu syntaxique, il existe trois types de balises :

les balises ouvrantes :

<ouvrante>
< [nom de balise] >

les balises fermantes :

</fermante>
<  / [nom de balise]  >

le symbole / (slash), indique que cette balise est fermante.

et les balises qui se suffisent à elles-mêmes :

<balise />
< [nom de balise] [un espace]  / >

L’espace est optionnel, mais garantira la compatibilité de votre page avec des vieux navigateurs. Le / final est apparu en XHTML, il n’existe pas en HTML.

Enfin, il est possible de placer des extraits de contenu qui ne seront pas interprétés par un système informatique : les commentaires. Ils ne servent qu’à laisser des notes pour les développeurs. Voici la syntaxe de cette balise (qui n’en est pas vraiment une) :

<!-- Ceci est un commentaire
Comme vous pouvez le voir, un commentaire peut être écrit sur plusieurs lignes -->

Les commentaires sont utiles lorsque vous travaillez, mais pensez à la supprimer pour la version en-ligne de vos pages : ils sont en effet téléchargés comme le reste du code.

Ces deux syntaxes auront un rôle distinct. On décrit le contenu avec une balise ouvrante et une balise fermante :

<p>
  le contenu de ce paragraphe
</p>

On utilise une balise qui se suffit à elle-même dans le cas d’un élément indépendant, une image par exemple :

<img />

3.3# Décrire et préciser

pour décrire la balise, on lui ajoute un attribut.

<balise attribut="valeur de l'attribut">
< [nom de balise] [espace] [nom d'attribut] = " [valeur] " >

on peut mettre un nombre illimité d’attribut :

<balise attribut1="valeur1" attribut2="valeur2">
[espace] [nom d'attribut] = " [valeur] "

par exemple :

<citation auteur="Bernard Maingot">
    Parfois je balise avec le langage html ou les liens hypertextes.
</citation>

En XHTML, chaque attribut doit posséder une valeur, entourée de guillemets, qui peuvent être des guillemets simples (' : l’apostrophe).

3.4# Bien hiérarchiser

Le contenu de certaines balises peut contenir d’autres balises, on obtiendra donc une hiérarchie structurée. L’élément englobant une balise est sont parent, la balise incluse dans une autre est donc l’élément enfant. Il est important d’utiliser les tabulations pour hiérarchiser son code. Un élément parent est toujours plus près du bord de gauche qu’un élément enfant :

<parent>
  <enfant>
    Contenu
  </enfant>
</parent>

Il y a quelques règles de syntaxe à respecter en XHTML, mais il est bon de les respecter aussi en HTML.

Cet ensemble de balise constitue un arbre hiérarchisé, c’est pourquoi il est interdit de faire chevaucher deux balises :

<balise1>
    <balise2>
</balise1>
    </balise2>

est faux,

<balise1>
    <balise2>
    </balise2>
</balise1>

est correct.

Les XHTML est composé d’un ensemble de balises ayant chacun leur sens, certaines balises doivent obligatoirement avoir un parent donné, d’autres ne pourront pas avoir d’enfant. Nous en reparlerons plus tard, lorsque nous présenterons certaines d’entre elles.

Maintenant que nous avons abordé le cadre strict de la syntaxe, nous allons pouvoir parler de la sémantique des balises, c’est à dire le sens qu’elles donnent au contenu qu’elles encadrent.