<ul>

This translation is incomplete. Please help translate this article from English

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

Nota d'ùs: Els elements <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'atribut compact, 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 CSS list-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
    1. second item first subitem
    2. second item second subitem
    3. 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.