Listas Ordenadas em HTML

O tópico de discussão é Listas HTML ordenadas. Uma lista ordenada é definida pela tag HTML <ol> . Existem dois tipos de listas ordenadas: numéricas e alfabéticas.

Listas HTML Ordenadas

Usando uma lista ordenada em HTML, os itens podem ser organizados em uma ordem específica, com números sequenciais atribuídos a cada item. Ao contrário de uma lista não ordenada, onde cada item é indicado por um marcador ou outro símbolo.

Para criar uma lista ordenada em HTML, a tag <ol> é usada para indicar o início da lista e a tag <li> é usada para identificar cada item da lista. Para gerar os números de cada item da lista, o navegador gera automaticamente os números começando com 1 e os incrementando a cada item subseqüente da lista.

O CSS permite que você personalize a aparência da lista ordenada de várias maneiras, como alterar o estilo de numeração, adicionar uma cor de fundo ou ajustar o espaçamento entre os itens da lista ordenada. Há muitas maneiras pelas quais as listas ordenadas são usadas no conteúdo da Web, como instruções passo a passo, as 10 principais listas e outros tipos de conteúdo de classificação.

Um número será atribuído a cada item na lista por padrão:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol>
<li>web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Listas Html Ordenadas - O Atributo Type

O parâmetro de tipo da tag <ol> especifica o tipo de marcador de item da lista:

Tipo Visão geral
tipo=”A” Letras maiúsculas serão usadas para numerar os itens na lista
tipo=”1″ Os itens da lista são numerados (por padrão)
tipo=”eu” Os itens da lista serão numerados em algarismos romanos maiúsculos
tipo=”a” Os itens da lista serão numerados em letras minúsculas
tipo=”i” Algarismos romanos serão usados ​​para numerar os itens da lista

Numbers:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol type="1">
<li>Web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lowercase Letters:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol type="a">
<li>Web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uppercase Letters:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol type="A">
<li>Web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lowercase Roman Numbers:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol type="i">
<li>Web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uppercase Roman Numbers:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol type="I">
<li>Web 3.0</li>
<li>Blockchain</li>
<li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Contagem da lista de controle

Uma lista ordenada conta a partir de 1 por padrão. Você pode usar o atributo start se quiser começar a contar a partir de um número especificado , como:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<ol start="50">
<li>Web 3.0</li>
<li>Blockchain</li><li>Meta</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Listas HTML invertidas

O atributo invertido é um atributo booleano.

Especifica que a ordem da lista deve ser descendente (9,8,7…) em vez de ascendente (1, 2, 3…).

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>List Reversed</title>
<style>
</style>
</head>
<body>
<p>An ordered list reversed</p>
<ol reversed>
<li>Hot Tea</li>
<li>Cold Juice</li>
<li>Cappuccino Coffee</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo de lista ordenada inversa usando a ordem alfabética:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><title>List Reversed</title><br><style><br>li{<br>list-style-type: lower-alpha;<br>}<br></style><br><br><br><p>An unordered list</p><br><ol reversed><br><li>Hot Tea</li><br><li>Cold Juice</li><br><li>Cappuccino Coffee</li><br></ol><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está a lista combinada de todos os tipos de ol :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><style><br></style><br><br><br><p>An unordered list</p><br><ol reversed><br><li>Hot Tea</li><br><li>Cold Juice</li><br><li>Cappuccino Coffee</li><br></ol><br><ol type="1"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="A"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="a"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="I"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="i"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol start="50"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Listas HTML Ordenadas Aninhadas

Existe a capacidade de aninhar listas (lista dentro de uma lista dentro de uma lista) As listas HTML são ordenadas 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>Web 3.0</li>
<li>Blockchain
<ol><li>Meta</li>
<li>quantum computing</li>
</ol></li>
<li>machine learning</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Observação: um item de lista ( <li> ) pode incluir elementos HTML adicionais, como links e fotos, bem como uma nova lista.


Listas HTML Ordenadas – Tags

Marcação Visão geral
<dt> Fornece a definição de um termo em uma lista de descrição.
<ul> Lista organizada em ordem em HTML Listas ordenadas
<li> Os itens da lista são definidos por esta propriedade
<dl> Uma lista de descrição é especificada
<ol> Listas que são ordenadas
<dd> Fornece uma lista de descrição para o termo

Visite nossa referência de tags HTML para ver uma lista completa de todas as tags HTML.


Resumo do capítulo

  • Representando uma lista ordenada usando o elemento <ol> do HTML
  • Determinando o tipo de numeração com o atributo de tipo HTML
  • Para descrever um item de lista, use o elemento HTML <li>
  • Listas aninhadas são viáveis
  • Elementos HTML podem ser incluídos em itens de lista
Para se conectar às informações técnicas mais recentes deste site, assine nosso boletim informativo abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone