HTML5 - listas ordenadas, de marcadores e de definição e detalhes expansíveis

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:

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

O resultado do trecho de código é:

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:

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

O resultado do trecho de código é:

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:

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

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:

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

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:

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

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

O Que Vem a Seguir

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