Comment créer des puces en HTML

Les puces aèrent les longs blocs de texte et mettent en valeur des listes d'informations. Faciles dans un traitement de texte, elles nécessitent du code en HTML. Peu de code suffit : enveloppez chaque item dans des balises <li> et la liste entière dans <ul> (liste non ordonnée). Vous pouvez ensuite styliser la liste avec CSS.

Étape 1

Rédigez le texte de vos puces, chaque point sur une ligne. Enveloppez chaque ligne dans <li> et </li> :
<li>Ceci est un point</li>
<li>Ceci est un autre point</li>

Étape 2

Créez une ligne vide au-dessus de la liste et tapez <ul>. À la fin, une autre ligne vide avec </ul>. Pour styliser plus tard via CSS, ajoutez un attribut class ou id à la balise d'ouverture <ul>. Exemple avec id :
<ul id="maliste">
<li>Puceu un</li>
<li>Puceu deux</li>
</ul>

Étape 3

Utilisez CSS pour styliser. Placez le code CSS entre <style> dans <head>, ou dans un fichier .css externe lié par <link rel="stylesheet" href="chemin/vers/feuille.css">. Sélectionnez vos listes via l'id ou la class :
#maliste li { font-style: italic; }
Remplacez # par . pour une class.

Étape 4

Changez le type de puce avec la propriété CSS list-style. Types disponibles : cercles vides, disques pleins, carrés pour listes non numérotées. Exemple carrés :
#maliste li { list-style: square; }

Astuce

Utilisez <ol> au lieu de <ul> pour listes ordonnées (numérotées/alphabétisées). Définissez list-style-type pour varier le style. Pour des puces images : list-style: none; et donnez à chaque <li> une image de fond non répétée alignée à gauche, avec un padding gauche pour décaler le texte.