Tag HTML <ol>
A tag HTML <ol> cria uma lista ordenada. Aprenda seus atributos (type, start, reversed) e a propriedade CSS list-style-type com exemplos.
A tag HTML <ol> é usada para criar uma lista ordenada, que contém elementos em uma determinada sequência.
Cada elemento da lista ordenada começa com a tag de abertura <li> e termina com a tag de fechamento </li>. Além do texto, a tag <li> pode incluir outros elementos HTML (listas, imagens, cabeçalhos, parágrafos, etc.).
Em geral, os itens de uma lista ordenada possuem um marcador precedente, como uma letra ou número.
O atributo type seleciona o tipo de marcador utilizado. Os valores possíveis são:
type="1"— números arábicos (1, 2, 3, ...). Este é o padrão.type="A"— letras latinas maiúsculas (A, B, C, ...).type="a"— letras latinas minúsculas (a, b, c, ...).type="I"— algarismos romanos maiúsculos (I, II, III, ...).type="i"— algarismos romanos minúsculos (i, ii, iii, ...).
Se você não especificar o atributo type, o conteúdo da tag <ol> será numerado com números arábicos, começando pelo um.
O atributo type é apresentacional — ele controla como a lista aparece, não o seu significado. A abordagem moderna e recomendada é definir o marcador em CSS com a propriedade list-style-type, mantendo a estilização fora da marcação. Os equivalentes em CSS são: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Tanto a tag <ol> quanto a tag <ul> representam uma lista de itens. No entanto, há uma diferença: com a tag <ol>, a ordem é significativa.
Normalmente, as tags <ol> e <ul> podem ser aninhadas com a profundidade necessária, alternando entre elas conforme desejado.
Se as propriedades CSS forem aplicadas à tag <ol>, os elementos aninhados na tag <li> as herdam.
Sintaxe
A tag <ol> vem em pares. O conteúdo é escrito entre as tags de abertura (<ol>) e fechamento (</ol>).
Exemplo da tag HTML <ol>:
Exemplo de lista ordenada com a tag HTML <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>No exemplo acima, utilizamos o atributo start com o valor "50".
Em vez de definir o marcador na marcação com o atributo type, defina-o em CSS com a propriedade list-style-type. Isso mantém a apresentação na sua folha de estilos e permite reutilizar a regra em muitas listas. No exemplo abaixo, o marcador é definido em um bloco <style> em vez de um atributo style= inline:
Exemplo da tag HTML <ol> usada com a propriedade CSS list-style-type:
Exemplo da tag HTML <ol> com a propriedade list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>O atributo reversed
Adicionar o atributo boolean reversed numera a lista em ordem decrescente. É útil para contagens regressivas do tipo "top 5" ou qualquer lista onde o último item deve ter o menor número. Você pode combiná-lo com start para controlar o número mais alto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Os marcadores acima contam de forma decrescente: 3, 2, 1.
Aninhando listas ordenadas
Um item de lista pode conter outro <ol>, permitindo criar estruturas de tópicos e sub-etapas. Cada lista aninhada reinicia sua própria numeração. Coloque o <ol> aninhado dentro do <li> pai (não entre itens de lista) para que a estrutura permaneça válida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| compact | compact | Indicava que a lista deveria ser renderizada de forma mais compacta, com menos espaçamento entre os itens. Obsoleto e não suportado em HTML5. Para reduzir o espaçamento, use as propriedades CSS margin e padding nos elementos <li> (ou <ol>). |
| reversed | reversed | Indica que os elementos da lista devem estar em ordem decrescente (em vez da ordem crescente habitual). |
| start | number | Define o número a partir do qual a lista ordenada começa. O valor deve ser um número inteiro; valores negativos podem ser usados. Quando usado com letras (type="A" e type="a"), o número indica a posição ordinal da letra no alfabeto. Por exemplo, start="5" corresponde à letra "E", então a lista começa com ela. Se start="27" for especificado, a lista passa a ter dois dígitos (27 = "AA", 28 = "AB", 29 = "AC", ...). |
| type | 1, A, a, I, i | Define o tipo de marcador da lista (números decimais, letras maiúsculas, letras minúsculas, algarismos romanos maiúsculos, algarismos romanos minúsculos). |
A tag <ol> suporta os Atributos Globais e os Atributos de Evento.
Tags e propriedades relacionadas
<ul>— uma lista não ordenada (com marcadores), quando a ordem não é relevante.<li>— o item de lista usado dentro de<ol>e<ul>.list-style-type— a propriedade CSS para escolher o estilo do marcador.
Como estilizar uma tag HTML <ol>
{
"tag_name": "ol"
}