Llistes

En un document, és habitual agrupar diferents elements en llistes. En HTML existeixen tres tipus de llistes: d’una banda les llistes numerades i no numerades, i d’altra banda un tipus especial de llistes amb elements dobles anomenades llistes de definicions.

Llistes numerades i no numerades

Les llistes numerades comencen amb l’etiqueta <ol>, i les llistes no numerades comencen amb l’etiqueta <ul>. En qualsevol cas cadascun dels elements apareix marcar amb l’etiqueta <li>. A continuació tens un parell d’exemples.

<ol>
<li>Primer element</li>
<li>Segon element</li>
<li>Tercer element</li>
</ol>

1. Primer element

2. Segon element

3. Tercer element

<ul>
<li>Primer element</li>
<li>Segon element</li>
<li>Tercer element</li>
</ul>

• Primer element

• Segon element

• Tercer element

Llistes de definicions

Les llistes de definicions són un tipus de llistes especials, amb elements dobles i que s’adapten especialment a les llistes de conceptes i definicions. Aquestes llistes comencen amb l’etiqueta <dl>, i cadascun dels elements es marca amb les etiquetes <dt> i <dd>. A continuació pots veure un exemple.

<dl>
<dt>Primer terme</dt>
<dd>Primera definició</dd>
<dt>Segon terme</dt>
<dt>Tercer terme</dt>
<dd>Tercera definició</dd>
<dt>Quart terme</dt>
<dd>Quarta definició</dd>
</dl>

Primer terme

Primera definició

Segon terme

Tercer terme

Tercera definició

Quart terme

Quarta definició

Llistes niades

Les llistes poden ser element dins d’altres llistes, creant llistes niades. Inclús podem barrejar diferents tipus de llistes.

<ul>
    <li>Fruites
        <ol>
        <li>Poma</li>
        <li>Pera</li>
        <li>Plàtan</li>
        </ol>
    </li>
    <li>Colors
        <ol>
        <li>Roig</li>
        <li>Verd</li>
        <li>Blau</li>
        </ol>
    </li>
</ul>

El codi anterior ens mostrarà la llista següent:

• Fruites

  1. Poma

  2. Pera

  3. Plàtan

• Colors

  1. Roig

  2. Verd

  3. Blau

Estils de les llistes

Algunes regles aplicables a les llistes.

list-style-type

Tipus de numeració o de marques de les llistes. Els possibles valors són marques: disc, circle o square. També podem utilitzar diferents tipus de numeració: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha o none.

ol {
    list-style-type: upper-roman;
}

list-style-image

Imatge personalitzada per a les llistes no numerades

ul {
    list-style-image: url("imatge.png");
}

list-style-position

Posició dels marcadors dins o fora dels elements de la llista. Açò es notarà sobre tot si utilitzem una línia que requadre els elements o canviem el color de fons. Els seus possibles valors són inside o outside.

display

Amb el valor inline aconseguirem eliminar els bots de línia darrere de cada element, de manera que els elements de la llista es mostraran un al costat del altre. Els seus possibles valors són inline o block.