HTML5 - listas ordenadas, de marcadores e de definição e detalhes expansíveis
Tags: webdev, beginners, html
Published: 2023-09-19 14:36:39

Neste artigo, aprenderemos sobre **listas** (ordenadas, com marcadores, de definição) e **detalhes** que podem ser expandidos em HTML.

As listas são muito úteis, não apenas para listas comuns (de marcadores ou numeradas) em textos, mas também em um menu de navegação, lista de cartões ou outros conjuntos de elementos.

## Lista Ordenada

Para criar listas ordenadas, como as do Microsoft Word ou outros editores de texto, podemos usar o elemento `ol` com elementos `li`. O elemento `ol` marca uma lista ordenada, e o elemento `li` marca os itens da lista.

Abaixo, você pode ver um trecho de código:

```html
<ol>
    <li>Interestelar</li>
    <li>O Grande Truque</li>
    <li>Efeito Borboleta</li>
</ol>
```

O resultado do trecho de código é:

![Lista ordenada renderizada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbnhdw9frum5f1kg9xob.png)

## Lista com Marcadores

Outro tipo comum de lista é a Lista com Marcadores ou Lista de Marcadores, que pode ser criada usando o elemento `ul` com elementos `li`, de maneira semelhante à Lista Ordenada. Esse tipo de lista é frequentemente usado para criar menus de navegação.

Abaixo, você pode ver um trecho de código:

```html
<nav>
    <ul>
        <li>Início</li>
        <li>Projetos</li>
        <li>Contato</li>
     </ul>
</nav>
```

O resultado do trecho de código é:

![Lista com marcadores renderizada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1cjm9j6p9pirszxcvep.png)

## Lista de Definição

Em algumas wikis, relatórios e documentos acadêmicos, é comum ter termos e suas definições. Para fazer isso, você deve usar uma lista de definição com os elementos `dl` (lista de definição), `dt` (termo de definição) e `dd` (descrição de definição). O elemento `dl` marca uma lista de definição, e para cada combinação de termo e descrição, usamos `dt` e `dd`.

Abaixo, você pode ver um trecho de código:

```html
<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação</dd>
  <dt>CSS</dt>
  <dd>Linguagem de estilo</dd>
  <dt>JavaScript</dt>
  <dd>Linguagem de programação web</dd>
</dl>
```

O resultado do trecho de código é:

![Lista de definição renderizada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx8sbarpgxj6906phkjn.png)

## Detalhes

Um elemento incrível é o `detalhes`. Este elemento cria um bloco recolhível com um título e descrição. É ideal para Perguntas Frequentes, onde o usuário pode clicar na pergunta para ver a resposta.

Este elemento utiliza três elementos: `detalhes` para marcar o bloco, o elemento `summary` para o título do detalhe e qualquer elemento, como `p`, para a descrição do detalhe.

Abaixo, você pode ver um trecho de código:

```html
<details>
    <summary>Qual é o grau acadêmico de Arthur?</summary>
    <p>Mestrado em Ciência da Computação.</p>
</details>
```

O resultado do trecho de código é:

![Detalhes renderizados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acmplt5pcfyeed2s6cq2.png)

E, se você clicar no texto "Qual é o grau acadêmico de Arthur?", a descrição aparecerá. Você pode ver este resultado na próxima imagem:

![Detalhes renderizados e abertos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90jal1k288frbyh1c4y3.png)

Mas é possível iniciar o elemento de detalhes aberto; basta adicionar o atributo `open`, como no exemplo abaixo.

```html
<details open>
    <summary>Quais tecnologias Arthur tem experiência?</summary>
    <p>ReactJS, NextJS, TypeScript/JavaScript, React Native, Jest, React Testing Library, Python.</p>
</details>
```

O resultado do trecho de código é:

![Detalhes renderizados iniciados abertos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2sipdl5jaw91rvzi7hk.png)

## O Que Vem a Seguir

Nos próximos artigos, você vai se aprofundar em **tabelas**. Fique ligado!