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!
Top comments (0)