Como criar lista ordenada HTML HTML

Ao contrário de listas não ordenadas, que são organizadas por marcadores, listas ordenadas em HTML são dispostas em sequências de números ou letras. Esse tipo de lista pode ser criada pela tag <ol> e finalizada com a tag </ol>. Seu uso facilita a compreensão de informações, aprimorando a estrutura e a clareza do design de um site.

O que é lista ordenada HTML?

Uma lista ordenada HTML é estruturada e numerada. Ela pode ser criada pela tag <ol> em HTML, tendo cada item que ser disposto entre tags <li>. Por padrão, listas ordenadas são criadas com números crescentes (1, 2, 3…), mas podem ser personalizadas para exibir letras ou números romanos.

Uma lista ordenada HTML segue uma sequência lógica definida. Ao contrário do que ocorre nas listas não ordenadas, os itens são exibidos em uma ordem específica. Esse tipo de lista é perfeito para compartilhar instruções ou qualquer outro conteúdo que exija uma sequência.

Por que listas ordenadas são importantes para o SEO?

Documentos HTML bem-estruturados são essenciais para práticas de otimização para mecanismos de busca (SEO) e acessibilidade do site. Além das palavras-chave, da qualidade do conteúdo e das meta tags HTML, a estruturação dos textos de forma organizada e lógica auxilia os mecanismos de busca a compreender e avaliar seu site. Juntamente com outros elementos, como títulos, subtítulos e textos em negrito, a lista ordenada HTML desempenha um papel importante na melhoria do design de um site.

Em que situações usar lista ordenada HTML?

Uma lista ordenada HTML é especialmente útil em situações nas quais é necessário organizar itens em uma sequência específica. Estes são alguns exemplos nos quais usar esse tipo de lista pode ser vantajoso:

• Instruções passo a passo (por exemplo, receitas) ou tutoriais
• Rankings e listas (por exemplo, listas top 10)
• Processos ou fluxos de trabalho que seguem uma ordem específica

Qual é a sintaxe de uma lista ordenada HTML?

Para criar uma lista ordenada HTML, você precisa usar as seguintes tags HTML:

• <ol>: Sinaliza o início de uma lista ordenada
• </ol>: Sinaliza o fim da lista
• <li>: Inicia cada item da lista
• </li>: Finaliza cada item da lista

Veja um exemplo de lista ordenada HTML:

<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
<li>…</li>
</ol>

Por padrão, a maioria dos navegadores exibe a lista com números em ordem crescente (1, 2, 3…).

Como alterar estilo de numeração de lista ordenada HTML?

Se você deseja alterar o valor inicial ou o tipo de numeração da sua lista, recorra a atributos HTML. Com eles, é possível determinar se os itens serão ordenados com números ou letras e definir um valor inicial específico ou inverter a ordem da sua lista.

Especificar tipo de número/letra com o atributo type

Você pode usar números arábicos ou romanos ou letra maiúsculas ou minúsculas para criar uma lista ordenada HTML. Para escolher o estilo usado, adicione o atributo type à tag <ol>:

<ol type="X">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>

Substitua X pelo tipo de numeração que você deseja usar:

• type=1: Numerais arábicos crescentes (1, 2, 3…). Esse é o padrão adotado por HTML quando nenhum atributo é especificado.
• type=A: Letras maiúsculas (A, B, C…)
• type=a: Letras minúsculas (a, b, c…)
• type=i / type=I: Numerais romanos minúsculos (i, ii, iii…) ou maiúsculos (I, II, III…)

Definir valor inicial com o atributo start

Se você quiser iniciar sua lista com um número ou letra diferente de “1” ou “A”, defina o valor desejado usando o atributo start:

<ol start="X">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>

Substitua X pelo valor com o qual você deseja iniciar a lista. Por exemplo, este seria o código usado se a lista começasse com o número 5:

<ol start="5">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>

Inverter ordem da lista com o atributo reversed

Se você quiser que a numeração da lista siga a ordem decrescente ao invés da crescente, use o atributo reversed. Esta é sua sintaxe:

<ol start="1" reversed>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>

Com essa configuração, a lista fará uma contagem regressiva, começando pelo valor mais alto.