Como criar lista HTML: Tags , e

Com uma lista HTML (HTML list), você consegue apresentar informações em um formato estruturado e claro. De acordo com as suas necessidades, é possível criar uma lista numerada, não ordenada ou de definição. As tags HTML usadas na criação desses tipos de listas são <li>, <ol>, <ul> e <dl>.

O que é lista HTML?

Lista HTML é um recurso da linguagem HTML que exibe informações e elementos em um formato de lista estruturado e fácil de ler. A introdução do HTML5 trouxe ainda uma nova opção: a lista de definição. Esse recurso adicional é perfeito para criar listas que descrevem ou definem os itens que as compõem.

A lista HTML é um elemento essencial para criar sites estruturados e visualmente atrativos. Ela ajuda a garantir a comunicação clara e rápida das informações. Independentemente se você deseja listar itens, compartilhar um tutorial passo a passo ou apresentar definições detalhadas, as listas auxiliam na organização do seu conteúdo.

Quais tipos de listas HTML existem?

A linguagem HTML permite exibir listas de diversas formas. Listas ordenadas e não ordenadas são as mais comuns, enquanto as listas de definição (também chamadas de listas de descrição) são mais raras. Nas seções a seguir, conheceremos mais de perto os diferentes tipos de listas HTML e suas respectivas sintaxes.

Listas ordenadas

Uma lista HTML ordenada é composta por itens dispostos em uma ordem sequencial de números ou letras. Para criar uma lista ordenada, use as tags HTML <ol> e </ol>. Entre as tags de abertura e fechamento, use múltiplas tags <li>…</li> para listar os diferentes itens. Listas ordenadas são uma ótima opção para exibir rankings, instruções passo a passo e sequências de perguntas.

A sintaxe de uma lista ordenada* é a seguinte:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>…</li>
</ol>

Este será o resultado:

Close

Listas não ordenadas

Em uma lista HTML não ordenada, os itens não são organizados por números ou letras. Em vez disso, marcadores ou símbolos como traços, setas e sinais de seleção são usados para separá-los. Isso possibilita apresentar informações de um jeito estruturado sem ordená-las hierarquicamente.

Ingredientes de uma receita e listas de cidades e países são algumas situações comuns nas quais uma lista não ordenada pode ser usada. Para criar uma lista não ordenada, use a tag de abertura <ul>, a tag de fechamento </ul> e diversas tags <li>…</li> entre elas.

A sintaxe de uma lista HTML não ordenada é a seguinte:

<ul>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>…</li>
</ul>

Este é o resultado:

Close

Listas de descrição

Com uma lista de descrição, você consegue organizar termos selecionados e suas definições/descrições em um formato estruturado. Esse tipo de lista HTML é especialmente útil para glossários, listas de produtos e páginas de perguntas frequentes (FAQ). Para criar uma lista de definição, você precisa usar três componentes:

• <dl>…</dl>: Indica o início e o término da lista de definição.
• <dt>…</dt>: Indica o termo que será descrito.
• <dd>…</dd>: Indica a definição ou descrição do termo escrito entre as tags <dt>. É inserida após as tags <dt>.

Você pode criar listas de definição usando a seguinte sintaxe:

<dl>
<dt>Termo 1</dt>
<dd>Descrição ou definição do Termo 1</dd>
<dt>Termo 2</dt>
<dd>Descrição ou definição do Termo 2</dd>
<dt>Termo 3</dt>
<dd>Descrição ou definição do Termo 3</dd>
<dt>…</dt>
<dd>…</dd>
</dl>

Close

Visão geral das formas de usar uma lista HTML

Veja abaixo um resumo das diversas formas nas quais você pode usar os diferentes tipos de listas HTML:

Por que usar lista HTML?

O uso de uma lista HTML aumenta a eficiência e a organização da apresentação de conteúdos e informações em seu site. Alguns dos benefícios proporcionados por uma lista incluem:

• Melhora a estrutura, clareza e organização das informações
• Maior variedade e classificação melhorada nos mecanismos de busca devido aos diversos elementos nas páginas
• Acessibilidade otimizada e legibilidade melhorada com a estruturação semântica clara das páginas
• Apresentação visual personalizada do conteúdo, especialmente quando combinada com estilos CSS