Types de listes

HTML propose trois types de listes :

  • Les listes non ordonnées sont souvent mises en forme avec une indentation et une puce, comme cette liste.
  • Les listes ordonnées sont similaires mais marquées par des numéros.
  • Les listes de définitions sont composées de titres et de définitions.

Les puces et les numéros sont appliqués par le navigateur à partir d'une sélection de styles. L'utilisateur ne doit saisir aucun texte de puce ou de numéro car celui-ci serait traité comme faisant partie de la liste. L'éditeur TinyMCE dispose d'icônes pour appliquer les styles de puces et les types de numéros courants. Les listes de définitions sont plus complexes et doivent être construites manuellement.

Les listes peuvent contenir d'autres listes à n'importe quel niveau, bien que les listes fortement indentées deviennent difficiles à lire ; il est donc préférable de se limiter à un ou deux niveaux.

Capture d'écran

La capture d'écran suivante montre une liste non ordonnée avec deux niveaux d'indentation. Elle montre également l'ensemble complet des outils, ouvert en sélectionnant le bouton points de suspension (...) à la fin de la première rangée d'icônes d'outils.

Nested unordered lists

Cette capture d'écran sera utilisée pour expliquer comment la liste à puces a été créée à l'aide des outils Liste à puces et Augmenter l'indentation ou Diminuer l'indentation :

Styles de listes

Listes à puces

Trois styles sont disponibles :

  • Un cercle plein par défaut.
  • Un cercle ouvert.
  • Un carré plein.

Le chevron vers le bas à droite de l'icône de liste à puces ouvre un petit panneau permettant de sélectionner le style préféré pour un élément de liste sélectionné :

Bullet list manipulation tools

L'icône de liste fonctionne comme un interrupteur. Si le curseur se trouve dans un paragraphe et qu'une puce est sélectionnée, le paragraphe devient un élément de liste. Si la puce est sélectionnée à nouveau, l'élément de liste redevient un paragraphe.

Si deux paragraphes ou plus sont sélectionnés et qu'une icône de liste est sélectionnée, chacun des paragraphes devient un élément de liste. Pour créer une liste indentée, sélectionner l'outil Augmenter l'indentation à droite des outils de liste. Par défaut, l'élément de liste indenté adoptera le style de liste suivant.

Pour expliquer comment créer les listes indentées dans la capture d'écran :

  • Saisir chacun des termes sous forme de paragraphes d'un seul mot.
  • Sélectionner tous les paragraphes à transformer en liste à puces.
  • Sélectionner l'icône Liste à puces.
  • Sélectionner le premier groupe de termes à indenter
  • Sélectionner l'icône Augmenter l'indentation.
  • Sélectionner le deuxième groupe de termes à indenter.
  • Sélectionner l'icône Augmenter l'indentation.

Listes numérotées

Six styles sont disponibles

  • Numéros : 1, 2, 3 ...
  • Lettres : a, b, c ...
  • Caractères grecs : α, β, γ ...
  • Chiffres romains en minuscules : i, ii, iii ...
  • Lettres majuscules : A, B, C ...
  • Chiffres romains en majuscules : I, II, III ...

Number list manipulation tools

Les listes numérotées fonctionnent un peu différemment. Lorsqu'un élément de liste est indenté, il prend la première valeur numérique et les numéros du reste de la liste remontent afin que la liste soit toujours dans le bon ordre numérique.

Listes mixtes

Le système de numérotation peut être modifié à chaque niveau. Par exemple, vous pouvez définir le premier niveau pour utiliser des valeurs numériques et le second niveau pour utiliser des puces, des caractères grecs, ou autre chose.

Il est probablement préférable d'expérimenter avec les listes pour voir comment elles peuvent être manipulées.

Listes de définitions

Les listes de définitions sont constituées d'un Titre de définition et d'une ou plusieurs Descriptions de définition suivies du Titre de définition suivant et de sa Description. Elles seraient utiles pour un Glossaire ou tout type d'ensemble de paires Clé / Valeur. Pour créer une liste de définitions :

  • Sélectionner le bouton Activer/Désactiver l'éditeur pour voir le balisage HTML de l'article.
  • Saisir le balisage de la liste de définitions. Voici un exemple :
<dl>
<dt>Amphibien</dt>
<dd>Vertébré à sang froid qui pond ses œufs dans l'eau et possède un stade larvaire aquatique.</dd>
<dt>Reptile</dt>
<dd>Vertébré à sang froid qui pond ses œufs sur terre.</dd>
</dl>

Enregistrer et voir le résultat dans la Prévisualisation.