<ul>

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

Context d'ùs

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.