1. Acceuil
  2. Cours
  3. Cours HTML
  4. Les listes

Les listes HTML

Définition

Les listes permettent de faire des énumérations d’éléments. Il en existe deux sortes : listes ordonnées et listes non ordonnées. Elles permettent d'apporter de l'ordre et de la clareté dans les documents

Les listes non ordonnées

Elle permettent de lister un ensemble d'éléments sans hiérarchie

Pour créer une liste, on utilise un jeu de balises <ul>et<li>

  • Pour introduire la liste, on place une balise <ul/>
  • Pour chaque élément de cette liste, on utilise un couple de balises <li></li>
Par exemple
  • <h4>Liste des ingrédients</h4>
      <ul>
    • <li>200 grammes de beurre</li>
    • <li>75 grammes de chocolat</li>
    • <li>180 grammes de sucre</li>
      • </ul>
Liste des ingrédients
  • 200 grammes de beurre
  • 180 grammes de Sucre
  • 75 grammes de chocolat

Les listes numériques (ordonnées)

Les listes numériques sont calquées sur la même structure qu'une liste simple

  • Pour introduire la liste, on place le couple balises <ol/>
  • Pour chaque élément de cette liste, on utilise un couple de balises <li></li>
l'incrémentation numérique se fera automatiquement

  • <ol>
    • <li> dans une casserole faites fondre le beurre </li>
    • <li>Versez le sucre en mélangeant </li>
    • <li>Versez le chocolat </li>
    </ol>
  1. dans une casserole faites fondre le beurre
  2. Versez le sucre en mélangeant
  3. Versez le chocolat

Il est possible de changer l'indice d'énumération en utilisant la propriété Start Par exemple je souhaite commencer mon énumération à partir du quatrième point <ol start=4>[...]</ol>

Changer le type de puce d'une liste

Pour modifier le type de puce d’une liste, on utilise la propriété "type" assigné à la balise <ul> ou <ol> Comme Suit : <ul type="square">

Voici une liste des valeurs que peut prendre la propriété type
<ol> <ul>
1
  1. Item 1
  2. Item 2
 square
  • Item 1
  • Item 2
A ou a
  1. Item 1
  2. Item 2
 circle
  • Item 1
  • Item 2
I ou i
  1. Item 1
  2. Item 2
 disc
  • Item 1
  • Item 2

Les différents types de listes

Il s’agit de listes non ordonnées mais apportant une valeur sémantique

Les listes de définition

Elles sont utilisées afin de mettre en forme un ensemble de définitions (dictionnaire)

  • Pour introduire le dictionnaire, utilisez le couple balises <dl/> (Data List)
  • Pour chaque éléments à définir, utilisez un couple de balises <dt/> (Data Term)
  • Pour attribuer une définition à l'élément, utilisez le couple <dd/> (Data Definition)
HTML
HyperText Transfer Protocol
FTP
File Transfer Protocol
SMTP
Send Mail Transfer Protocol
  • <dl>
    • <dt>HTML
      • <dd>HyperText Transfer Protocol </dd>
      </dt>
    • <dt> FTP
      • <dd> File Transfer Protocol </dd>
      </dt>
    • <dt> SMTP
      • <dd> Send Mail Transfer Protocol </dd>
        • </dt>
      </dl>
Les listes de répertoire

Elle permet d’introduire une liste de contacts ou de fichier par exemple, elles sont encadrées par les balises <dir></dir>

  • <dir>
    • <li>Item1 </li>
    • <li>Item2 </li>
    • <li>Item3 </li>
    </dir>
  • Item 1
  • Item 2
  • Item 3
    •
    Les listes de menu

    Elle permet d’introduire des menus propres à la navigation, elles sont encadrées par les balises <menu></menu>

    • <menu>
      • <li> Accueil </li>
      • <li>Page1 </li>
      • <li>Page2> </li>
      </menu>
    • Accueil
    • Page 1
    • Page 2

    Liste imbriquée

    Il est possible d'intégrer une liste dans une autre liste.

    Pour cela il suffit d'introduire une liste aprés un élément la la liste <li>

    • <ul type="disc">
      • <li>Element 1
        • <ul type="circle">
          • <li>Element 1-1 </li>
          • <li>Element 1-2 </li>
          </ul> </li>
      • <li>Element 2</li>
      </ul>
    • Element 1
      • Element 1-1
      • Element 1-2
    • Element 2
    Partager