<< Retour au sommaire

 

HTML 5, les listes.

 

 

 

Table des matières

  1. La balise <ul> La liste non ordonnée ;
  2. La balise <ol> La liste ordonnée ;
  3. La balise <dl> La liste de définitions ;
  4. L’imbrication.

 

La balise <ul> La liste non ordonnée

 

Cette balise permet de créer une liste composée d’éléments pour lesquels il n’y a pas d’ordre de présentation.

 

La syntaxe :

<ul>

<li>premier élément</li>

<li>deuxième élément</li>

<li>Troisième élément</li>

</ul>

 

La description :

La liste doit débuter par <ul> et finir par </ul>.

A l’intérieure de la liste, chaque élément doit être placé entre <li> et </li>.

 

Voici un exemple :

 

<p>Liste des animaux sympas <br />

<ul>

<li>Le chat</li>

<li>Le chien</li>

<li>L'oiseau</li>

<li>Le cobra lol</li>

</ul>

</p>

 

Tester la page >>


La balise <ol> La liste ordonnée

 

Avec cette balise, vous devez prendre en compte maintenant la position des éléments !

 

La syntaxe :

<ol>

<li>premier élément</li>

<li>Deuxième élément</li>

<li>Troisième élément</li>

</ol>

 

La liste doit débuter par la balise <ol> et finir par </ol>.

Entre les deux, vous devez écrire chaque élément de la liste entre les balises <li> et </li>.

Mais attention, cette fois l’ordre joue un rôle dans la présentation de la liste !

 

Voici un exemple :

 

<p>Voici la liste des planètes du système solaire par ordre croissant d'éloignement du Soleil :<br />

<ol>

<li>MERCURE</li>

<li>VÉNUS</li>

<li>LA TERRE</li>

<li>MARS</li>

<li>JUPITER</li>

<li>SATURNE</li>

<li>URANUS</li>

<li>NEPTUNE</li>

<li>Avant qu’il l’éjecte de la classe des planètes, PLUTON</li>

</ol>

</p>

 

Tester la page >>


La balise <dl> La liste de définitions

 

La liste de définitions permet de créer une liste d’éléments pour lesquels des définitions sont associées.

 

La syntaxe :

 

<dl>

<dt>Premier élément</dt>

<dd>Définition du premier élément</dd>

<dt>Deuxième élément</dt>

<dd>Définition du deuxième élément</dd>

<dt>Troisième élément</dt>

<dd>Définition du troisième élément</dd>

</dl>

 

La description :

On commence la liste par <dl> et on la termine par </dl>.

Entre les deux, on place les éléments à définir dans les balises <dt> et </dt>, et pour chacun des éléments, vous devez créer une définition qui est placée entre <dd> et </dd>.

 

Voici un exemple :

 

<p>Voici la liste des planètes du système solaire par ordre croissant d'éloignement du Soleil :<br />

Pour chacune d'entre elle, vous trouverez la composition de la surface.<br />

<dl>

<dt>MERCURE</dt>

<dd>Surface composée de roches et de cratères d’impacts</dd>

<dt>VÉNUS</dt>

<dd>Surface composée de roches, de déserts et de volcans excités</dd>

<dt>LA TERRE</dt>

<dd>Surface composée de 71% d'océans et de 29% de continents</dd>

<dt>MARS</dt>

<dd>Surface composée de roches, de déserts, de poussières, et de quelques martiens</dd>

<dt>JUPITER</dt>

<dd>Surface composée d'un océan d'hydrogène liquide</dd>

<dt>SATURNE</dt>

<dd>Surface composée d'un océan d'hydrogène liquide</dd>

<dt>URANUS</dt>

<dd>Surface composée de glace</dd>

<dt>NEPTUNE</dt>

<dd>Surface composée de glace</dd>

<dt>PLUTON</dt>

<dd>Surface composée de glace</dd>

</dl>

</p>

 

Tester la page >>


L’imbrication

 

Lorsque dans une liste vous avez besoin de développer les éléments, il est parfaitement possible d’employer la méthode d’imbrication de listes.

 

Dans l’exemple suivant, chaque société informatique possède une liste imbriquée dans laquelle certains logiciels leur appartenant sont précisés :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Quelques logiciels</title>

</head>

<body>

<p>

<ul>

<li>Microsoft</li>

<ul>

<li>WORD</li>

<li>EXCEL</li>

<li>ACCESS</li>

<li>PowerPoint</li>

</ul>

<li>NCH SoftWare</li>

<ul>

<li>WavePad</li>

<li>Express Rip</li>

<li>Express Burn</li>

</ul>

</ul>

</p>

</body>

</html>

 

Tester la page >>

 

Philippe BOULANGER