<ul>

O elemento HTML <ul> (ou elemento HTML 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 propriedade list-style-type.

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

Contexto de utilização

Atributos

Este elemento inclui os atributos globais.

compact

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.

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

type

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

• círculo,
• disco,
• e quadrado.

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

Se não estiver presente e se nenhuma propriedade CSS list-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.

Nota de utilização: Não use este atributo, pois está ultrapassado; em seu lugar, utilize a propriedade CSS list-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 propriedade list-style, conveniente para escolher a maneira como os ordinais serão mostrados,
  • CSS counters, eficientes para guiar listas complexas aninhadas,
  • a propriedade line-height, válida para simular o atributo ultrapassado compact,
  • a propriedade margin, proveitosa para controlar a indentação da lista.