Listas

Listas ordenadas

Listas ordenadas usam sequências para indicar ordem. Logo, elas devem ser usadas em listas onde a ordem importa. Se a ordem dos itens da lista não for importante, use listas não-ordenadas. Listas ordenadas são criadas usando a tag <ol>. Os itens da lista são criados com a tag <li>. Veja um exemplo de lista ordenada:

<ol>
  <li>Pelados em Santos</li>
  <li>Vira-Vira</li>
  <li>Mundo Animal</li>
</ol>

Você pode alterar a posição do primeiro item da lista com o atributo start. Esse atributo sempre aceita apenas um valor inteiro, mesmo se a lista usar números romanos ou letras.

<ol start="3">
  <li>Pelados em Santos</li>
  <li>Vira-Vira</li>
  <li>Mundo Animal</li>
</ol>

Você pode usar o atributo reversed para colocar a lista em ordem decrescente. Isso é muito útil para episódios de podcast.

<ol reversed>
  <li>Pelados em Santos</li>
  <li>Vira-Vira</li>
  <li>Mundo Animal</li>
</ol>

Use o atributo type para mudar o tipo do marcador dos itens da lista. Você pode usar os seguintes valores: 1 (números decimais), a (letras minúsculas), A (letras maiúsculas), i (números romanos minúsculos) e I (números romanos maiúsculos).

<ol reversed type="I">
  <li>Pelados em Santos</li>
  <li>Vira-Vira</li>
  <li>Mundo Animal</li>
</ol>

Listas não-ordenadas

Listas não-ordenadas são usadas para marcar listas onde a ordem dos itens não importa. Essas listas usam símbolos como marcadores dos itens da lista, como um círculo ou um quadrado. Essas listas são criadas com a tag <ul>. Os itens da lista são criados com a tag <li>. Os tipos dos marcadores são definidos usando CSS. Veja um exemplo de uma lista de compras marcada como lista não-ordenada:

<ul>
  <li>Batata</li>
  <li>Presunto</li>
  <li>Maçã</li>
  <li>Pão</li>
</ul>

Aninhamento

O aninhamento pode ser feito tanto entre listas do mesmo tipo, como também entre listas de tipos diferentes. O exemplo abaixo mostra o aninhamento entre listas do mesmo tipo:

<ul>
  <li>Legumes</li>
    <ul>
      <li>Batata</li>
      <li>Cenoura</li>
    </ul>
  </li>
  <li>Massas</li>
    <ul>
      <li>Pão</li>
      <li>Macarrão</li>
      <li>Pizza</li>
    </ul>
  </li>
</ul>

Listas de descrição

Listas de descrição são criadas para marcar termos e suas definições, ou ainda perguntas e respostas. Listas desse tipo são marcadas com a tag <dl>. Os itens dessa lista são marcados com os elementos <dt> (marca o nome do termo) e <dd> (marca a definição do termo). Exemplo:

<dl>
  <dt>Termo A</dt>
  <dd>Definição</dd>
  <dt>Termo B</dt>
  <dd>Definição</dd>
</ul>

Um grupo de termo/definição pode ter mais de um termo ou mais de uma definição. Isso faz sentido, porque um termo pode ter mais de uma definição (por ter vários significados em diversas áreas) e podem haver dois termos que tem a mesma definição por serem sinônimos. Exemplo:

<dl>
  <dt>Termo A</dt>
  <dd>Definição 1</dd>
  <dd>Definição 2</dd>
  <dt>Termo B</dt>
  <dt>Termo C</dt>
  <dd>Definição</dd>
</ul>