7. Llistes

Les llistes desordenades s'inclouen entre les etiquetes <ul> i </ul>. Dins aquestes etiquetes, per diferenciar cada ítem de la llista, es fan servir les etiquetes <li></li>.

Si no especificam res, s'hi aplicarà l'estil de vinyetes per defecte, cercle negre, centrat verticalment (seria l'equivalent a l'estil style="list-style-type: disc;").

<ul>
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>

• Primer punt...
• Segon punt...
• Tercer punt...

Si hi aplicam l'estil style="list-style-type: circle;" es canviarà el tipus de vinyeta per un cercle buit, centrat verticalment.

<ul style="list-style-type: circle;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>

• Primer punt...
• Segon punt...
• Tercer punt...

Si hi aplicam l'estil style="list-style-type: square; es canviarà el tipus de vinyeta per un quadrat negre, centrat verticalment.

<ul style="list-style-type: square;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>

• Primer punt...
• Segon punt...
• Tercer punt...

Si hi aplicam l'estil style="list-style-type: none; no s'hi aplicarà cap vinyeta, però sí la tabulació esquerra. Això pot ser molt útil per incloure el nostre propi tipus de vinyeta als ítems. Podríeu afegir un guió seguit d'un espai davant cada ítem (- Primer punt...) i faria l'efecte de vinyeta.

<ul style="list-style-type: none;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>

• Primer punt...
• Segon punt...
• Tercer punt...

Les llistes desordenades es poden imbricar, és a dir, es poden crear llistes dins altres llistes, sempre seguint l'ordre correcte amb les etiquetes. A l'exemple ho veurem més clarament.

Ens hem de fixar que quan una llista s'imbrica dins una altra, entre les etiquetes <li></li> es torna a obrir una altra llista <ul> amb més ítems <li></li>. També ens hem de fixar que la tabulació augmenta i es canvia, automàticament, el tipus de vinyeta per diferenciar els diferents nivells dels ítems.

<ul>
<li>Primera unitat...</li>
<li>Segona unitat...
<ul>
<li>Tema 1...</li>
<li>Tema 2...</li>
</ul>
</li>
<li>Tercera unitat</li>
</ul>

• Primera unitat...
• Segona unitat...
  • Tema 1...
  • Tema 2...
• Tercera unitat

Les llistes ordenades s'inclouen entre les etiquetes <ol> i </ol>. Dins aquestes etiquetes, per diferenciar cada ítem, es fan servir les etiquetes <li></li>, igual que a les llistes desordenades; això no canvia.

Si no especificam res, s'hi aplicarà l'estil de numeració per defecte (1, 2, 3...).

<ol>
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>

1. Primer punt...
2. Segon punt...
3. Tercer punt...

Si especificam el paràmetre type="a" (es pot utilitzar "a", "b", "c"...en minúscules, o "A", "B", "C",...en majúscules), davant cada ítem s'afegirà, per ordre, una lletra de l'abecedari.

<ol type="a">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>

1. Primer punt...
2. Segon punt...
3. Tercer punt...

Si especificam el paràmetre type="I", davant cada ítem s'afegirà una xifra romana.

<ol type="I">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>

1. Primer punt...
2. Segon punt...
3. Tercer punt...

Podem especificar que es comenci la llista per un número en concret, per exemple el 5, amb el paràmetre start="5".

<ol start="5">
<li>Cafè</li>
<li>Llet</li>
<li>Arròs</li>
</ol>

5. Cafè
6. Llet
7. Arròs

Les llistes ordenades també es poden imbricar. Ens hem de fixar que quan una llista s'imbrica dins una altra torna a començar la numeració des d'1 (primera llista de l'exemple).

Si no ens volem confondre entre ítems, és interessant imbricar una llista desordenada sense vinyetes i numerar-la a mà o imbricar una llista desordenada (segona llista de l'exemple). Així es canvia el tipus de vinyeta (no tindrà numeració).

També podem imbricar llistes desordenades i llistes desordenades (tercera llista de l'exemple).

<ol>
<li>Primera unitat...</li>
<li>Segona unitat...
<ol>
<li>Tema 1...</li>
<li>Tema 2...</li>
</ol>
</li>
<li>Tercera unitat</li>
</ol>

<ol>
<li>Primera unitat...</li>
<li>Segona unitat...
<ul style="list-style-type: none;">
<li>2.1. Tema 1...</li>
<li>2.2. Tema 2...</li>
</ul>
</li>
<li>Tercera unitat</li>
</ol>

<ol>
<li>Primera unitat...</li>
<li>Segona unitat...
<ul>
<li>Tema 1...</li>
<li>Tema 2...</li>
</ul>
</li>
<li>Tercera unitat</li>
</ol>

1. Primera unitat...
2. Segona unitat...
   1. Tema 1...
   2. Tema 2...
3. Tercera unitat

1. Primera unitat...
2. Segona unitat...
   • 2.1. Tema 1...
   • 2.2. Tema 2...
3. Tercera unitat

1. Primera unitat...
2. Segona unitat...
   • Tema 1...
   • Tema 2...
3. Tercera unitat