Como criar lista ordenada HTML HTML

Ao contrário de listas não ordenadas, que são or­ga­ni­za­das por mar­ca­do­res, listas ordenadas em HTML são dispostas em sequên­cias de números ou letras. Esse tipo de lista pode ser criada pela tag <ol> e fi­na­li­zada com a tag </ol>. Seu uso facilita a com­pre­en­são de in­for­ma­ções, apri­mo­rando a estrutura e a clareza do design de um site.

O que é lista ordenada HTML?

Uma lista ordenada HTML é es­tru­tu­rada 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 cres­cen­tes (1, 2, 3…), mas podem ser per­so­na­li­za­das 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 es­pe­cí­fica. Esse tipo de lista é perfeito para com­par­ti­lhar ins­tru­ções ou qualquer outro conteúdo que exija uma sequência.

Por que listas ordenadas são im­por­tan­tes para o SEO?

Do­cu­men­tos HTML bem-es­tru­tu­ra­dos são es­sen­ci­ais para práticas de oti­mi­za­ção para me­ca­nis­mos de busca (SEO) e aces­si­bi­li­dade do site. Além das palavras-chave, da qualidade do conteúdo e das meta tags HTML, a es­tru­tu­ra­ção dos textos de forma or­ga­ni­zada e lógica auxilia os me­ca­nis­mos de busca a com­pre­en­der e avaliar seu site. Jun­ta­mente com outros elementos, como títulos, sub­tí­tu­los e textos em negrito, a lista ordenada HTML de­sem­pe­nha um papel im­por­tante na melhoria do design de um site.

Em que situações usar lista ordenada HTML?

Uma lista ordenada HTML é es­pe­ci­al­mente útil em situações nas quais é ne­ces­sá­rio organizar itens em uma sequência es­pe­cí­fica. Estes são alguns exemplos nos quais usar esse tipo de lista pode ser vantajoso:

• Ins­tru­çõ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 es­pe­cí­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 na­ve­ga­do­res 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 de­ter­mi­nar se os itens serão ordenados com números ou letras e definir um valor inicial es­pe­cí­fico ou inverter a ordem da sua lista.

Es­pe­ci­fi­car tipo de número/letra com o atributo type

Você pode usar números arábicos ou romanos ou letra maiús­cu­las ou mi­nús­cu­las 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 cres­cen­tes (1, 2, 3…). Esse é o padrão adotado por HTML quando nenhum atributo é es­pe­ci­fi­cado.
• type=A: Letras maiús­cu­las (A, B, C…)
• type=a: Letras mi­nús­cu­las (a, b, c…)
• type=i / type=I: Numerais romanos mi­nús­cu­los (i, ii, iii…) ou maiús­cu­los (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 de­cres­cente 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 con­fi­gu­ra­ção, a lista fará uma contagem re­gres­siva, começando pelo valor mais alto.