Comment créer une liste à puces en HTML et personnaliser son apparence ?

Aujourd'hui, nous allons voir ensemble comment créer une liste à puces en HTML, quel code utiliser, et comment personnaliser l'apparence de la liste : changer la forme des puces pour mettre par exemple des puces carrées, utiliser des icônes à la place des puces, etc.

Les listes à puces ont quelques grands atouts :

• Elles facilitent la compréhension - Par leur capacité à synthétiser une information, ou à faire ressortir les points importants, elles aident le lecteur à accéder rapidement aux éléments essentiels d'un article.
• Elles améliorent la lisibilité - En créant des sauts de ligne et une "irrégularité" dans le contenu, les listes à puces aident à retenir l'attention de l'internaute qui a l'habitude de "scanner" rapidement les contenus.
• Elles peuvent indiquer un ordre - Une liste à puces numérotée permet de souligner un processus en plusieurs étapes, elle crée un ordre logique entre les éléments.

Les listes à puces sont aussi en toile de fond de nombreuses fonctionnalités : par exemple, sur mon blog, le menu est une liste à puces, tout comme les tags affichés sous certains articles, idem pour les boutons de partage vers les réseaux sociaux.

Voyons ensemble avec quel code on peut les personnaliser !

Le code HTML d'une liste à puces

En tant que débutant, retenez d'abord qu'il existe deux grands types de listes :

• Les listes non ordonnées (comme celle que je suis en train de faire) : il n'y a pas d'ordre particulier entre les éléments, ils ne sont pas numérotés. Retenez qu'en anglais, "liste non ordonnée" se dit "unordered list", ça va nous servir pour la suite !
• Les listes ordonnées (ou "ordered lists") sont quant à elles numérotées et il y a un ordre logique entre les éléments.

Si vous présentez une recette de cuisine par exemple, les ingrédients peuvent être listés dans n'importe quel ordre. En revanche, mieux vaut que les étapes de la recette soient dans le bon ordre !

Tout ceci va se traduire dans le code HTML de la liste. Une liste non ordonnée commencera par un bout de code, une "balise" dans le jargon, écrite comme ceci :

<ul>

Pourquoi "ul" ? Parce que "Unordered List" (je vous avais dit que c'était important !).

Et une liste ordonnée commencera quant à elle par <ol>... parce que "Ordered List". Le code, c'est souvent très logique ;)

Cette balise <ul> ou <ol> permet "d'ouvrir la liste", comme si on annonçait "Attention, la liste va commencer". Ensuite, il va falloir ajouter des éléments à cette liste. On le fait en entourant chaque élément par <li> (au début) et </li> à la fin. La version de la balise avec le slash signifie qu'on en a fini avec cet élément et qu'on va passer au suivant (ou terminer la liste).

Par exemple, pour lister "100% coton" et "Fabriqué en France" comme éléments d'une liste, j'écrirais :

<li>100% coton</li>
<li>Fabriqué en France</li>

Dernière étape : annoncer que vous avez terminé votre liste. Après le dernier </li>, vous pouvez fermer une liste non ordonnée en indiquant </ul> et une liste ordonnée en indiquant </ol>

Si on résume, on aurait donc ce genre de code pour une liste ordonnée :

<ol>
<li>100% coton</li>
<li>Fabriqué en France</li>
</ol>

Et ce genre de code HTML pour une liste non ordonnée :

<ul>
<li>100% coton</li>
<li>Fabriqué en France</li>
</ul>

Pour la suite de ce tutoriel, nous allons nous intéresser plus spécifiquement au cas des listes non ordonnées. En effet, elles sont généralement précédées d'un signe (par exemple, une puce ronde pour chaque élément de la liste, une puce carrée, une icône...) et c'est un élément que vous pouvez personnaliser.

Comment changer la position ou la forme des puces ?

Par défaut, une liste à puces en HTML, sans mise en forme, s'affiche avec de simples puces rondes et un alinéa entre la puce et le texte de l'élément associé.

Changer la forme de la puce

On peut modifier la forme des puces en ajoutant une propriété baptisée "list-style", qui va définir le style de la liste.

<ul style="list-style:XXX">
<li>Bonjour</li>
<li>Merci</li>
<li>Au revoir</li>
</ul>

Le "XXX" va être remplacé par une valeur prédéfinie qui va changer la forme de la puce. Cette valeur peut être par exemple :

• square, pour avoir une puce carrée ;
• circle, pour avoir une puce ronde creuse (en forme de cercle) ;
• lower-latin, pour avoir des lettres minuscules (a, b, c, d) au début de chaque élément de la liste ;
• upper-latin si vous préférez que les lettres soient en majuscules ;
• decimal, pour avoir une liste numérotée (1, 2, 3, 4) tout en utilisant la balise "ul" et pas "ol" ;
• decimal-leading-zero, pour avoir une liste numérotée où les chiffres sont précédés d'un 0 (01, 02, 03, 04) ;
• none, pour n'avoir aucune puce.

Changer la position de la puce

Toujours avec la propriété "list-style", vous allez pouvoir agir sur la position de la puce. Soit la puce est extérieure au texte de la liste (on spécifie alors "outside"). Soit elle est incluse dans la liste (on spécifie alors "inside").

Pour voir la différence, il faut prendre un exemple où le texte d'un élément de la liste à puces revient à la ligne. Notez bien sur l'image ci-dessous comment écrire le code : si le "list-style" est suivi de deux propriétés différentes (ici, je définis à la fois la forme de la puce et sa position), on sépare ces propriétés par un espace ; on pourrait également inclure seulement la position, ou seulement la forme.

Si vous êtes un peu plus à l'aise avec le code, notez que vous pouvez bénéficier d'une grande liberté de mise en forme. Dans votre "ul style", vous pouvez tout à fait définir des marges, des espaces, une ligne horizontale. Et ce "style" peut s'appliquer aussi bien à la liste entière, via la balise "ul", comme je vous l'ai montré, qu'à un élément de la liste "li".

Par exemple, sur mon blog, j'ai choisi d'afficher une ligne en pointillés très discrète sous chaque élément d'une liste (peut-être d'ailleurs que vous ne la voyez même pas si votre écran est mal calibré !) :

• Regardez la ligne en pointillés !

Pour faire apparaître ce type de ligne, on peut écrire :

<li style="border-bottom:1px dashed #bbb">

La propriété "border-bottom" désigne la "ligne du bas". Je décide ici qu'elle va faire 1px d'épaisseur, être en pointillés ("dashed") et de couleur grise (la couleur est exprimée en notation hexadécimale, tapez "color picker" sur Google pour accéder à un convertisseur vous permettant d'obtenir la notation hexadécimale de n'importe quelle couleur).

Ca fait beaucoup d'informations d'un seul coup si vous débutez mais je vous dis ça pour que vous sachiez au moins que cette possibilité existe.

Retenez que vous ne pouvez pas écrire n'importe quoi dans le code. Il y a des conventions, des termes prédéfinis qui pourront être interprétés par les navigateurs web de vos visiteurs. C'est comme un "langage universel". C'est pour ça qu'on écrit "dashed" et pas "pointillés", qu'on ne peut pas écrire style="mets une bordure rouge en bas".

Dans un "style", vous pouvez définir des couleurs, des marges, des polices d'écriture, des lignes, des alignements... Pour avoir une idée de l'étendue des possibilités et de la manière de les écrire dans le code, vous pouvez utiliser un site comme W3Schools.

Comment afficher les éléments de la liste à l'horizontale ?

Je mentionnais tout à l'heure qu'une liste à puces en HTML pouvait aussi servir à présenter un menu. Et vous allez me dire "Et si je veux un menu horizontal" ? On peut tout à fait ordonner aux éléments d'une liste de s'afficher à l'horizontale.

Dans ce cas, on utilise une autre propriété, la propriété "display", qui détermine l'affichage. Je définis cette propriété sur "inline-block", pour que les éléments s'affichent en ligne et soient considérés comme des "blocs" dont on peut contrôler les dimensions.

Bien entendu, en l'état, ce n'est pas très joli... et ça manque un peu d'espace ! On peut donc ajouter un espace de 10 pixels autour du texte pour aérer le tout à l'aide de la propriété "padding" !

Vous remarquerez que lorsque l'on cite plusieurs propriétés, comme "display" et "padding" dans cet exemple, on les sépare par des points-virgules. Tous ces petits détails ont leur importance pour que le code fonctionne bien !

Mais figurez-vous que ce code est très mauvais ! Pourquoi ? Parce qu'il vous oblige à répéter les mêmes instructions sur chaque ligne. Ca vous fait écrire du code pour rien alors que vous pourriez définir une fois pour toutes la mise en forme de la liste sans avoir à la répéter à chaque fois.

Ce code va alourdir la page web inutilement. Bien sûr, à l'échelle d'une ou deux lignes, ce n'est pas grand-chose... mais si tout votre site était codé comme ça, il mettrait une éternité à se charger, une catastrophe en termes d'expérience utilisateur !

Pour pallier à ce problème, on utilise un autre langage, le CSS, dédié spécifiquement à la mise en forme. Il va permettre de définir des règles globales.

Et si j'ai commencé par vous expliquer le principe des listes à puces en HTML, c'est parce que vous allez voir que le passage à l'écriture CSS se fait ensuite de manière très naturelle.

Comment passer du code HTML au code CSS ?

Le principe du CSS est de pouvoir s'appliquer à plusieurs éléments. Imaginez que vous vouliez que TOUTES vos listes aient des puces carrées.

En HTML, on écrirait la liste comme ça, et il faudrait l'écrire sur CHAQUE liste :

<ul style="list-style:square">
<li>Bonjour</li>
<li>Merci</li>
<li>Au revoir</li>
</ul>

En CSS, on va écrire ça comme ça :

ul {list-style:square}

De même, si on voulait appliquer une bordure sous tous les éléments d'une liste, on écrirait ça comme ça :

li {border-bottom:1px dashed #bbb}

Et si on souhaite cumuler deux propriétés, on les sépare par un point-virgule, par exemple :

li {border-bottom:1px dashed #bbb;display:inline-block}

Où met-on ce code CSS ?

En général, le CSS est lié au thème utilisé par votre site.

Si vous êtes sur WordPress par exemple, chaque thème possède un fichier baptisé "style.css". Mieux encore, il existe parfois la possibilité d'ajouter du "CSS personnalisé" au thème (sur WordPress, regardez dans le menu Apparence > Personnaliser, il peut y avoir l'option "CSS additionnel" par exemple).

Si vous modifiez votre thème sur WordPress, il est conseillé de créer un thème enfant, via lequel vous effectuerez vos personnalisations sans toucher au thème principal.

Là où ça se complique !

J'aimerais bien m'arrêter là et vous dire que c'est aussi simple... mais vous allez vite être confronté à une réalité : si vous définissez une mise en forme pour TOUTES les listes du site, elle va aussi s'appliquer à tout ce qui fait appel à des listes à puces en toile de fond, par exemple votre menu ou vos boutons de réseaux sociaux.

Il faut donc être capable de spécifier que la mise en forme ne doit s'appliquer qu'aux listes d'une zone précise, par exemple la zone où se trouve votre article. Et pour savoir comment elle s'appelle, ça va être à vous d'enquêter... car chaque site est différent !

Je vais prendre un site au hasard pour vous expliquer la méthode. Le très beau blog voyage Itinera Magica. Prenons une page de contenu, comme cette page A propos, qui contient justement une liste à puces.

Faites un clic droit sur le contenu avec Google Chrome et choisissez "Inspecter".

Google ouvre alors la Console, qui vous révèle le code de la page.

Cliquez sur le petit bouton de l'inspecteur, surligné en bleu :

Vous allez ensuite promener votre souris sur la page de manière à surligner le bloc qui contient le texte de l'article. Là par exemple, ce n'est pas bon car seul le titre est sélectionné.

Là, ça y est, ça prend toute la zone de l'article !

Google vous montre le code correspondant à cette zone. Ici, je vois qu'il s'appelle "well".

Si je veux mettre en forme uniquement les listes de la zone des articles, j'écrirai dans mon fichier CSS :

.well ul {list-style:square}

Vous pouvez même tester en live si ça fonctionne ! Dans la console de Chrome, cliquez sur le signe + :

Rédigez ensuite votre instruction et regardez l'écran, les puces sont devenues carrées !

Comment utiliser des puces personnalisées sur une liste à puces en HTML ?

Je vous montre une dernière chose... plutôt à tester une fois que vous serez à l'aise avec le principe du CSS ! Comment utiliser des puces personnalisées comme je le fais sur No Tuxedo !

On peut utiliser une image en guise de puce, avec la propriété bonne à tout faire "list-style". Par exemple, si votre image est dans un sous-dossier /images/mapuce.png, vous pourriez écrire :

list-style:url('images/mapuce.png');

Ce n'est pas une bonne idée car même bien compressée et optimisée, une image reste un fichier qui va consommer des ressources et impacter le temps de chargement du site. Aujourd'hui, on a souvent besoin d'icônes sur un site donc je vous conseillerais plutôt d'installer une police d'icônes comme FontAwesome.

C'est comme une police d'écriture, sauf qu'au lieu d'avoir des lettres à disposition, vous avez des icônes ! C'est grâce à FontAwesome que j'ai pu afficher des puces personnalisées sur No Tuxedo.

Une fois la police d'icônes installée, dans votre code CSS, vous allez simplement spécifier que la puce par défaut ne doit pas s'afficher, et que chaque élément d'une liste doit être précédé par la puce de votre choix.

On aura par exemple :

li {list-style:none}
li:before {font-family:FontAwesome; content:'\f046'}

La partie "li" permet d'annuler la puce par défaut... et la partie "li:before" définit qu'avant chaque "li", on fait appel à la police d'écriture Font Awesome et plus spécifiquement à l'icône identifiée par le code "\f046", qui est celle que j'utilise sur le blog.

Écrire sa liste à puces : derniers conseils

Commençons par dire que si la liste à puces favorise une bonne lisibilité de vos pages web, il ne faut pas pour autant en abuser ! Utilisez la liste pour mettre en valeur plusieurs éléments (en particulier quand le sujet est complexe et risque d'être "indigeste" sous forme de gros paragraphe), ou pour éviter des répétitions disgracieuses dans un contenu.

Elle doit être précédée d'une phrase introductive afin d'apporter un contexte aux éléments cités et, si nécessaire, suivie d'une phrase de synthèse ou de conclusion. En effet, la liste à puces n'est autre qu'une énumération.

Concernant la typographie et la présentation de la liste, les usages sur le web sont plus souples que ceux en vigueur sur papier. Sur papier, on considère que :

• La phrase d'introduction doit se terminer par deux points (:) si la liste découle de la phrase, par un point (.) si la liste en est distincte.
• Si les éléments de la liste à puces s'inscrivent dans le prolongement d'une phrase introductive, ils ne comportent pas de majuscule et chaque élément se termine par un point-virgule (;), tandis que le dernier élément de la liste comporte un point.
• Si les éléments de la liste à puces sont considérés comme distincts de la phrase introductive, on leur met une majuscule et ils se terminent chacun par un point.

Sur le web, les usages tendent à être plus souples (ce que certains déplorent !).

Et un conseil que je ne suis pas du tout (les cordonniers étant, comme chacun sait, les plus mal chaussés !) : limitez la longueur des éléments de vos listes à puces et des listes elles-mêmes. Entre 3 et 7 éléments, ça reste lisible. En-deçà, ça n'a guère d'intérêt de faire une liste à puces... et au-dessus, on perd l'intérêt de la liste en termes de structuration du contenu !

J'espère en tout cas que cet article vous donnera les clés pour créer des listes à puces efficaces !