Tag HTML <ol>

Tag ol com exemplos é o tema do post de hoje. Com fé razoável, satisfará as demandas educacionais.

A tag HTML <ol> é usada para criar listas ordenadas em uma página da Web. Uma lista ordenada é uma lista de itens em que cada item é numerado ou com letras.

Características principais

Aqui estão alguns dos principais recursos e usos da tag <ol> :

A tag <ol> numera ou numera automaticamente os itens da lista, dependendo do tipo de estilo de lista usado.
A tag <ol> pode ser aninhada dentro de outras tags HTML, como <div>, <section> ou <article>. Isso permite a criação de listas mais complexas e estruturadas em uma página da web.
A tag <ol> oferece suporte a diferentes tipos de estilos de lista, como decimal, alfa inferior, alfa superior, romano inferior e romano superior. Esses estilos podem ser personalizados usando CSS.
A tag <ol> é acessível por leitor de tela, tornando-a uma ferramenta útil para criar conteúdo da Web acessível.
A tag <ol> é uma tag HTML semântica, o que significa que fornece informações significativas sobre o conteúdo que contém. Isso é importante para otimização de mecanismo de pesquisa e acessibilidade na web.

Aqui estão duas listas ordenadas diferentes (a primeira lista começa em um e a segunda lista começa em 75):

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
</ol>
<ol start="75">
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode criar diferentes tipos de listas usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<ol style="list-style-type:lower-alpha">
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
<li>Eggs</li>
</ol>
<ol style="list-style-type:upper-roman">
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
<li>Eggs</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS suporta os seguintes tipos de lista:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Styles</title>
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
</head>
<body>
<ol class="a">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="b">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="c">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="d">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="e">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="f">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="g">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="h">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="i">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="j">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="k">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="l">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="m">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="n">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="o">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="p">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="q">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="r">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
<ol class="s">
<li>Mr</li>
<li>Examples</li>
<li>HTML</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A altura da linha nas listas pode ser diminuída e aumentada usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ol style="line-height:90%">
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
</ol>
<ol style="line-height:150%">
<li>Cookies</li>
<li>Cake</li>
<li>Bread</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma lista ordenada pode ser aninhada dentro de uma lista ordenada da seguinte forma:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Cookies</li>
<li>Cake
<ul>
<li>Chocolate Cake/li>
</li><li>Fruit Cake</li>
</ul>
</li>
<li>Bread</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo detalhado da tag <ol>:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<body>
<ol type="1">
<li>
<h3>Step 1: Gather Materials</h3>
<p>To begin, gather all the materials you will need for the project. This includes:</p>
<ul>
<li>Paint</li>
<li>Brushes</li>
<li>Canvas</li>
<li>Palette</li>
</ul>
</li>
<li>
<h3>Step 2: Prepare Canvas</h3>
<p>Next, prepare your canvas by cleaning it and stretching it over a frame if necessary.</p>
</li>
<li>
<h3>Step 3: Sketch Outline</h3>
<p>Use a pencil to sketch the outline of your painting on the canvas.</p>
</li>
<li>
<h3>Step 4: Apply Base Coat</h3>
<p>Apply a base coat of paint to the canvas. This will serve as the foundation for the rest of the painting.</p>
</li>
<li>
<h3>Step 5: Add Layers of Color</h3>
<p>Add layers of color to the painting, using different brushes and techniques to create texture and depth.</p>
</li>
<li>
<h3>Step 6: Finish and Sign</h3>
<p>When you are satisfied with the painting, sign it and let it dry before displaying or selling it.</p>
</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Esta é a versão curta do exemplo acima com algum CSS aplicado a ele:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<style>
ol {
 list-style-type: decimal;
 padding-left: 20px;
}
li {
 margin-bottom: 10px;
}
h3 {
 color: blue;
}
</style>
</head>
<body>
<ol type="1">
<li>
<h3>Step 1: Gather Materials</h3>
<p>To begin, gather all the materials you will need for the project. This includes:</p>
<ul>
<li>Paint</li>
<li>Brushes</li>
</ul>
</li>
<li>
<h3>Step 2: Prepare Canvas</h3>
<p>Next, prepare your canvas by cleaning it and stretching it over a frame if necessary.</p>
</li>
<li>
<h3>Step 3: Sketch Outline</h3>
<p>Use a pencil to sketch the outline of your painting on the canvas.</p>
</li>
<li>
<h3>Step 4: Finish and Sign</h3>
<p>When you are satisfied with the painting, sign it and let it dry before displaying or selling it.</p>
</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <ol>:

Tag de uso

Uma lista ordenada pode ser especificada pela Tag ol <ol> . Existem dois tipos de listas ordenadas: numéricas e alfabéticas . Cada item da lista é especificado por uma tag <li> .

Conselho: As listas podem ser estilizadas usando CSS. Da mesma forma, se você deseja exibir uma lista não ordenada, insira a tag <ul> .

Marca de importância

A tag <ol> é importante em HTML, pois representa uma lista ordenada de itens. É usado para criar uma lista numerada de itens, onde a ordem dos itens na lista é importante. A tag <ol> é normalmente usada ao apresentar uma sequência de etapas ou uma série de itens em uma ordem específica.

A tag <ol> é usada em conjunto com as tags <li> (item da lista), que definem cada item da lista. A tag <ol> fornece vários atributos que permitem personalizar a exibição da lista, como o valor inicial, o tipo de numeração e se a lista é exibida horizontal ou verticalmente.

Usar a tag <ol> para criar listas ordenadas é um aspecto importante da estruturação de conteúdo em HTML. Isso ajuda a tornar o conteúdo mais legível e fácil de entender, principalmente ao apresentar instruções ou etapas em uma ordem específica.

Lista de Atributos

Atributo	Valor	Visão geral
invertido	invertido	Indica que a ordem da lista será invertida (9,8,7…)
começar	número	Fornece o valor inicial de uma lista ordenada.
tipo	1 A a eu eu	Na lista, indique o tipo de marcador a aplicar.

Atributos

Global

Também pode especificar atributos globais em HTML com a tag <ol> .

Evento

Também pode especificar atributos de eventos em HTML com a tag <ol> .

Compatibilidade do navegador

Elemento
<ol>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

Por padrão, a maioria dos navegadores renderiza o elemento <ol> com estes valores:

ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

Vantagens da Lista Ordenada

Algumas das vantagens de usar uma lista ordenada em HTML incluem:

Uma lista ordenada fornece uma maneira clara e organizada de apresentar informações aos usuários.
Uma lista ordenada é ideal para apresentar informações que tenham uma ordem sequencial, como uma receita, instruções ou uma série de etapas.
Uma lista ordenada permite indicar a prioridade de cada item numerando-os em ordem de importância.
Uma lista ordenada é fácil de ler e entender, mesmo para pessoas que não estão familiarizadas com o conteúdo.
Uma lista ordenada pode ser lida facilmente por leitores de tela e outras tecnologias assistivas, tornando seu conteúdo mais acessível para pessoas com deficiência.
Ao usar uma lista ordenada, você pode melhorar o SEO do seu site e ajudar os mecanismos de pesquisa a entender o conteúdo e o contexto de suas páginas.

Deixe sua reação abaixo para apreciar nossos esforços ou para nos fornecer algum feedback para a melhoria deste site.

Nós valorizamos o seu feedback.

Tag HTML <ol>

Características principais

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Tag de uso

Marca de importância

Lista de Atributos

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Vantagens da Lista Ordenada

Sentindo entediado?