Les styles de puces en html

Il existe sans doute de nombreux sites présentant le sujet, mais ayant eu besoin, sur le plan professionnel, de fournir quelques explications sur ce thème, je vous en fait bénéficier...

Liste non ordonnée

Pour afficher des puces, il faut utiliser les balises :

<ul> et </ul> // ouverture et fermeture de la balise ul (= unordered list)

entre lesquelles on insère pour chaque ligne les balises :

<li> et </li> // ouverture et fermeture de la balise <li> (= list item)

Un exemple :

<ul> 
	<li>une première puce</li> 
	<li>une deuxième puce</li>
</ul>

Sur ce blog, les puces sont affichées :

• une première puce
• une deuxième puce

Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :

Liste non ordonnée avec deux niveaux

On utilise les mêmes balises que précédemment, en imbriquant un deuxième niveau.

Un exemple :

<ul>
	<li>puce de premier niveau</li>
	<li>puce de premier niveau //ne pas fermer la balise <li>
		<ul> //ouverture de la balise de deuxième niveau
			<li>puce de deuxième niveau</li>
			<li>puce de deuxième niveau</li>
		</ul> //fermeture de la balise de deuxième niveau
	</li> //fermeture de la balise de premier niveau laissée ouverte précédemment
</ul>

Sur ce blog, les puces sont affichées ainsi :

• puce de premier niveau
• puce de premier niveau
  • puce de deuxième niveau
  • puce de deuxième niveau

Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :

Listes ordonnées

Le principe est le même, au lieu d'utiliser la balise

<ul> on utilise la balise <ol>  (= ordered list)

On utilise donc les balises :

<ol> et </ol> // ouverture et fermeture de la balise ol (= ordered list)

entre lesquelles on insère pour chaque ligne les balises :

<li> et </li> // ouverture et fermeture de la balise <li> (= list item)

Un exemple :

<ol> // ouverture de la balise <ol>
	<li>une première puce</li>
	<li>une deuxième puce</li>
</ol>

Ce code affiche :

1. une première puce
2. une deuxième puce

Listes ordonnées à deux niveaux

Un premier exemple :

Voici une liste ordonnée avec un premier niveau numérique et un deuxième niveau avec des lettres minuscules.
Le principe est le même que pour les listes non ordonnées, il ne faut pas fermer la dernière balise du premier niveau avant d'ouvrir le second niveau.

Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :

Un autre exemple :

Voici une liste ordonnée avec un premier niveau numérique et un deuxième niveau avec des lettres majuscules :

Par défaut, le code saisi (en haut) affiche les puces ainsi (en bas) :

Ecrit par Lise - Site