LE GUIDE DU CODE HTML
HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,... |
|
 |
|
LES LISTES ET ÉNUMÉRATIONS HTML
SOMMAIRE
<dl>, <dt> et <dd>
<lh>
<li>
<ol>
<ul>
Listes imbriquée (plusieurs niveaux)
Les "listes HTML" sont très pratiques pour énumérer des listes d'items ou d'éléments. Un exemple d'application le sommaire ci-dessus.
| <dl>...</dl>, <dt>...</dt> et <dd>...</dd> : Liste de définitions</dl> : Est le conteneur de la liste de définitions</dt> : Est le conteneur d'un terme à définir</dd> : Est le conteneur de la définitions |
Ex :
<dl>
<dt>Banane</dt>
<dd>Fruit jaune alongé</dd>
<dt>Pomme</dt>
<dd>Fruit vert sphérique</dd>
</dl> | Résultat :
- Banane
- Fruit jaune alongé
- Pomme
- Fruit vert sphérique
|
Compatibilité :  
Attribut : aucun |
| <lh>...</lh> : Titre d'une liste |
Ex :
<lh>Titre liste</lh>
<li>Item 1</li>
<li>Item 2</li> | Résultat :
Titre listeItem 1Item 2 |
Compatibilité :
Attribut : aucun |
| <li>...</li> : Item ou élément d'une liste |
Ex :
<li>Item 1</li>
<li>Item 2</li> | Résultat :
Item 1Item 2 |
type="..." :
Dans les listes ordonnées "<ol>" : spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).Dans les listes non-ordonnées "<ul>" : spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein). |
Ex :
<ol>
<li type="1">Item 1 - En chiffres</li>
<li type="a">Item 2 - En lettres minuscules</li>
<li type="A">Item 3 - En lettres majuscules</li>
<li type="i">Item 4 - Romains minuscules</li>
<li type="I">Item 5 - Romains majuscules</li>
</ol> | Résultat :
- Item 1 - En chiffres
- Item 2 - En lettres minuscules
- Item 3 - En lettres majuscules
- Item 4 - Romains minuscules
- Item 5 - Romains majuscules
|
Ex :
<ul>
<li type="disc">Item 1 - Disque plein</li>
<li type="circle">Item 2 - Disque creux</li>
<li type="square">Item 3 - Carré</li>
</ul> | Résultat :
- Item 1 - Disque plein
- Item 2 - Disque creux
- Item 3 - Carré
|
| value="..." : Utilisé dans les listes ordonnées "<ol>". Permet d'imposer un numéro de départ |
Ex :
<ol>
<li value="15">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol> | Résultat :
- Item 1
- Item 2
- Item 3
|
| Compatibilité : |
| <ol>...</ol> : Listes ordonnées |
Ex :
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
| Résultat :
Item 1Item 2 |
| type="..." : Spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules). |
Ex :
<ol type="1">
<li>Item 1 - En chiffres</li>
<li>Item 2</li>
</ol> | Résultat :
- Item 1 - En chiffres
- Item 2
|
Ex :
<ol type="a">
<li>Item 1 - En minuscules</li>
<li>Item 2</li>
</ol> | Résultat :
- Item 1 - En minuscules
- Item 2
|
Ex :
<ol type="A">
<li>Item 1 - En majuscules</li>
<li>Item 2</li>
</ol> | Résultat :
- Item 1 - En majuscules
- Item 2
|
Ex :
<ol type="i">
<li>Item 1 - En romain minuscule</li>
<li>Item 2</li>
</ol> | Résultat :
- Item 1 - En romain minuscule
- Item 2
|
Ex :
<ol type="I">
<li>Item 1 - En romain majuscule</li>
<li>Item 2</li>
</ol> | Résultat :
- Item 1 - En romain majuscule
- Item 2
|
| value="..." : Spécifie le numéro de départ de l'énumération |
Ex :
<ol value="15">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol> | Résultat :
- Item 1
- Item 2
- Item 3
|
| Compatibilité : |
| <ul>...</ul> : Listes non ordonnées |
Ex :
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
| Résultat :
Item 1Item 2 |
| img src="..." : Permet de remplacer les puces standards par celles que vous aurez choisi. |
Ex :
<ul>
<img src="images/puce.gif">Item 1<br>
<img src="images/puce.gif">Item 2<br>
<img src="images/puce.gif">Item 3<br>
</ul> | Résultat :
|
| type="..." : Spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein). |
Ex :
<ul type="disc">
<lh>Disque plein</lh>
<li>Item 1</li>
<li>Item 2</li>
</ul> | Résultat :
|
Ex :
<ul type="circle">
<lh>Disque creux</lh>
<li>Item 1</li>
<li>Item 2</li>
</ul> | Résultat :
|
Ex :
<ul type="square">
<lh>carré</lh>
<li>Item 1</li>
<li>Item 2</li>
</ul> | Résultat :
|
| Compatibilité : |
| Listes imbriquées ou à plusieurs niveaux : Vous pouvez concevoir des listes à plusieurs niveaux et même mélanger les types de listes. Voyez les exemples ci-dessous. |
| Premier exemple : Voyez le résultat avec 3 niveaux de listes à puces. Remarquez le changement de type de puce (automatiquement) à chaque niveau de l'arborescence. Cet exemple étant devenu plus complexe, il est bon d'indenter les lignes de code afin d'avoir une bonne visualisation des balises ouvertes et fermées, cela évite bien des erreurs. |
Ex :
<ul>
<li>Item 1</li>
<ul>
<li>Item 1.1</li>
<ul>
<li>Item 1.1.1</li>
<li>Item 1.1.2</li>
</ul>
<li>Item 1.2</li>
</ul>
<li>Item 2</li>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</ul>
|
Résultat :
|
| Deuxième exemple : Ici les listes à puces (non ordonnées) et listes ordonnées ont été alternées. |
Ex :
<ul>
<li>Item 1</li>
<ol>
<li>Item 1.1</li>
<ul>
<li>Item 1.1.1</li>
<li>Item 1.1.2</li>
</ul>
<li>Item 1.2</li>
</ol>
<li>Item 2</li>
<ol type="A">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ol>
</ul>
|
Résultat :
- Item 1
- Item 1.1
- Item 1.2
- Item 2
- Item 2.1
- Item 2.2
|
| Compatibilité : |
|
|
|
|
|
Item 1