0Pricing
HTML Academy · Aula

Listas ordenadas: ol, start, reversed e type

Criar listas numeradas e personalizar a sua sequência.

Listas ordenadas: ol, start, reversed e type é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é uma lista ordenada?

Uma lista ordenada exibe itens cuja sequência é importante:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

O elemento ol

Por padrão, o elemento <ol> (lista ordenada) exibe os itens com números sequenciais:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

O atributo start

O atributo start define o número inicial:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

O atributo reversed

O atributo reversed faz a contagem regressiva:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

O atributo type

O atributo type altera o estilo do marcador:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type em CSS versus HTML

Prefira CSS list-style-type ao atributo HTML type:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

Atributo value em li

Substitua o número de itens individuais da lista usando value:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

ol e ul aninhados

As listas podem ser aninhadas — combine listas ordenadas e não ordenadas:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Casos de uso semânticos

Use <ol> quando a ordem for significativa:

  • Instruções passo a passo
  • Resultados classificados (listas dos 10 primeiros)
  • Seções de documentos jurídicos
  • Etapas de receitas
  • Sumário com seções numeradas

Redefinição de contadores em CSS

Os contadores CSS oferecem controle total sobre o estilo da numeração das listas:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol para trilhas de navegação

A navegação por trilhas é semanticamente uma lista ordenada:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Verificação rápida

Qual atributo faz um ol contar para trás?

Recapitulação: listas ordenadas

Fundamentos das listas ordenadas:

  • <ol> — lista sequencial na qual a ordem importa
  • start — inicia a numeração em um número personalizado
  • reversed — faz a contagem regressiva
  • type — altera o marcador: 1, a, A, i, I
  • value em <li> — substitui o número de um item individual
  • Use CSS list-style-type e contadores para obter mais controle

Perguntas Frequentes

A aula “Listas ordenadas: ol, start, reversed e type” é grátis?

Sim — o texto completo de “Listas ordenadas: ol, start, reversed e type” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Listas ordenadas: ol, start, reversed e type”?

Criar listas numeradas e personalizar a sua sequência. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Listas ordenadas: ol, start, reversed e type”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Listas não ordenadas: ul e li
  2. Listas ordenadas: ol, start, reversed e type
  3. Listas de descrição: dl, dt e dd
  4. Listas aninhadas e estilos de listas
← Voltar para HTML Academy