HTML: ul, ol e details/summary

Listas aparecem o tempo todo em páginas web: menus, listas de tarefas, ingredientes, etapas de um processo e muito mais.

Em HTML, existem dois tipos principais de listas: ordenadas e não ordenadas.

Lista não ordenada

Usamos <ul> quando a ordem dos itens não importa. Cada item é criado com <li>.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

O navegador exibe os itens com marcadores:

• HTML
• CSS
• JavaScript

Lista ordenada

Já a <ol> é usada quando a sequência dos itens importa. Os números são adicionados automaticamente pelo navegador.

<ol>
  <li>Estudar HTML</li>
  <li>Estudar CSS</li>
  <li>Praticar</li>
</ol>

O resultado será:

1. Estudar HTML
2. Estudar CSS
3. Praticar

Conteúdo que pode ser expandido

Existe também uma combinação interessante de elementos: <details> e <summary>.

Eles permitem criar uma área que o usuário pode abrir e fechar, sem precisar de JavaScript. É uma opção útil para FAQs, explicações e conteúdos complementares.

<details>
  <summary>O que é HTML?</summary>
  <p>É a linguagem de marcação usada para estruturar páginas web.</p>
</details>

Na prática, o resultado fica assim:

Com isso, já dá para organizar diferentes tipos de conteúdo usando HTML: ul para listas sem uma ordem específica, ol quando a sequência importa e details/summary para conteúdos que podem ser expandidos.

São elementos simples, mas muito úteis para deixar as informações de uma página mais organizadas e fáceis de entender.