HTML <ul> Tag
A tag HTML <ul> define uma lista não ordenada. Aprenda sua sintaxe, aninhamento e estilização com CSS.
A tag HTML <ul> é usada para especificar uma lista não ordenada, que agrupa uma coleção de itens sem ordem numérica. Ao alterar a ordem dos itens da lista, o significado não muda. Normalmente, os itens de uma lista não ordenada são exibidos com um marcador. Este marcador pode ter diferentes formas, como um círculo, um ponto ou um quadrado.
Cada elemento de uma lista não ordenada é declarado dentro da tag <li>.
A tag <ul> é um elemento de bloco e ocupa todo o espaço horizontal disponível. Sua altura depende do conteúdo dentro do contêiner. Uma lista não ordenada é tipicamente renderizada como uma lista com marcadores.
A tag <ol> também representa uma lista de itens e cria uma lista ordenada. Porém, ela difere de <ul>, pois a ordem na tag <ol> é significativa. Por padrão, os itens de uma lista ordenada são exibidos com números.
As tags <ul> e <ol> podem ser aninhadas com a profundidade que você desejar. As listas aninhadas podem alternar entre <ul> e <ol>. No entanto, considere que, ao aninhar uma lista dentro de outra, a lista interna deve ser colocada dentro de um elemento <li> da lista externa. Isso significa que o filho direto de uma lista deve ser um elemento <li>, mas esse elemento <li> pode conter outra lista. É possível alterar o marcador do item de lista com CSS. No entanto, o significado semântico expresso pela escolha de um tipo de lista não pode ser alterado com CSS.
Sintaxe
A tag <ul> vem em pares. O conteúdo é escrito entre as tags de abertura (<ul>) e fechamento (</ul>).
Exemplo da tag HTML <ul>:
Exemplo da tag HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Listas aninhadas
As listas são frequentemente aninhadas para expressar hierarquia — por exemplo, um menu com subitens. Para aninhar uma lista, coloque o <ul> interno dentro de um <li> da lista externa, e não diretamente dentro do <ul> externo. O filho direto de um <ul> deve ser sempre um <li>.
Exemplo de um <ul> aninhado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>Os navegadores alteram automaticamente o marcador em cada nível de aninhamento (disco, depois círculo, depois quadrado), tornando a hierarquia fácil de ler.
Estilizando a lista com CSS
Os atributos históricos type e compact são obsoletos no HTML5 — não os utilize. A maneira moderna e semântica de alterar o marcador é a propriedade CSS list-style-type (ou list-style-image para uma imagem personalizada). Manter o marcador no CSS separa a apresentação da estrutura: a lista ainda significa "lista não ordenada" independentemente de como você a estilize.
Exemplo de <ul> estilizado com a propriedade CSS list-style-type:
Exemplo da tag HTML <ul> com a propriedade CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Menus de navegação
O uso mais comum de <ul> no mundo real é um menu de navegação. Envolver a lista em um elemento <nav> a marca como um ponto de referência de navegação, e a lista ainda comunica "esses itens formam um grupo" para tecnologias assistivas. Os marcadores geralmente são removidos com CSS.
Exemplo de um menu de navegação criado com <nav> e <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Acessibilidade
Leitores de tela tratam um <ul> como uma lista: eles anunciam que uma lista está começando, informam o número de itens que ela contém (por exemplo, "lista, 3 itens") e leem cada item em ordem. Essa contagem de itens é um contexto útil para usuários sem visão, portanto, prefira a marcação real <ul>/<li> a uma pilha de elementos <div> estilizados.
Há um ponto importante a considerar. No Safari com VoiceOver, aplicar list-style: none (como você normalmente faz para menus de navegação) remove a semântica de lista — o VoiceOver não a anuncia mais como uma lista. Se o papel de lista for importante nesse contexto, restaure-o explicitamente:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Atributos
A tag <ul> não possui atributos específicos do elemento no padrão HTML atual. (Os antigos atributos type e compact são obsoletos — use CSS em vez disso.) Ela suporta apenas os Atributos Globais e os Atributos de Evento.
Tags e tópicos relacionados
<li>— define cada item da lista.<ol>— cria uma lista ordenada (numerada).- Listas HTML — visão geral de todos os tipos de lista em HTML.
- CSS
list-style-type— controla o marcador de lista.