El llenguatge HTML ens permet crear llistes amb ítems i sub-ítems en diversos formats. Llistes numerades, llistes de pics i llistes personalitzades:

Llistes numerades

Les llistes numerades són llistes que serveixen per ordenar numèricament. Per crear-les en html obrim amb l’etiqueta contenidora <ol> i introduïm els ítems amb l’etiqueta <li>.

<ol>
  <li>ítem</li>
  <li>ítem</li>
  <li>ítem</li>
</ol>

el resultat és el següent:
1. ítem
2. ítem
3. ítem

Llistes de Pics

Les llistes de pics s’obren amb l’etiqueta <ul>. I per assenyalar cada ítem fem servir l’etiqueta <li> com en els altres casos.

<ul>
  <li>ítem</li>
  <li>ítem</li>
  <li>ítem</li>
</ul>

el resultat és el següent:
• ítem
• ítem
• ítem

Llistes amb sub-ítems

A partir d’aquí podem ampliar amb sub-ítems creant una llista dins d’in d’una etiqueta <li> com a l’exemple següent.

<ul>
  <li>ítem</li>
  <li>ítem
  <ul>
    <li>sub-ítem</li>
    <li>sub-ítem</li>
    <li>sub-ítem</li>
  </ul>
  </li>
  <li>ítem</li>
</ul>

Llistes alfabètiques i altres atributs

També podem afegir alguns atributs a les etiquetes <ol> i <ul> com a l’exemple una llista ordinal alfabètica amb <ol type=”a”>. Pots consultar més detalls a W3schools

Article escrit per Marc T. i revisat per grigol@xtec.cat