# 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:

```html
<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:

[![Imagem: Exemplo de lista ordenada HTML](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/e/0/csm_lista-ordenada-html_0398781458.webp "Exemplo de lista ordenada HTML")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/lista-ordenada-html.png) Uma lista HTML ordenada por números, começando pelo 1  Dica Em outro artigo, analisamos de perto como as listas ordenadas funcionam e quais possibilidades elas oferecem.

### 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:

```html
<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:

[![Imagem: Exemplo de lista não ordenada HTML](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/3/1/csm_lista-nao-ordenada-html_ccbc91ec3c.webp "Exemplo de lista não ordenada HTML")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/lista-nao-ordenada-html.png) Por padrão, listas não ordenadas são geradas com marcadores, mas você pode adicionar outras instruções para alterar seu formato  Dica Veja mais informações sobre [listas não ordenadas](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/ul-html-lista-nao-ordenada-html/) em outro artigo no nosso Digital Guide.

### 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**:

```html
<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>
```

[![Imagem: Exemplo de lista de descrição HTML](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/3/3/csm_lista-de-descricao-html_d2f8ef0dbf.webp "Exemplo de lista de descrição HTML")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/lista-de-descricao-html.png) Esse é um exemplo de lista de descrição que apresenta os termos seguidos por suas definições ## 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:

<table>
  <thead>
    <tr>
      <th>Lista ordenada</th>
      <th>Lista não ordenada</th>
      <th>Lista de descrição</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Instruções passo a passo</td>
      <td>Lista de vantagens e desvantagens</td>
      <td>Glossário</td>
    </tr>
    <tr>
      <td>Tutorial</td>
      <td>Menu suspenso ou contextual</td>
      <td>Página de perguntas frequentes (FAQ)</td>
    </tr>
    <tr>
      <td>Ranking</td>
      <td>Coleção de links</td>
      <td>Lista de produtos</td>
    </tr>
    <tr>
      <td>Comparação</td>
      <td>Fontes e referências</td>
      <td>Categorias</td>
    </tr>
  </tbody>
</table>

## 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

Dica Confira nosso tutorial de HTML para iniciantes e aprenda o essencial para dar os primeiros passos no mundo dessa linguagem de marcação.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/lista-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/lista-html/) for AI/LLM consumption.