Llistes (HTML4)

El llenguatge HTML defineix tres tipus diferents de llistes per agrupar els elements: llistes no ordenades (es tracta d'una col · lecció simple d'elements en què no importa el seu ordre), llistes ordenades (similar a l'anterior, però els elements estan numerats i per tant, importa la seva ordre) i llistes de definició (un conjunt de termes i definicions similar a un diccionari).

Llistes no ordenades ( Unordered List)

Les llistes no ordenades són les més senzilles i les que més s'utilitzen. Una llista no ordenada és un conjunt d'elements relacionats entre si però per als quals no s'indica un ordre o seqüència determinats. 

L'etiqueta <ul> tanca tots els elements de la llista i l'etiqueta <li> cadascun dels seus elements.

Exemple:

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ul té un atribut, type que defineix el format de la llista. type no està suportat amb HTML5

<ul type="disc|circle|square">

Llistes  ordenades ( Ordered List)

Les llistes ordenades són gairebé idèntiques a les llistes no ordenades, llevat que en aquest cas els elements relacionats es mostren seguint un ordre determinat. 

Quan es crea per exemple una llista amb les instruccions d'un producte, és important l'ordre en el que es realitza cada pas. Quan es mostra un índex o taula de continguts en un llibre, és important l'ordre de cada element de l'índex. 

El <ol> defineix una llista ordenada. Una llista ordenada pot ser numèric o alfabètic.  Utilitzeu el <li> per definir elements de la llista.

Exemple:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Amb l'atribut type definim si usem lletres, números o números romans.

 <ol type="1|a|A|i|I">

1: números

a: lletres en minúscula

A: lletres en majúscula

i: números romans en minúscula

I: números romans en majúscula

Llistes de definicions ( Description Lists )

Les llistes de definició prou feines s'utilitzen en la majoria de pàgines HTML.

El seu funcionament és similar al d'un diccionari, ja que cada element de la llista està format per termes i definicions. L'etiqueta <dl> crea la llista de definició i les etiquetes <dt> i <dd> defineixen respectivament el terme i la descripció de cada element de la llista.

Exemple:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>