Vous souhaitez créer une liste HTML ? Notamment pour mettre en forme vos articles ou pages pour leurs données plus d’impacts visuels ? Je vous propose de faire un petit tour d’horizon des possibilités qui s’offrent à nous pour créer une liste HTML.
Liste HTML – Guide complet
Si vous utilisez le traitement de texte, vous devez connaître les listes pour mettre en forme du texte, aérer ce dernier et le rendre plus agréable à lire. Ci-dessous le sommaire de l’article et ce que je vais vous présenter pour utiliser une liste HTML :
1. Comment utiliser les listes HTML
1.1. Liste à puces
1.2. Liste numérotée
1.3. Liste de définition
1.4. Imbriquer une liste à puces
2. Mise en forme d’une liste HTML
2.1. Modifier l’apparence des puces d’une liste HTML
2.2. Image à la place d’une puce
2.3. Modifier l’apparence de la numérotation d’une liste HTML
2.4. Modifier mise en forme liste de définition
Il existe trois possibilités pour créer une liste HTML. On va trouver une liste à puces, une liste numérotée ou une liste de définitions. Je vous donc vous présenter les trois possibilités en détail, elles sont très proches les unes des autres sur le plan de la structure. Ensuite, je vous présenterais comment modifier le design d’une liste HTML.
1. Comment utiliser les listes HTML
C’est un des principaux éléments (avec les tableaux HTML) que l’on peut utiliser dans le code HTML. Je vous invite d’ailleurs à consulter le guide complet sur le code HTML où je vous présente toutes les balises à utiliser pour formater du texte.
Lorsqu’on utilise les listes HTML, on va insérer deux types de balises. Une première qui va entourer notre liste, puis une balise pour chaque point de la liste. Mais nous allons voir cela plus en détail immédiatement.
1.1. Liste à puces
La première liste que je vais vous présenter est certainement la plus connue, c’est la liste à puce. Pour cela, la balise principale sera <ul> et les balises pour chaque point seront <li>.
<ul> <li>Exemple 1</li> <li>Exemple 2</li> <li>Exemple 3</li> </ul>
Le résultat de la liste HTML
- Exemple 1
- Exemple 2
- Exemple 3
1.2. Liste numérotée
Nous venons de voir la forme simple d’une liste HTML, autrement dit la liste à puce. Maintenant, voyons une liste numérotée (ou ordonnées). La différence avec la précédente, c’est que chaque élément de la liste HTML sera numéroté.
Par défaut, la numérotation sera celle qui s’affiche ci-dessous. Avec les chiffres classiques. Mais il est possible de modifier le type de numérotation en le remplaçant par des chiffres romains ou l’alphabet. Pour cela, vous trouverez une présentation en fin d’article pour découvrir comment procéder. Il faudra ajouter un peu de code CSS, mais c’est relativement simple.
Pour une utilisation par défaut de la numérotation de la liste, il suffit d’utiliser la balise <ol> en remplacement de la balise <ul> vue pour les listes à puce. Pour la liste en elle-même, on utilisera la balise <li> comme pour la liste à puce. Le résultat sera donc :
<ol> <li>Exemple 1</li> <li>Exemple 2</li> <li>Exemple 3</li> </ol>
Le résultat de la liste HTML
1.3. Liste de définition
Le dernier type de liste HTML est la définition. Ici la structure reste la même, en effet, on aura une première structure de balise qui va contenir d’autres balises. Mais ces dernières sont différentes. Pour cette liste HTML, on n’utilisera pas la balise <li>. Ici, la structuration sera la suivante :
- <dl> => 1er niveau => c’est la balise d’ouverture et fermeture de la liste de définition.
- <dt> => 2eme niveau => indique le mot et l’expression que l’on va définir.
- <dd>=> 3eme niveau => c’est la définition du mot ou de l’expression.
Ci-dessous, un exemple de mis en place de la liste de définition :
<dl> <dt>Titre de la définition</dt> <dd>La définition en elle même</dd> <dt>Titre de la 2 eme définition</dt> <dd>La définition 2eme en elle même</dd> </dl>
Les résultats seront le suivant :
- Titre de la définition
- La définition en elle même
- Titre de la 2 eme définition
- La définition 2eme en elle même
1.4. Imbriquer une liste à puces
Vous savez maintenant comment créer les trois types de listes. Voyons maintenant comment imbriquer des éléments dans une liste à puces. Je vais donc imbriquer une liste à puces dans une autre liste à puces. C’est d’ailleurs comme cela que les menus de navigation des sites internet fonctionnent pour afficher les sous-catégories.
C’est très simple, il suffit de copier-coller une liste à puces dans une autre comme dans l’exemple ci-dessous :
<ul> <li>Exemple 1</li> <li>Exemple 2</li> <ul> <li>Exemple 1</li> <li>Exemple 2</li> <li>Exemple 3</li> </ul> <li>Exemple 3</li> </ul>
Le résultat de la liste HTML sera le suivant
- Exemple 1
- Exemple 2
- Exemple 1
- Exemple 2
- Exemple 3
- Exemple 3
2. Mise en forme d’une liste HTML
Je vous l’ai indiqué précédemment dans l’article qu’il était possible de modifier certains éléments visuels dans une liste HTML pour la rendre plus agréable. Pour cela, je vais vous montrer comment utiliser un peu de code CSS pour changer l’apparence d’une puce, de la numérotation ou faire ressortir une définition.
Pour les démonstrations ci-dessous, les résultats du code HTML sont affichés sous le format d’image. En effet, comme pour le guide sur les tableaux HTML, cela pouvait créer un conflit avec le code CSS qui est déjà en place. En cas de changement dans le CSS, il aurait également fallu que je recommence l’article si j’y avais pensé. Le plus sûr était donc d’afficher les résultats sous la forme d’image une bonne fois pour toutes. C’est ce que vous obtiendrez en utilisant les codes ci-dessous.
2.1. Modifier l’apparence des puces d’une liste HTML
Par défaut, une liste à puce prend la forme d’un rond noir. La valeur HTML de ce paramètre est « disc ». Mais il est possible de remplacer cette valeur par une autre pour modifier la puce. Ci-dessous la liste des options possibles :
- disc => disque noir
- circle => cercle
- square => carré
- none => pas de puce
Vous vous demandez maintenant comment modifier le paramètre. Trois solutions existent pour modifier le code CSS d’une page. Vous pouvez le faire directement dans le fichier CSS de votre thème, dans l’en-tête de votre page HTML ou directement sur la balise.
Pour plus de simplicité, je vais faire l’application directement sur la balise « <ul> ». Pour cela, on ajoute l’argument « style »et on utilise la propriété « list-style-type » dans la balise HTML. Ci-dessous un exemple de code pour chaque puce :
<ul style= "list-style-type:disc">
<li>Exemple liste à puce HTML - disque noir 1</li>
<li> Exemple liste à puce HTML - disque noir 2</li>
</ul>
Avec le paramètre « Disc » :
<ul style= "list-style-type: circle">
<li>Exemple liste à puce HTML - cercle 1</li>
<li> Exemple liste à puce HTML - cercle 2</li>
</ul>
Avec le paramètre « Circle » :
<ul style= "list-style-type: square">
<li>Exemple liste à puce HTML - carré 1</li>
<li> Exemple liste à puce HTML - carré 2</li>
</ul>
Avec le paramètre « Square » :
<ul style="list-style-type: none">
<li>Exemple liste à puce HTML – sans puce 1</li>
<li> Exemple liste à puce HTML – sans puce 2</li>
</ul>
Avec le paramètre « None » :
2.2. Image à la place d’une puce
Vous avez constaté que pouvez changer notre puce par d’autres symboles prédéfinis. Mais il faut l’avouer, ces derniers ne permettent pas de personnaliser complètement notre liste à puce. Pour cela, on peut sélectionner et utiliser une image pour représenter les éléments d’une liste HTML. On va simplement modifier le paramètre de « style ». A la place de « list-style-type” on insère « list-style-image » puis l’Url de cette dernière.
Ci-dessous un exemple de personnalisation d’une liste à puce, j’ai utilisé l’image favicon du site internet, c’est pour vous montrer qu’on peut utiliser n’importe quelle image. Il faudra simplement faire attention à l’aspect esthétique, en l’occurrence ici, ce n’est pas top. Mais c’est simplement pour la démonstration.
<ul style="list-style-image: url('/favicon.png');" >
<li>Exemple liste à puce HTML – sans puce 1</li>
<li> Exemple liste à puce HTML – sans puce 2</li>
</ul>
Résultat de notre liste à puce
2.3. Modifier l’apparence de la numérotation d’une liste HTML
Il est également possible de modifier l’apparence d’une liste à puce avec numérotation. On reprend le même procéder que pour la liste à puce. Nous avons des possibilités prédéfinies, avec plus de choix. On appliquera le paramètre « list-style-type” à la balise <ol> cette fois. Normal, c’est la balise pour les listes numérotées. Voici les principaux types de liste numérotée que vous allez pouvoir utiliser :
- decimal => par défaut – chiffres décimaux
- decimal-leading-zero => les chiffres décimaux avec un zéro devant (01, 02, 03…)
- upper-roman => chiffres romains en majuscules
- lower-roman => chiffres romains en minuscules
- upper-alpha => alphabet en majuscules
- lower-alpha => alphabet en minuscules
- lower-greek => chiffres grecs
Voici un exemple de code avec l’alphabet en majuscule :
<ol style="list-style-type:upper-alpha">
<li>Exemple liste à puce HTML - carré 1</li>
<li>Exemple liste à puce HTML - carré 2</li>
</ol>
Et résultat de la liste HTML
Voici un exemple de code avec les chiffres romains en majuscule :
<ol style="list-style-type: upper-roman">
<li>Exemple liste à puce HTML - carré 1</li>
<li> Exemple liste à puce HTML - carré 2</li>
</ol>
Et résultat de la liste HTML
2.4. Modifier mise en forme liste de définition
Concernant les listes de définition, il n’y a pas de paramètre par défaut permettant de faire des modifications. Ici, il s’agit plutôt de faire ressortir les informations et différencier le mot ou l’expression de la définition de cette dernière.
La balise HTML contenant le mot ou l’expression étant <dt>, on peut la faire ressortir en appliquant du CSS à la volée comme nous l’avons vu précédemment. Ci-dessous, un exemple qui permettra une meilleure différenciation avec la définition.
<dl>
<dt style= "color:white; background-color:black; font-weight:bold;">Titre de la définition</dt>
<dd>La définition en elle même</dd>
<dt>Titre de la 2eme définition</dt>
<dd>La définition 2eme en elle même</dd>
</dl>
- Titre de la définition
- La définition en elle même
- Titre de la 2eme définition
- La définition 2eme en elle même
