L'element HTML (llista desordenada) <ul>
representa una llista desordenada d'elements, és a dir, un recull d'elements que no tenen un ordre numèric, i el seu ordre a la llista no té sentit. En general, els elements d'una llista desordenada es mostren amb una vinyeta, que pot ser de diverses formes, com un punt, un cercle o un quadrat. L'estil de la vinyeta no està definit en la descripció HTML de la pàgina, sinó en la seva CSS associada, mitjançant la propietat list-style-type
.
No hi ha limitació en la profunditat i l'alternança de les llistes niades definides amb els elements <ol>
i <ul>
.
<ol>
i <ul>
ambdós representen una llista d'elements. Es diferencien en que, amb l'element <ol>
, l'ordre és significatiu. Com a regla general per determinar quin d'ells utilitzar, tracteu de canviar l'ordre dels elements de la llista; si canvia el significat teniu que utilitzar l'element <ol>
, en cas contrari podeu usar <ul>
.Context d'ùs
Categories de contingut | Contingut dinàmic |
Contingut permès | zero o més elements <li> , que al seu torn contenen sovint niats elements <ol> o <ul> . |
Omissió de l'etiqueta | cap, tant l'etiqueta inicial com l'etiqueta final són obligatories |
Elements pares permesos | Qualsevol element que accepti contingut dinàmic |
Interfície DOM | HTMLUListElement |
Atributs
Aquest element inclou els atributs globals.
compact
- Aquest atribut booleà dona entendre que la llista hauria de representar-se en un estil compacte. La interpretació d'aquest atribut depèn de l'agent d'usuari i no funciona en tots els navegadors.
Nota d'ùs: No utilitzeu aquest atribut, ja que ha quedat en desús: l'element
<ul>
s'ha de donar estil amb CSS . Per donar un efecte similar com l'atributcompact
, la propietat CSS line-height es pot utilitzar amb un valor del 80%.
type
- S'utilitza per definir l'estil de vinyeta de la llista. Els valors definits en HTML3.2 i la versió de transició d'HTML 4.0/4.01 són:
circle
,disc
,- and
square
.
Un quart tipus de vinyeta s'ha definit en la interfície WebTV, però no tots els navegadors el suporten:
triangle.
Si no està present i no s'aplica la propietat CSS
list-style-type
a l'element, l'agent d'usuari pot decidir utilitzar un tipus de vinyetes depenent del nivell d'anidament de la llista.Nota d'ùs: No utilitzeu aquest atribut, ja que ha quedat desaprovat; utilitzeu la propietat CSSlist-style-type
en el seu lloc.
Exemples
Exemple senzill
<ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul>
Sortida de l'anterior HTML:
- first item
- second item
- third item
Llistes niades
<ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --> <ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> </li> <!-- Here is the closing </li> tag --> <li>third item</li> </ul>
Sortida de l'anterior HTML:
- first item
- second item
- second item first subitem
- second item second subitem
- second item second subitem first sub-subitem
- second item second subitem second sub-subitem
- second item second subitem third sub-subitem
- second item third subitem
- third item
Niar <ul> i <ol>
<ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> </li> <!-- Here is the closing </li> tag --> <li>third item</li> </ul>
Sortida de l'anterior HTML:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Veure
- Altres elements HTML relacionats amb llistes:
<ol>
,<li>
,<menu>
i el obsolet<dir>
; - Propietats CSS que poden ser especialment útils per a l'estil de l'element <ul>:
- la propietat list-style, útil per triar la forma en què es mostra l'ordinal,
- CSS counters, útil per gestionar llistes niades complexes,
- la propietat line-height, útil per simular l'atribut obsolet
compact
, - la propietat margin, útil per controlar la sagnia de la llista.