Marca <ul> em HTML

O objetivo deste artigo é explorar a Tag <ul> com exemplos para satisfazer os objetivos de aprendizagem.

A tag Html <ul> significa Unordered List e destina-se a organizar itens sem uma ordem numérica, cuja ordem na lista é aleatória. Itens em listas não ordenadas geralmente são exibidos com marcadores, que podem assumir diferentes formas, como pontos , círculos e quadrados .

A tag <ul> é comumente usada para criar menus de navegação, listas de marcadores ou qualquer outra lista de itens que não requeiram uma ordem ou classificação específica

Aqui está um exemplo de uma lista HTML não ordenada de empresas de tecnologia no mundo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Apple</li>
<li>Microsoft</li>
<li>Google</li>
<li>Amazon</li>
<li>Facebook</li>
<li>Alphabet</li>
<li>IBM</li>
<li>Oracle</li>
<li>Samsung</li>
<li>Sony</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS pode ser usado para estilizar o tipo de lista da tag <ul> aqui está como:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<ul>
<li style="list-style-type: square;">Apple</li>
<li>Microsoft</li>
<li style="list-style-type: circle;">Google</li>
<li>Amazon</li>
<li style="list-style-type: disc;">Facebook</li>
<li>Alphabet</li>
<li style="list-style-type:lower-alpha;">IBM</li>
<li>Oracle</li>
<li style="list-style-type: decimal;">Samsung</li>
<li>Sony</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aplicando line-height com CSS para diferentes itens <li>:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<ul>
<li style="line-height: 50px;">Apple</li>
<li>Microsoft</li>
<li style="line-height: 40px;">Google</li>
<li>Amazon</li>
<li style="line-height: 30px;">Facebook</li>
<li>Alphabet</li>
<li style="line-height: 20px;">IBM</li>
<li>Oracle</li>
<li style="line-height: 10px;">Samsung</li>
<li>Sony</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A lista aninhada na tag <ul> pode ser criada da seguinte forma:

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
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Trending Technology
<ul>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>Cloud Computing
<ul>
<li>AWS</li>
<li>Azure</li>
<li>Google Cloud</li>
</ul>
</li>
<li>Blockchain</li>
<li>IoT</li>
<li>5G</li>
</ul>
</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Conselho: você pode estilizar listas usando CSS.

Aqui está um exemplo de uma lista não ordenada aninhada mais complexa:

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
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Trending Technology
<ul>
<li>Trending Technology
<ul>
<li>Artificial Intelligence
<ul>
<li>Natural Language Processing</li>
<li>Computer Vision</li>
<li>Robotics</li>
</ul>
</li>
<li>Machine Learning
<ul>
<li>Supervised Learning</li>
<li>Unsupervised Learning</li>
<li>Reinforcement Learning</li>
</ul>
</li>
<li>Cloud Computing
<ul>
<li>AWS
<ul>
<li>EC2</li>
<li>S3</li>
<li>Lambda</li>
</ul>
</li>
<li>Azure
<ul>
<li>Virtual Machines</li>
<li>Storage</li>
<li>Azure Functions</li>
</ul>
</li>
<li>Google Cloud
<ul>
<li>Compute Engine</li>
<li>Storage</li>
<li>App Engine</li>
</ul>
</li>
</ul>
</li>
<li>Blockchain
<ul>
<li>Bitcoin</li>
<li>Ethereum</li>
<li>Hyperledger</li>
</ul>
</li>
<li>IoT
<ul>
<li>Smart Home</li>
<li>Wearable Devices</li>
<li>Industrial IoT</li>
</ul>
</li>
<li>5G</li>
</ul>
</li>
</ul>
</li></ul></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da lista aninhada com algum CSS aplicado a ela para maiores esclarecimentos:

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
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: circle;
}
li {
color: green;
}
ul ul {
background-color: #eee;
}
li {
font-size: 18px;
}
</style>
</head>
<body>
<ul>
<li>Nature
<ul>
<li>Forests
<ul>
<li>Tropical Rainforests</li>
<li>Temperate Forests</li>
<li>Boreal Forests</li>
</ul>
</li>
<li>Mountains
<ul>
<li>Rocky Mountains</li>
<li>Himalayas</li>
<li>Andes</li>
</ul>
</li>
<li>Oceans
<ul>
<li>Atlantic Ocean</li>
<li>Pacific Ocean</li>
<li>Indian Ocean</li>
</ul>
</li>
<li>Deserts
<ul>
<li>Sahara Desert</li>
<li>Arabian Desert</li>
<li>Gobi Desert</li>
</ul>
</li>
<li>Grasslands
<ul>
<li>Prairies</li>
<li>Savannas</li>
<li>Steppes</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Conselho: Se você deseja criar listas ordenadas, use a tag <ol>.


Usos de tag ul

A Tag Ul representa uma lista em ordem não ordenada (marcada).

Coloque a tag <ul> em conjunto com a tag <li> para criar uma lista não ordenada.

A seguir estão alguns dos principais usos da tag <ul> :

  • A tag <ul> é frequentemente usada em combinação com a tag <li>, que define cada item da lista.
  • Por padrão, os itens em uma lista não ordenada são exibidos como marcadores, mas isso pode ser alterado usando CSS.
  • A tag <ul> também pode ser usada para criar listas aninhadas, onde uma lista está contida em outra lista.
  • A tag <ul> é uma tag semântica, o que significa que fornece significado e contexto ao conteúdo da página.
  • O uso de tags semânticas como <ul> é importante para acessibilidade e otimização de mecanismos de busca.

Atributos

Global

A Tag <ul> inclui os Atributos Globais em HTML.

Evento

A tag Ul <ul> também lida com os atributos de evento em HTML.


Compatibilidade do navegador

Elemento
<ul> Sim Sim Sim Sim Sim

CSS predefinido

Sempre que se trata de Tag ul <ul> , muitos navegadores irão renderizar a tag <ul> com estes valores padrão:

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

Benefícios do HTML Tag Ul

A tag <ul> em HTML tem vários benefícios, incluindo:

  • A tag <ul> é uma tag HTML simples e direta, facilitando o uso e a compreensão dos iniciantes.
  • A tag <ul> cria uma lista estruturada de itens, tornando mais fácil para os usuários entender e navegar pelo conteúdo da página.
  • A tag <ul> é uma tag semântica, o que significa que fornece significado e contexto ao conteúdo da página. Isso é importante para acessibilidade e otimização de mecanismo de pesquisa.
  • A aparência das listas não ordenadas criadas com a tag <ul> pode ser personalizada usando CSS, proporcionando flexibilidade no design da página.
  • A tag <ul> pode ser usada para criar menus de navegação, listas de marcadores ou qualquer outra lista de itens que não requeira uma ordem ou classificação específica.
  • A tag <ul > é uma tag HTML amplamente suportada, o que significa que funcionará na maioria dos navegadores modernos.
Se este artigo em algum lugar atendeu aos seus requisitos educacionais, compartilhe essas informações significativas com seus amigos também clicando nos links 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