Cet exemple illustre les différences syntaxiques les plus courantes entre un document écrit en HTML 4 et en XHTML 1.0
<!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>Exemple XHTML 1.0</title> </head> <body> <ul> <li>Tous les éléments doivent être explicitement balisés.</li> <li>Les balises fermantes ne sont pas optionnelles.</li> <li>Les noms d’éléments et d’attributs <em class=”important”>doivent </em> être en minuscules.</li> <li>Tous les attributs doivent avoir une valeur explicite <input type=”checkbox” checked=”checked” value=”...” /> .</li> <li>Les guillemets sont <em class=”important”>toujours</em> obligatoires autour des valeurs d’attribut.</li> <li>Les éléments vides doivent être fermés <img src=”i.png” alt=”i”/>.</li> </ul> </body> </html>
Ce sont les balises qui structurent une page XHTML. Elles sont indispensables pour réaliser le “code minimal” d’une page web.
Ainsi, voici le code minimal d’une page XHTML:
Ces balises sont situées entre <head> et </head>
<title>
<style>
<script>
<meta />
<link />
Balise <a> (de type “inline”)
lien vers une ancre
| Balise | Type | Description |
| <span> | Inline | Balise générique de type Inline |
| <div> | Block | Balise générique de type block |
Balises de structuration du texte
| Balise | Type | Description |
| <p> | Block | Paragraphe |
| <br /> | Inline | Retour à la ligne |
| <img /> | Inline | Insère une image. |
| <h1> | Block | Titre de niveau 1 |
| <h2> | Block | Titre de niveau 2 |
| <h3> | Block | Titre de niveau 3 |
| <h4> | Block | Titre de niveau 4 |
| <h5> | Block | Titre de niveau 5 |
| <h6> | Block | Titre de niveau 6 |
| <em> | Inline | Mise en valeur (faible, le texte est généralement mis en italique.) |
| <strong> | Inline | Mise en valeur (forte, le texte est généralement mis en gras.) |
| <sub> | Inline | Mise en indice |
| <sup> | Inline | Mise en exposant |
| <q> | Inline | Citation (courte) |
| <cite> | Inline | Citation (moyenne) |
| <blockquote> | Block | Citation (longue). Vous devez obligatoirement mettre une balise de paragraphe à l’intérieur du blockquote |
| <acronym> | Inline | Sert à définir des acronymes. (exemple:<acronym title=”Central Intelligence Agency”>C.I.A.</acronym>) On utilise généralement l’attribut title pour donner la définition de l’acronyme quand on pointe dessus |
| <hr /> | Block | Crée une ligne de séparation horizontale |
| <address> | Block | Permet d’indiquer une adresse, ou éventuellement l’auteur d’un document. Le texte est généralement mis en italique. |
| <del> | Inline | Permer d’indiquer un texte qui a été supprimé. Le texte est généralement barré. |
| <ins> | Inline | Permet d’indiquer un texte qui a été inséré. Le texte est généralement souligné. |
| <dfn> | Inline | Permet d’indiquer une définition. |
| <kbd> | Inline | Permet d’indiquer un code que doit taper le visiteur. |
| <pre> | Block | Le texte à l’intérieur de la balise sera affiché tel qu’il a été tapé dans le code (espaces et entrées compris). Une police de taille fixe est utilisée. |
| Balise | Type | Description |
| <ul> | Block | Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste. Exemple : <ul> <li>Un élément</li> <li>Un autre élément</li> </ul> |
| <ol> | Block | Liste à puces numérotée. Vous devez mettre un <li></li> par élément de la liste. Exemple : <ol> <li>Elément n°1</li> <li>Elément n°2</li> </ol> |
| <li> | list-item | Permet de créer un élément de liste. Le type de la balise est particulier car elle n’est ni block ni inline. On dit qu’elle est de type list-item. |
| <dl> | Block | Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>. Exemple : <dl> <dt>Porte</dt> <dd>Ouverture dans un mur permettant d’entrer et de sortir</dd> <dt>Théâtre</dt> <dd>Lieu où l’on représente des ouvrages dramatiques</dd> </dl> |
| <dt> | Block | Terme à définir |
| <dd> | Block | Définition du terme |
| Balise | Type | Description |
| <table> | Block | Délimite un tableau. Voici un exemple de tableau simple :
<table>
<caption>Passagers du vol 377</caption><tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Etats-Unis</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
</table>
|
| <caption> | Titre du tableau | |
| <tr> | Ligne de tableau | |
| <th> | Cellule d’en-tête du tableau (généralement mise en gras) | |
| <td> | Cellule du tableau | |
| <thead> | Balise non obligatoire permettant d’insérer l’en-tête du tableau. | |
| <tbody> | Balise non obligatoire permettant d’insérer le corps du tableau | |
| <tfoot> | Balise non obligatoire permettant d’insérer le pied du tableau |
| Balise | Type | Description |
| <form> | Block | Délimite un formulaire. Vous devrez généralement donner 2 attributs à la balise <form> method : indique la méthode d’envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post. action : la page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire. |
| <fieldset> | Block | Permet de regrouper plusieurs éléments d’un formulaire. |
| <legend> | Inline | Titre d’un groupe dans un formulaire.( A utiliser à l’intérieur d’un <fieldset>) |
| <label> | Inline | Titre d’un élément de formulaire. Généralement, vous devrez mettre l’attribut for sur cette balise pour indiquer l’ID de l’élément auquel correspond le label. |
| <input /> | Block | Champ de formulaire. Il existe de nombreux types de champs différents. Vous le spécifiez grâce à l’attribut type :
|
| <textarea> | Block | Zone de saisie multiligne. Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et colonnes) ou bien le faire en CSS grâce aux propriétés width et height. |
| <select> | Block | Liste déroulante. Utilisez la balise <option> pour créer chaque élément de la liste : <select name=”pays”> <option value=”france”>France</option> <option value=”espagne”>Espagne</option> <option value=”italie”>Italie</option> </select> |
| <option> | Block | Element d’une liste déroulante |
| <optgroup> | Block | Groupe d’éléments d’une liste déroulante. Vous devez utiliser l’attribut label pour donner un nom au groupe. |