Listas HTML
Em HTML, existem três tipos principais de listas: não ordenadas, ordenadas e de descrição. Cada uma é definida com tags diferentes
Em HTML, existem três tipos de listas: não ordenadas, ordenadas e de descrição. Cada uma é definida com tags diferentes. Veja a seguir.
Listas Não Ordenadas em HTML
Usamos listas não ordenadas para agrupar itens que não possuem ordem numérica. Ao alterar a ordem dos itens da lista, o significado não muda. Para criar uma lista não ordenada, usamos a tag <ul>. Essa tag vem em pares; o conteúdo é escrito entre as tags de abertura <ul> e fechamento </ul>.
Cada elemento de uma lista não ordenada é declarado dentro da tag <li>.
Exemplo da tag HTML <ul> para criar uma lista não ordenada:
Um exemplo de lista não ordenada|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Os itens em listas não ordenadas são marcados com marcadores (pequenos círculos pretos) por padrão. O antigo atributo type (type="circle", type="square") podia alterar o estilo do marcador, mas está obsoleto no HTML5. Use a propriedade CSS list-style-type — é a forma moderna e suportada de controlar marcadores tanto em listas não ordenadas quanto em ordenadas. O mapa completo de migração dos valores antigos do type para CSS está na seção de listas ordenadas abaixo.
Exemplo da tag HTML <ul> para criar uma lista não ordenada com itens marcados com marcadores:
Exemplo do atributo type para listas HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Resultado
Você também pode usar a propriedade CSS list-style-type ou list-style-image para especificar o tipo de elemento de item de lista.
Exemplo da tag HTML <ul> usada com a propriedade CSS list-style-type para criar uma lista não ordenada:
Exemplo da propriedade list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Listas Ordenadas em HTML
A lista ordenada em HTML é usada para listar itens marcados com números. Ela começa com a tag <ol>. Essa tag vem em pares; o conteúdo é escrito entre as tags de abertura <ol> e fechamento </ol>.
Cada item da lista ordenada começa com a tag de abertura <li> e termina com a tag de fechamento </li>.
Exemplo da tag HTML <ol> para criar uma lista ordenada:
Exemplo de lista ordenada HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Os itens de uma lista ordenada são marcados com números por padrão. Para numerá-los com letras ou algarismos romanos, a forma antiga era adicionar type="a" ou type="I" à tag <ol>. Esse atributo type ainda funciona nos navegadores, mas está obsoleto no HTML5; portanto, prefira a propriedade CSS list-style-type em código novo.
Migrando o atributo type obsoleto para CSS
Cada valor antigo de type corresponde diretamente a um valor CSS de list-style-type:
| Atributo obsoleto | CSS equivalente | Exemplo de saída |
|---|---|---|
type="1" | list-style-type: decimal; | 1, 2, 3 |
type="A" | list-style-type: upper-alpha; | A, B, C |
type="a" | list-style-type: lower-alpha; | a, b, c |
type="I" | list-style-type: upper-roman; | I, II, III |
type="i" | list-style-type: lower-roman; | i, ii, iii |
O primeiro exemplo abaixo usa o atributo type obsoleto para que você possa ver todos os estilos de marcador de uma vez; em código de produção, defina o valor equivalente de list-style-type da tabela.
Exemplo da tag HTML <ol> para criar uma lista ordenada com letras e algarismos romanos:
Exemplo de diferentes marcações de itens de lista
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>Listas de Descrição em HTML
As listas de descrição em HTML são usadas para associar termos às suas descrições, de forma semelhante a um dicionário ou glossário.
Para criar uma lista de descrição, usamos a tag <dl>. Essa tag vem em pares.
Dentro de <dl>, usamos as tags <dt> para um termo/nome na lista de descrição e <dd> para a descrição de um termo/nome na lista de descrição.
Exemplo da tag HTML <dl> para criar uma lista de descrição:
Exemplo de lista de descrição|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Resultado
Quando usar <dl> em vez de um <ul> de pares
Use uma lista de descrição quando seus dados forem genuinamente um conjunto de pares nome/valor (termo/definição): entradas de glossário, metadados chave-valor (autor, data de publicação, categoria), pares de pergunta/resposta de FAQ ou diálogos. O elemento <dl> torna esse relacionamento explícito na marcação, o que tecnologias assistivas podem comunicar.
Se seus itens forem apenas uma sequência simples sem estrutura em pares, um simples <ul> é a escolha certa. Não simule a associação chave/valor alternando itens <li> dentro de um <ul> — isso perde a associação semântica entre o termo e sua descrição.
Um único <dt> pode ser seguido de vários elementos <dd> (um termo, várias descrições), e vários elementos <dt> podem compartilhar um único <dd> (vários termos com a mesma definição). Ambos são válidos:
<dl>
<dt>Coffee</dt>
<dt>Espresso</dt>
<dd>A hot caffeinated drink.</dd>
<dt>Water</dt>
<dd>A drink with no calories.</dd>
<dd>Also used for cooking and cleaning.</dd>
</dl>Uso incorreto comum: o <dl> já foi usado de forma indevida apenas pelo seu recuo padrão. Nunca o use apenas para recuo visual — use margin/padding do CSS para isso. Use <dl> somente quando o conteúdo for genuinamente dados de termo/descrição. Consulte as páginas dedicadas de <dl>, <dt> e <dd> para mais detalhes.
Listas Aninhadas em HTML
Uma lista aninhada contém uma lista dentro de outra lista.
Exemplo de lista aninhada em HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>A lista aninhada deve ser colocada dentro de um elemento <li>, e não diretamente entre os itens <li> do pai — um <ul>/<ol> não é um filho direto válido de outro <ul>/<ol>.
Você pode misturar tipos de lista: uma lista ordenada pode ser aninhada dentro de uma lista não ordenada, e vice-versa. Os navegadores automaticamente recuam cada nível aninhado (via o padding esquerdo padrão em <ul>/<ol>) para que a hierarquia seja lida com clareza.
Exemplo de lista aninhada mista (lista ordenada dentro de uma lista não ordenada):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul>
<li>Fruit</li>
<li>
Drinks, in order of preference:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ol>
</li>
<li>Bread</li>
</ul>
</body>
</html>Controle de Contagem de Listas
Por padrão, uma lista ordenada numera seus itens a partir de 1. Três atributos permitem substituir esse comportamento:
start(em<ol>) — o número a partir do qual a lista começa a contar.reversed(em<ol>) — conta de forma decrescente em vez de crescente.value(em um<li>específico) — define manualmente o número daquele item; os itens seguintes continuam a partir dele.
Usando start para continuar uma lista entre seções
O atributo start é mais útil quando uma única lista lógica é dividida por títulos, imagens ou parágrafos. Por exemplo, se a primeira seção termina na etapa 39, você continua as etapas na segunda seção com <ol start="40"> para que a numeração permaneça correta após a quebra.
Exemplo de lista HTML contando a partir de um número especificado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>Continuing a procedure whose first section ended at step 39.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Exemplo de reversed e value:
O atributo reversed numera a lista de maior para menor — útil para contagens regressivas ou rankings "top N" exibidos do pior para o melhor. O atributo value em um único <li> salta a contagem para um número específico, e os itens seguintes continuam a partir dele.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A reversed list (countdown)</h2>
<ol reversed>
<li>Bronze medal</li>
<li>Silver medal</li>
<li>Gold medal</li>
</ol>
<h2>Setting an item's number with value</h2>
<ol>
<li>First</li>
<li value="5">Jumps to 5</li>
<li>Continues at 6</li>
</ol>
</body>
</html>A lista invertida acima renderiza como 3. Bronze medal, 2. Silver medal, 1. Gold medal. Na segunda lista, o segundo item é forçado para 5, portanto o terceiro item mostra 6.
Acessibilidade de Listas HTML
As listas transmitem significado para tecnologias assistivas, não apenas estilo visual. Quando um leitor de tela chega a um <ul>, <ol> ou <dl>, ele anuncia o papel da lista e geralmente o número de itens (por exemplo, "lista, 3 itens"), depois anuncia a posição de cada item. Esse contexto ajuda os usuários que não conseguem ver os marcadores ou números a entender a estrutura, portanto escolher o tipo correto de lista também é uma decisão de acessibilidade.
Algumas diretrizes práticas:
- Remover marcadores pode remover a semântica da lista. No Safari com VoiceOver, aplicar
list-style: none(comum para menus de navegação e listas com estilo personalizado) pode fazer o navegador descartar o papel implícito de lista, de modo que ela não seja mais anunciada como tal. Para preservar a semântica, adicione umrole="list"explícito:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>- Envolva listas de navegação em
<nav>. Um menu de site é convencionalmente uma lista de links dentro de um<nav>. O<nav>expõe um ponto de referência de navegação para o qual usuários de leitores de tela podem pular, enquanto o<ul>interno mantém os itens agrupados e contados.
<nav aria-label="Main">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>- Use
<ol>quando a ordem for significativa (etapas, classificações, instruções) e<ul>quando não for — leitores de tela anunciam as posições de listas ordenadas, portanto a distinção é transmitida aos usuários, não apenas exibida visualmente.
Lista Horizontal com CSS
As listas HTML podem ser estilizadas de muitas maneiras diferentes com CSS.
Você pode estilizar listas HTML usando diferentes propriedades CSS. Por exemplo, pode criar um menu de navegação definindo list-style-type: none para remover os marcadores e display: flex para dispor os itens em uma linha.
As cores abaixo são escritas como valores hexadecimais literais para manter o exemplo independente; em um projeto real, você normalmente faria referência às variáveis de cor do seu sistema de design (propriedades personalizadas do CSS) em vez de codificar valores hexadecimais diretamente.
Exemplo de lista horizontal com CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>