Comment faire une liste HTML ? Balises et < ul> et < ol>

La liste HTML est une succession d'éléments qui peuvent être ordonnés ou non. Ils partagent un dénominateur commun pouvant être un thème ou, tout simplement, le fait de faire partie de cette liste. La création de ces listes permet de mettre en forme le contenu d'une page Internet, tout comme le font les checkbox, afin de faciliter la lecture du texte et de mettre la forme au service du fond. Il existe plusieurs types de liste : la liste à puces, qui se caractérise par une balise HTML <ul>, et la liste ordonnée dite « numérotée », qui se forme avec la balise <ol>.

Comment créer une liste à puces en HTML ?

La liste à puces correspond à une liste non ordonnée, c'est-à-dire que les différents éléments qui s'y trouvent ne respectent pas de classement particulier. Ils sont interchangeables, sans que cela bouscule la logique ou la compréhension du sujet. En langage HTML, cette liste est identifiée par la balise <ul>.

La création d'une liste à puces HTML se fait comme suit. Une balise <ul> définit le début de la liste. Les différents éléments qu'elle contient se succèdent juste en dessous. Chacun d'eux est encadré par des balises <li></li>, qui caractérisent un élément de liste.

Enfin, une balise </ul> marque la fin de la liste à puces. Les puces se forment automatiquement devant chaque élément. Avec quelques ajouts dans le code HTML, leur apparence peut être modifiée pour correspondre au mieux au souhait du rédacteur et au sujet.

Comment créer une liste numérotée en HTML ?

La liste numérotée HTML est une liste ordonnée qui présente plusieurs éléments appartenant à une suite logique ou à une hiérarchie définie. Cet ordre a une importance et est exprimé par les chiffres ou les lettres qui accompagnent chaque élément.

La liste numérotée HTML démarre avec une balise <ol> qui définit, comme le fait la balise <ul> pour la liste à puces, le début de la liste ordonnée. Chaque élément doit également être encadré par des balises <li></li>.

Lorsque tous les éléments ont été cités, une balise </ol> vient clôturer la liste. Les numéros s'affichent par défaut, mais il est possible de les remplacer par d'autres formes de classement, si nécessaire.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Comment personnaliser une liste HTML ?

L'apparence des listes, qu'elles soient à puces ou numérotées, peut être modifiée. Langage de style par référence, le CSS prend en charge la modulation de l'apparence d'une page web, y compris l'adaptation des puces ou de la numérotation. En HTML, certains ajouts au code peuvent également le permettre.

Pour modifier le style par défaut des puces d'une liste, il faut utiliser la balise "list-style". Placée directement à la suite de la balise <ul>, elle doit être succédée de la forme souhaitée, exprimée en anglais. Par exemple, si la puce doit prendre la forme d'un carré, le terme « square » devra être renseigné.

Les puces peuvent aussi être remplacées par une image. Pour y parvenir, l'image sélectionnée doit être enregistrée dans un sous-dossier du site Internet concerné. En langage HTML, la balise "list-style: url" se place juste après la balise <ul>, suivie du chemin d'accès qui permet de trouver l'image.

Si l'image au format .jpg se trouve, par exemple, dans le dossier « Images » et le sous-dossier « Puces », alors la balise devra être écrite ainsi :

<ul style=“list-style: url('images/puces.jpg')“>

Les listes numérotées peuvent également être personnalisées. La suite classique de chiffres 1, 2, 3 peut être remplacée par une suite de chiffres romains minuscules, de chiffres romains majuscules, de lettres majuscules ou encore de lettres minuscules.

La balise "type" se place juste après la balise <ol> et permet de déterminer cette numérotation particulière, une fois précisée la forme souhaitée :

• Pour les chiffres romains en majuscule, la balise sera complétée par upper-roman.
• Pour les chiffres romains en minuscule, par lower-roman.
• Pour les lettres en majuscule, par upper-alpha.
• Pour les lettres en minuscule, par lower-alpha.

Par défaut, les éléments sont toujours classés par ordre croissant exprimé en minuscule. Pour définir un autre symbole de départ, l'attribut « start » doit être ajouté, suivi du chiffre correspondant à la position du caractère souhaité.

Par exemple, pour un ordre défini avec des lettres en majuscule et un début de décompte à la lettre h, le chiffre 8 doit être renseigné. La suite de la liste suivra l'ordre logique automatiquement.

La numérotation peut également être différente pour chaque élément de la liste grâce à l'utilisation de l'attribut « value » qui se place devant chacun d'eux. Cependant, il ne peut s'exécuter que dans le cadre du style de numérotation défini. Si aucune balise "type" n'apparaît, alors ce sont les numéros simples qui s'appliquent.

Enfin, l'attribut « reversed » permet d'inverser la numérotation afin d'obtenir un classement par ordre décroissant. La dernière puce correspond donc à la valeur la plus basse (1, I, i, A ou a, selon ce qui a été défini en amont).

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.