<ul>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Categorias de conteúdo Flutuantes
Conteúdo permitido zero ou mais <li> elementos, eventualmente combinados com <ol> e elementos <ul>.
Omissão de etiqueta (Tag) nenhuma, ambas as etiquetas - de início e de fim - são obrigatórias
Elementos pai permitidos qualquer elemento que receba conteúdo flutuante
Interface DOM HTMLUListElement

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.

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

Note: 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

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

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

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