Listas HTML

Vamos dar uma olhada nas listas HTML neste artigo. Nossa discussão abordará os diferentes tipos de listas, sua sintaxe e algumas práticas recomendadas para usá-las.

Com listas HTML , os desenvolvedores da web podem organizar itens relacionados em grupos.

O termo <lista> é usado para descrever a coleção de itens curtos de dados relacionados, ou pode ser usado para descrever a exibição de dados ou informações em uma página da Web de maneira ordenada ou desordenada. Suponha que você precise comprar itens e preparar uma lista que pode ser ordenada ou não. Isso facilitará a organização dos dados e também facilitará a localização do que você procura

Exemplo

Lista HTML que não está ordenada:

  • Item 1
  • Item2
  • Item3
  • Item4

Uma lista HTML formatada corretamente:

  1. Item número 1
  2. Item Número 2
  3. Item Número 3
  4. Item número 4
Índice-

Lista HTML Ordenada

As listas ordenadas começam com a tag <ol> . Um item de lista é identificado por uma tag <li> quando se trata de listas HTML .

Os números serão exibidos por padrão nos itens da lista:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Hot Tea</li>
<li>Cold Juice</li>
<li>Cappuccino Coffee</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lista HTML não ordenada

Uma lista de itens não ordenados começa com uma tag <ul> . Os itens da lista são divididos por uma tag <li> quando se trata de listas HTML .

Por padrão, os itens da lista serão mantidos com marcadores (pequenos círculos pretos):

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><ul><br><br><li>Hot Tea</li><br><li>Cold Juice</li><br><br><li>Cappuccino Coffee</li><br></ul><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Listas de descrição HTML

Uma lista de descrição também pode ser adicionada ao HTML . Há uma descrição para cada termo em uma lista de descrição em listas HTML .

Uma lista de descrição é especificada pela tag <dl> , o nome de um termo é determinado pela tag <dt> e a descrição é determinada pela tag <dd> :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Hot Tea</dt>
<dd>- Cappuccino cold Cofee</dd>
<dt>Mango Juice</dt>
<dd>- black cold drink</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lista Aninhada HTML

Listas aninhadas são listas dentro de outras listas. Sempre que você quiser ter uma lista com marcadores dentro de uma lista numerada, esse tipo de lista será referido como uma lista aninhada no que diz respeito às listas HTML .

Aqui está um exemplo da lista aninhada:

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
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Famous Men with their companies</p>
<ol>
<li>Bill Gates
<ul>
<li>Microsoft</li>
</ul>
</li>
<li>Warren Buffett
<ul>
<li>Berkshire Hathaway</li>
</ul>
</li>
<li>Jeff Bezos
<ul>
<li>Amazon</li>
</ul>
</li>
<li>Mark Zuckerberg
<ul>
<li>Facebook</li>
</ul>
</li>
<li>Larry Page
<ul>
<li>Google</li>
</ul>
</li>
<li>Larry Ellison
<ul>
<li>Oracle</li></ul>
</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilização de Lista de Ordem HTML

A lista HTML Odered também pode ser estilizada usando as propriedades CSS nela. Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>List with styling</title>
<style>
li{
list-style-type: upper-roman;
color: green;
}
</style>
</head>
<body>
<p>An unordered list</p>
<ol>
<li>Hot Tea</li>
<li>Cold Juice</li>
<li>Cappuccino Coffee</li>
</ol>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilização de lista HTML não codificada

A lista HTML não codificada também pode ser estilizada usando as propriedades CSS nela. Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>List with styling</title>
<style>
li{
list-style-type: square;
color: red;
}
</style>
</head>
<body>
<p>An unordered list</p>
<ul>
<li>Hot Tea</li>
<li>Cold Juice</li>
<li>Cappuccino Coffee</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marcas de Lista HTML

<dd> Define o termo em uma lista de descrição

Marcação Visão geral
<dt> Representa um termo em uma lista de descrição
<ol> Uma lista ordenada é especificada.
<ul> Uma lista de itens não ordenados
<dl> Cria uma lista de descrições
<li> Os itens da lista são definidos por esta propriedade

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

Benefícios do uso de listas HTML

O uso de listas HTML tem alguns benefícios, incluindo:

  • Legibilidade aprimorada: as listas organizam as informações em um formato claro e estruturado, o que facilita a leitura. Dessa forma, os usuários não precisam gastar muito tempo lendo longos parágrafos de texto para encontrar as informações de que precisam.
  • Estrutura Semântica: Seu conteúdo é estruturado semanticamente com listas HTML. Você pode indicar relacionamentos entre itens em uma lista usando o tipo de lista apropriado, como etapas, opções ou definições.
  • Acessibilidade: os usuários que usam tecnologias assistivas, como leitores de tela, se beneficiarão das listas HTML. É mais fácil para usuários com deficiência visual navegar e entender o conteúdo com a ajuda de leitores de tela que podem reconhecer e anunciar os itens da lista.
  • Personalização: você pode personalizar listas usando CSS para combinar com o design do seu site. O estilo de marcador, o estilo de numeração, o espaçamento e o recuo do seu site podem ser alterados.
  • Benefícios de SEO: ao fornecer aos mecanismos de pesquisa conteúdo significativo para indexar, listas estruturadas adequadamente podem melhorar a classificação do mecanismo de pesquisa do seu site. Ao fazer isso, você pode aumentar a visibilidade do seu site nos resultados de pesquisa, ajudando-o a ter uma classificação mais alta nos mecanismos de pesquisa.
Se você deseja ser notificado sobre as informações técnicas deste site, assine nossa Newsletter abaixo para fazer parte da família técnica.
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
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.