logo haut Haut de page
Alain Barraud Mémento informatique  
 
Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives
Page ouverte en avril 2006. Mise à jour du 17 mars 2010

Liste des balises XHTML

Principales balises utilisées en XHTML. Difficile de faire une liste complète et de les présenter sans trop aloudir la page.
Rappel des principes pour une bonne utilisation du XHTML
  • Le langage HTML définit la structure de la page à l'aide d'éléments (les balises).
  • Le langage CSS apporte le rendu visuel.
  • Les deux entités doivent être complémentaires mais dissociées : la première apporte le sens (la sémantique), la seconde ajoute du rendu d'affichage.
  • Le XHTML évite l'usage des balises de présentation dont certaines sont dépréciées à mesure qu'évolue le XHTML. Il en va de même pour les attributs liés à la présentation.
    Pour tout ce qui touche à la présentation, il est fortement recommandé de le traiter au niveau des feuilles de style CSS.
  • XHTML recommande de respecter la sémantique, et donc ne pas abuser des balises génériques div et span. Pour cela, il faut savoir :
    • W3C http://www.w3.org/TR/CSS21/sample.html propose un formatage par défaut des balises devant être pris en compte par les navigateurs avec quelques fois des interprétations un peu différentes de l'un à l'autre.
    • Si aucun style n'a été spécifié sur les CSS, c'est ce rendu qui est pris en compte (donc les modifier si besoin avec les CSS plutôt que d'utiliser les balises div ou span. Cela peut également être un moyen pour harmoniser le rendu de ses pages web quelque soit le navigateur, en imposant un style bien précis à des balises prédéfinies comme h1, h2, p, etc…).
Cet encadré est plus détaillé ici

Balises : classement des balises en essayant de se calquer au mieux sur la modularisation (certaines balises ne sont pas listées car sont d'un usage en voie d'obsolescence comme des balises de présentation).
Attributs : tous les attributs ne sont pas mentionnés, seuls ceux qui sont obligatoires, d'utilisation courante sont cités (s'appuyer sur les feuilles style et éviter les attributs pour tout ce qui touche à la présentation de la page).

Sommaire
Ce référencement par modules n'est qu'à titre indicatif.
Module Structure
<html> <head> <body> <title>
Autres balises faisant parties d'autres modules et ajoutées à head quand elles sont utilisées :
<style> (module Style sheet) <link /> (module link) <meta /> (module Metainformation) <script> (module Scripting).
Module Text
<abbr> <acronym> <address> <blockquote> <br /> <cite> <code> <dfn> <em> <h1> <h2> <h3> <h4> <h5> <h6> <kbd> <p> <pre> <q> <samp> <strong> <var>
dont 2 balises génériques : <div> <span>
s'ajoutent : <a > du module Hypertext, <hr /> <sub> <sup> du module Presentation, <del> <ins> du module Edit,
<img /> du module Image
Module List
<dl> <dt> <dd> <ol> <ul> <li>
Module Table
<caption> <table> <td> <th> <tr> <col> <colgroup> <tbody> <thead> <tfoot>
Module de formulaire
<form> <input> <select> <option> <textarea> <button> <fieldset> <label> <legend> <optgroup>
Module Object
<object> <param />

Module Structure

<html> </html>
DescriptionType block. Balise principale de toute page web. Pas d'élément parent, c'est elle qui contient toute la page à part la déclaration DOCTYPE qui doit être juste avant, sur la première ligne du code.
AttributsOn lui donne généralement 2 attributs :
  • xmlns= : obligatoire, indique l'adresse traitant du xhtml.
  • xml:lang= : indique dans quelle langue la page est rédigée.
Eléments parentsAucun
Eléments enfants<head> <body>
<head> </head>
DescriptionType none (aucune boîte n'est générée). En-tête de la page.
Eléments parentshtml
Eléments enfantsbase link meta object script style title
<body> </body>
DescriptionType block. Corps de la page.
Eléments parentshtml
Eléments enfantsaddress blockquote del div fieldset form h1 h2 h3 h4 h5 h6 hr ins noscript ol p pre script table ul

Code minimal d'une page XHTML

Code : HTML

<!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" xml:lang="fr" >
      <head>
            <title>Titre du site</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      </head>
      <body>
            <!-- Contenu de la page web -->
      </body>
</html>

<title> </title>
DescriptionType none. Titre de la page web.
C'est probablement la balise la plus importante d'une page web. Bien choisir son titre car il a beaucoup d'importance pour les moteurs de recherche (ils donnent de l'importance aux mots qui se trouvent dans le titre).
Eléments parentshead
<style> </style>
DescriptionType none. Permet de définir du code CSS pour la page (Privilégier néanmoins la feuille de style séparée, peut également servir à complémenter cette feuille de style).
AttributsOn met obligatoirement en attribut : type="text/css".
Eléments parentshead
<script> </script>
DescriptionType none. Permet de placer un script. On l'utilise souvent pour mettre du code Javascript.
Attributstype : attribut obligatoire pour définir le type de sript.
src : indique l'adresse d'un script externe à la page.

Code : HTML, script(s) dans le "head" de la page
<script type="text/javascript">
/* Mettre le script ici */
</script>
Code : HTML, script(s) dans un fichier externe à la page
<script type="text/javascript" src="script.js"></script>
Eléments parentsa abbr acronym address blockquote body button caption cite code dd del dfn div dt em fieldset form h1 h2 h3 h4 h5 h6 head ins kbd label legend li map noscript object p pre q samp span strong sub sup td th tt var
<meta />
DescriptionType none. Cette balise permet de définir les propriétés de la page web.
On s'en sert pour une foule de choses, voir exemples avec leurs attributs.
AttributsChaque propriété porte 2 attributs :
name : identifiant, content : valeur.
Quelques exemples pratiques :
Code : HTML
<meta name="author" content="Jean Dupont" />
<!-- Description de la page -->
<meta name="description" content="La page personnelle de Jean Dupont" />
<!-- Mots-clés de la page -->
<meta name="keywords" content="expériences, recherche, laboratoire, chimie" />
<!-- Adresse de contact -->
<meta name="reply-to" content="monadresse@email.com" />
<!-- Empêcher la mise en cache de la page par le navigateur -->
<meta http-equiv="pragma" content="no-cache" />
<!-- Table de caractères -->
<!-- Rafraîchissement automatique au bout de 10 secondes -->
<meta http-equiv="refresh" content="10; URL=http://www.monsite.com" />
En général, on utilise surtout le meta pour la table de caractères.
La description et les mots-clés de la page n'influencent pratiquement plus les moteurs de recherche.
Eléments parentshead
<link />
DescriptionType none. Titre de la page web.
Cette balise permet d'indiquer certaines informations sur la page web.
On l'utilise le plus souvent pour inclure une feuille de style CSS
Eléments parentshead
Haut de page

Module Text

<a> </a>
DescriptionType inline. Lien hypertexte.
Attributshref : permet d'indiquer l'url de destination.
Exemple : <a href="autrepage.html">Rendez-vous sur l'autre page</a>
Eléments parentsabbr acronym address caption cite code dd del dfn div dt em fieldset h1 h2 h3 h4 h5 h6 ins kbd label legend li object p pre q samp span strong sub sup td th tt var
Eléments enfantsabbr acronym br button cite code del dfn em img input ins kbd label map object q samp script select span strong sub sup texterea tt var
<acronym> </acronym>
DescriptionType inline. Sert à définir des acronymes, comme C.I.A. Quand on pointe sur C.I.A., cela donne la définition.
Attributstitle : permet de donner la définition de l'acronyme.
Exemple : <acronym title="Central Intelligence Agency">C.I.A.</acronym> donne : C.I.A.
<address> </address>
DescriptionType block. Permet d'indiquer une adresse, ou éventuellement l'auteur d'un document. Le texte est généralement mis en italique.
<blockquote> </blockquote>
DescriptionType block. Citation (longue). Mettre obligatoirement une balise de paragraphe à l'intérieur du blockquote.
Exemple :
Code : HTML
<blockquote>
    <p>Texte de la citation</p>
</blockquote>
<cite> </cite>
DescriptionType inline. Citation (moyenne).
<q> </q>
DescriptionType inline. Citation (courte).
<br />
DescriptionType inline. Retour à la ligne.
<em> </em>
DescriptionType inline. Mise en valeur (faible). Le texte est généralement mis en italique.
<strong> </strong>
DescriptionType inline. Mise en valeur (forte), le texte est généralement mis en gras.
<h1> </h1> à <h6> </h6>
DescriptionType block. Titres de niveau 1 à 6.
<hr />
DescriptionType block. Crée une ligne de séparation horizontale.
<img />
DescriptionType inline. Insère une image.
AttributsAttributs obligatoires : src (indique l'adresse de l'image), alt (indique un texte de remplacement).
Exemple : <img src="images/monimage.png" alt="Mon image" />
<p> </p>
DescriptionType block. Paragraphe.
<sub> </sub>
DescriptionType inline. Mise en indice.
Exemple : Texte <sub>indice</sub> donne : Texte indice
<sup> </sup>
DescriptionType inline. Mise en exposant.
<del> </del>
DescriptionType inline. Permet d'indiquer un texte qui a été supprimé. Le texte est généralement barré.
<ins> </ins>
DescriptionType inline. Permet d'indiquer un texte qui a été inséré. Le texte est généralement souligné.
<dfn> </dfn>
DescriptionType inline. Permet d'indiquer une définition.
<kbd> </kbd>
DescriptionType inline. Permet d'indiquer un code que doit taper le visiteur.
<pre> </pre>
DescriptionType block. Le texte à l'intérieur de la balise <pre> sera affiché tel qu'il a été tapé dans le code (espaces et entrées compris). Une police de taille fixe est utilisée.

Les balises génériques ( ou universelles) sont des balises qui n'ont pas de sens sémantique, contrairement à toutes les autres balises XHTML qui ont un sens. On les utilise quand les autres ne conviennent pas.
Ces balises n'ont d'intérêt que si on leur donne un attribut : class, id ou style.

<div> </div>
DescriptionType block. Balise générique type bloc
<span> </span>
DescriptionType inline. Balise générique type en ligne
Haut de page

Module List

Cette partie énumère toutes les balises XHTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

<ul> </ul>
DescriptionType block. Liste à puces non numérotée. On doit mettre un <li></li> par élément de la liste.
Exemple (à gauche le code html, à droite le résultat) :
Code : HTML
<ul>
    <li>Un élément</li>
    <li>Un autre élément</li>
</ul>
  • Un élément
  • Un autre élément
<ol> </ol>
DescriptionType block. Liste à puces numérotée. On doit mettre un <li></li> par élément de la liste.
Exemple (à gauche le code html, à droite le résultat) :
Code : HTML
<ol>
    <li>Un élément</li>
    <li>Un autre élément</li>
</ol>
  1. Un élément
  2. Un autre élément
<li> </li>
DescriptionType list-item, type de balise particulier, un élément comprenant boîte bloc principale et boîte en ligne pour un item de liste.
Permet de créer un élément de liste.
<dl> </dl>
DescriptionType block. Liste de définitions. On doit alterner chaque terme <dt> par sa définition <dd>.
Exemple (à gauche le code html, à droite le résultat) :
Code : HTML
<dl>
    <dt>Porte</dt>
    <dd>Définition de porte</dd>
    <dt>Théâtre</dt>
    <dd>Définition de théâtre</dd>
</dl>
Porte
Définition de porte
Théâtre
Définition de théâtre
<dt> </dt>
DescriptionType block. Terme à définir.
<dd> </dd>
DescriptionType block. Définition du terme.
Haut de page

Module Table

<table> </table>
DescriptionType block. Délimite un tableau. Exemple de tableau simple (à gauche le code html, à droite le résultat) :
Code : HTML
<table>
<caption>Titre du tableau</caption>

<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>

<tr>
<td>Cellule A</td>
<td>Cellule B</td>
<td>Cellule C</td>
</tr>

<tr>
<td>Cellule D</td>
<td>Cellule E</td>
<td>Cellule F</td>
</tr>

</table>
Titre du tableau
Titre 1Titre 2Titre 3
Cellule ACellule BCellule C
Cellule DCellule ECellule F
<caption> </caption>
DescriptionType table-caption. Permet de donner un titre au tableau.
<tr> </tr>
DescriptionType table-row (randée de cellules). Ligne de tableau.
<th> </th>
DescriptionType table-cell (cellule de tableau). Cellule d'en-tête du tableau (généralement mise en gras).
<td> </td>
DescriptionType table-cell. Cellule de tableau.
Attributscolspan="Nbre de colonnes" : permet une fusion de colonnes (horizontalement)
rowspan="Nbre de lignes" : permet une fusion de lignes (verticalement). Ex. : <td rowspan="2">
<thead> </thead>
DescriptionType table-header-group. Balise non obligatoire permettant d'insérer l'en-tête du tableau.
Si on choisit d'utiliser <thead>, <tfoot> et <tbody>, on doit les mettre dans l'ordre suivant dans le code source :
  1. <thead>
  2. <tfoot> /* tfoot est avant tbody*/
  3. <tbody>
Intérêt de ces balises :
- Permettront à l'avenir aux tableaux "scrollables" de conserver leur en-tête et leur pied de page .
- En cas d'impression d'un tableau nécessitant plusieurs pages, l'en-tête et le pied de page seront conservés sur chaque feuille .
- Permet d'affecter de manière rapide du css aux différentes parties du tableau .
<tbody> </tbody>
DescriptionType table-row-group. Balise non obligatoire permettant d'insérer le corps du tableau.
<tfoot> </tfoot>
DescriptionType table-footer-group. Balise non obligatoire permettant d'insérer le pied du tableau.
Haut de page

Module Object

<object> </object>
DescriptionType inline. Cette balise sert à insérer un objet (image, animation, fichier audio, applet java…).
<param />
DescriptionType inline. Définit les paramètres de la balise objet.
Haut de page