La balise <ul>

Les listes à puces sont très simples à réaliser. Vous ouvrez une balise <ul>, vous rajoutez une balise <li> pour la liste et vous refermez les balises.

Code

Résultat

<ul>
<li>Mon texte</li>
</ul>

Mon texte

Vous pouvez ajouter d'autre item bien sûr.

Code

Résultat

<ul>
   <li>Mon texte 1</li>
   <li>Mon texte 2</li>
   <li>Mon texte 3</li>
</ul>

Mon texte 1
Mon texte 2
Mon texte 3

Pour ajouter un titre à votre liste ajoutez la balise <LH>.

Code

Résultat

<ul>
   <lh>Le titre de la liste</lh>
   <li>Mon texte 1</li>
   <li>Mon texte 2</li>
   <li>Mon texte 3</li>
</ul>

Le titre de la liste

Mon texte 1
Mon texte 2
Mon texte 3

Personnalisation des puces

Vous avez la possibilité de personnaliser les puces avec l'attribut type, mais je vous conseille de faire les personnalisations ou la mise en page avec les feuilles de styles (CSS) externe, ou pour une seule page d'incorporer le style dans la balise ( voir plus bas ).

Code

Résultat

Les styles

<ul>
<li type="disc"> Disc</li>
<li type="circle">Circle</li>
<li type="square">Square</li>
</ul>

Style disc
Style circle
Style square

- disc pour un disque plein
- circle pour un disque vide.
- square pour un carré.

Si vous affectez le même style à tous vos items, mettez le type dans la balise <ul>

Code

Résultat

<ul type="square">
<li> Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

Texte 1
Texte 2
Texte 3

Définir le style en CSS

Voici comment incorporer un style CSS pour vos puces, mais pour des facilités de mise à jour de votre site, préférez une feuille de style externe ou définissez le style dans la balise head.(voir rubrique CSS)

Code

Résultat

<ul style="list-style-type:square">
<li>Texte 1</li>>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

Texte 1
Texte 2
Texte 3

Cacher les puces

Vous désirez faire disparaître les puces pour des raisons esthétiques ! C'est possible en affectant none au style.

Code

Résultat

<ul style="list-style-type:none">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

Texte 1
Texte 2
Texte 3