Oelemento HTML<ul> (ouelementoHTML de Lista desordenada) representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes. Caracteristicamente, os itens em uma lista desordenada são exibidos com um marcador que pode ter várias formas, como um ponto, um círculo, ou um quadrado. O tipo de marcador não é definido na descrição HTML da página, mas na CSS associada, utilizando a propriedadelist-style-type.

Não há nenhuma limitação para a profundidade e a imbricação das listas definidas com os elementos<ol> e<ul>.

Note:Nota sobre a utilização: Ambos os elementos<ol> e<ul> representam uma lista de itens. São diferentes porque, com o elemento<ol>, a ordenação tem significado. Como regra de ouro para determinar qual dos dois usar, tente mudar a posição dos itens na lista; caso a significação seja alterada, o elemento<ol> deve ser utilizado mas, se não houver mudança, você pode aplicar<ul>.

Contexto de utilização

Atributos

Este elemento inclui osatributos globais.

compactDeprecated

Este atributo booleano sugere que a lista será processada em um modelo compacto. A interpretação deste atributo depende do perfil de navegação (user agent) e não funciona em todos os navegadores.

Note:Nota de utilização: Não aplique este atributo, que foi preterido - o elemento<ul> deve ser definido utilizando-se a folha de estilosCSS. Para dar um efeito similar ao atributo compacto, a propriedadeline-height (espaçamento), daCSS, pode ser utilizada com um valor de 80%.

typeDeprecated

Usados para estabelecer o tipo de marcador da lista. Os valores definidos durante aHTML3.2 e a versão de transição deHTML 4.0/4.01, são:

• círculo,
• disco,
• equadrado.

Um quarto tipo de marcação está definido na interfaceWebTV, mas nem todos os navegadores o acolhem:triângulo.

Se não estiver presente e se nenhuma propriedadeCSSlist-style-type se aplicar ao elemento, o perfil de navegação decidirá qual tipo de marcador utilizar, dependendo do nível de aninhamento da lista.

Note:Nota de utilização: Não use este atributo, pois está ultrapassado; em seu lugar, utilize a propriedadeCSSlist-style-type.

Exemplos

Exemplo simples

<ul>  <li>primeiro item</li>  <li>segundo item</li>  <li>terceiro item</li></ul>

A HTML acima resulta em:

• primeiro item
• segundo item
• terceiro item

Lista aninhada

<ul>  <li>primeiro item</li>  <li>    segundo item    <!-- Observe que a tag de fechamento </li> não é colocada aqui! -->    <ul>      <li>segundo item primeiro subitem</li>      <li>        segundo item segundo subitem        <!-- O mesmo para a segunda lista não ordenada aninhada (Same for the second nested unordered list)! -->        <ul>          <li>segundo item segundo subitem primeiro sub-subitem</li>          <li>segundo item segundo subitem segundo sub-subitem</li>          <li>segundo item segundo subitem terceiro sub-subitem</li>        </ul>      </li>      <!-- A tag de fechamento </li>, que contém a terceira lista não ordenada (Closing </li> tag for the li that contains the third unordered list) -->      <li>segundo item terceiro subitem</li>    </ul>  </li>  <!-- Aqui entra a tag de fechamento </li> (Here is the closing </li> tag) -->  <li>terceiro item</li></ul>

A saída HTML acima, é:

• primeiro item

• segundo item

  • segundo item primeiro subitem

  • segundo item segundo subitem

    • segundo item segundo subitem primeiro sub-subitem
    • segundo item segundo subitem segundo sub-subitem
    • segundo item segundo subitem terceiro sub-subitem

  • segundo item terceiro subitem

• terceiro item

<ul> e <ol> aninhados

<ul>  <li>primeiro item</li>  <li>    segundo item    <!-- Observe, a tag de fechamento </li> não é colocada aqui! (Look, the closing </li> tag is not placed here!) -->    <ol>      <li>segundo item primeiro subitem</li>      <li>segundo item segundo subitem</li>      <li>segundo item terceiro subitem</li>    </ol>  </li>  <!-- Aqui está a tag de fechamento </li> (Here is the closing </li> tag) -->  <li>terceiro item</li></ul>

A saída HTML acima será:

• primeiro item

• segundo item

  1. segundo item primeiro subitem
  2. segundo item segundo subitem
  3. segundo item terceiro subitem

• terceiro item

Veja também

• Outros elementos HTML relacionados à lista:<ol>,<li>,<menu> e o obsoleto<dir>;
• Propriedades CSS que podem ser especialmente úteis para determinar o modelo do elemento <ul>:
  • a propriedadelist-style, conveniente para escolher a maneira como os ordinais serão mostrados,
  • CSS counters, eficientes para guiar listas complexas aninhadas,
  • a propriedadeline-height, válida para simular o atributo ultrapassadocompact,
  • a propriedademargin, proveitosa para controlar a indentação da lista.