Como criar lista HTML: Tags , e

Com uma lista HTML (HTML list), você consegue apre­sen­tar in­for­ma­ções em um formato es­tru­tu­rado e claro. De acordo com as suas ne­ces­si­da­des, é 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 in­for­ma­ções e elementos em um formato de lista es­tru­tu­rado e fácil de ler. A in­tro­du­çã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 es­tru­tu­ra­dos e vi­su­al­mente atrativos. Ela ajuda a garantir a co­mu­ni­ca­ção clara e rápida das in­for­ma­ções. In­de­pen­den­te­mente se você deseja listar itens, com­par­ti­lhar um tutorial passo a passo ou apre­sen­tar de­fi­ni­ções de­ta­lha­das, as listas auxiliam na or­ga­ni­za­çã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, co­nhe­ce­re­mos mais de perto os di­fe­ren­tes tipos de listas HTML e suas res­pec­ti­vas sintaxes.

Listas ordenadas

Uma lista HTML ordenada é composta por itens dispostos em uma ordem se­quen­cial de números ou letras. Para criar uma lista ordenada, use as tags HTML <ol> e </ol>. Entre as tags de abertura e fe­cha­mento, use múltiplas tags <li>…</li> para listar os di­fe­ren­tes itens. Listas ordenadas são uma ótima opção para exibir rankings, ins­tru­ções passo a passo e sequên­cias 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 or­ga­ni­za­dos por números ou letras. Em vez disso, mar­ca­do­res ou símbolos como traços, setas e sinais de seleção são usados para separá-los. Isso pos­si­bi­lita apre­sen­tar in­for­ma­ções de um jeito es­tru­tu­rado sem ordená-las hi­e­rar­qui­ca­mente.

In­gre­di­en­tes 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 fe­cha­mento </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 se­le­ci­o­na­dos e suas de­fi­ni­ções/des­cri­ções em um formato es­tru­tu­rado. Esse tipo de lista HTML é es­pe­ci­al­mente útil para glos­sá­rios, listas de produtos e páginas de perguntas fre­quen­tes (FAQ). Para criar uma lista de definição, você precisa usar três com­po­nen­tes:

• <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 di­fe­ren­tes tipos de listas HTML:

Por que usar lista HTML?

O uso de uma lista HTML aumenta a efi­ci­ên­cia e a or­ga­ni­za­ção da apre­sen­ta­ção de conteúdos e in­for­ma­ções em seu site. Alguns dos be­ne­fí­cios pro­por­ci­o­na­dos por uma lista incluem:

• Melhora a estrutura, clareza e or­ga­ni­za­ção das in­for­ma­ções
• Maior variedade e clas­si­fi­ca­ção melhorada nos me­ca­nis­mos de busca devido aos diversos elementos nas páginas
• Aces­si­bi­li­dade otimizada e le­gi­bi­li­dade melhorada com a es­tru­tu­ra­ção semântica clara das páginas
• Apre­sen­ta­ção visual per­so­na­li­zada do conteúdo, es­pe­ci­al­mente quando combinada com estilos CSS