--- title:
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
{{ cssxref("list-style-type") }}.
Não há nenhuma limitação para a profundidade e a imbricação das listas definidas com os elementos
{{ HTMLElement("ol") }}
e
{{ HTMLElement("ul") }}.
{{ HTMLElement("ol") }}
e
{{ HTMLElement("ul") }}
representam uma lista de itens. São diferentes porque, com o elemento
{{ HTMLElement("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
{{ HTMLElement("ol") }}
deve ser utilizado mas, se não houver mudança, você pode aplicar
{{ HTMLElement("ul") }}.Categorias de conteúdo | Flutuantes |
Conteúdo permitido | zero ou mais {{ HTMLElement("li") }} elementos, eventualmente combinados com {{ HTMLElement("ol") }} e elementos {{ HTMLElement("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 | {{domxref("HTMLUListElement")}} |
Este elemento inclui os atributos globais.
{{ HTMLElement("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%.círculo
,disco
,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
{{ cssxref("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.
{{ cssxref("list-style-type") }}.<ul> <li>primeiro item</li> <li>segundo item</li> <li>terceiro item</li> </ul>
A HTML acima resulta em:
<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, é:
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á:
{{ HTMLElement("li") }},
{{ HTMLElement("menu") }}
e o obsoleto
{{ HTMLElement("dir") }};
{{ htmlattrxref("compact", "ul") }},{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}
{{ HTMLRef }}