Omet navegació

7. Llistes

Llistes desordenades

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>.

Llista desordenada, amb vinyeta cercle negre (per defecte)

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;").

Codi HTML
<ul>
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>
Visualitzat en el navegador
  • Primer punt...
  • Segon punt...
  • Tercer punt...
Llista desordenada, amb vinyeta cercle buit

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

Codi HTML
<ul style="list-style-type: circle;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>
Visualitzat en el navegador
  • Primer punt...
  • Segon punt...
  • Tercer punt...
Llista desordenada, amb vinyeta quadrat

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

Codi HTML
<ul style="list-style-type: square;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>
Visualitzat en el navegador
  • Primer punt...
  • Segon punt...
  • Tercer punt...
Llista desordenada, sense vinyeta

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.

Codi HTML
<ul style="list-style-type: none;">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ul>
Visualitzat en el navegador
  • Primer punt...
  • Segon punt...
  • Tercer punt...
Imbricar llistes desordenades

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.

Codi HTML
<ul>
<li>Primera unitat...</li>
<li>Segona unitat...
<ul>
<li>Tema 1...</li>
<li>Tema 2...</li>
</ul>
</li>
<li>Tercera unitat</li>
</ul>
Visualitzat en el navegador
  • Primera unitat...
  • Segona unitat...
    • Tema 1...
    • Tema 2...
  • Tercera unitat
Llistes ordenades

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.

Llista ordenada, amb numeració (per defecte)

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

Codi HTML
<ol>
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>
Visualitzat en el navegador
  1. Primer punt...
  2. Segon punt...
  3. Tercer punt...
Llista ordenada, amb enumeració lletres

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.

Codi HTML
<ol type="a">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>
Visualitzat en el navegador
  1. Primer punt...
  2. Segon punt...
  3. Tercer punt...
Llista ordenada, amb numeració en xifres romanes

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

Codi HTML
<ol type="I">
<li>Primer punt...</li>
<li>Segon punt...</li>
<li>Tercer punt...</li>
</ol>
Visualitzat en el navegador
  1. Primer punt...
  2. Segon punt...
  3. Tercer punt...
Llista ordenada, començant per un número diferent d'1

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

Codi HTML
<ol start="5">
<li>Cafè</li>
<li>Llet</li>
<li>Arròs</li>
</ol>
Visualitzat en el navegador
  1. Cafè
  2. Llet
  3. Arròs
Imbricar llistes ordenades i combinar llistes ordenades i llistes desordenades

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).

Codi HTML
<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>
Visualitzat en el navegador
  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