Tag HTML <nav>
Nesta postagem, examinaremos a navegação por tags HTML usando exemplos na esperança de que atendam aos seus requisitos de aprendizado.
A tag HTML <nav> é usada para definir uma seção de uma página da Web que contém links de navegação.
Características principais
Aqui estão alguns dos principais recursos da tag <nav> :
- A tag <nav> foi projetada para ser acessível a leitores de tela e outras tecnologias assistivas. Ao usar a tag <nav> para definir os links de navegação, os desenvolvedores podem garantir que os usuários com deficiências possam navegar facilmente no site.
- A tag <nav> fornece marcação semântica para links de navegação, tornando mais fácil para os mecanismos de pesquisa e outras ferramentas automatizadas entender a estrutura da página da web.
- A tag <nav> pode ser estilizada usando CSS para personalizar a aparência dos links de navegação. Isso permite que os desenvolvedores criem um design visual consistente e coeso para o site.
- A tag <nav> é suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Uma coleção de links para navegação é a seguinte:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
href="/python/"Python |
href="/java/"Java |
href="/flutter/"Flutter |
href="/c#/"C-Sharp |
href="/linux/"Linux |
href="/ruby/"Ruby
Aqui está um exemplo da tag <nav> em uma lista:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
href="/python/"Python
href="/java/"Java
href="/flutter/"Flutter
href="/c#/"C-Sharp
href="/linux/"Linux
href="/ruby/"Ruby
Você pode estilizar sua barra de navegação da seguinte maneira:
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>
nav {
background-color: #333;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #555;
color: #eee;
}
href="/python/"Python
href="/java/"Java
href="/flutter/"Flutter
href="/c#/"C-Sharp
href="/linux/"Linux
href="/ruby/"Ruby
Uma barra de navegação atraente é suficiente para atrair a atração do usuário para o seu site. Como :
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
<!DOCTYPE html>
lang="en"
charset="UTF-8"
http-equiv="X-UA-Compatible" content="IE=edge"
name="viewport" content="width=device-width, initial-scale=1.0"
Dynamic Navigation
nav {
margin: 27px auto 0;
position: relative;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 100px;
}
a:nth-child(4) {
width: 160px;
}
a:nth-child(5) {
width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
width: 100px;
left: 210px;
background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
width: 160px;
left: 310px;
background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
width: 120px;
left: 470px;
background-color: #e67e22;
}
body {
font-size: 12px;
font-family: sans-serif;
background: #2c3e50;
}
h1 {
text-align: center;
margin: 40px 0 40px;
text-align: center;
font-size: 30px;
color: #ecf0f1;
text-shadow: 2px 2px 4px #000000;
font-family: 'Cherry Swash', cursive;
}
p {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ecf0f1;
font-family: 'Cherry Swash',cursive;
font-size: 16px;
}
span {
color: #2BD6B4;
}
HTML Navigation With CSS
href="#"Home
href="#"About
href="#"Blog
href="#"Portefolio
href="#"Contact
class="animation start-home"
By Mr Examples
Índice-
Usos e Definição
A tag nav <nav> especifica um conjunto de links para navegar em um site.
Um elemento <nav> não é necessário para todos os links de documentos. A Tag <nav> só deve ser empregada para grandes grupos de links para outras partes da navegação do site.
Os navegadores podem usar esse elemento para determinar se devem pular a apresentação inicial desse conteúdo para usuários com deficiências.
Importância da Marca de Navegação HTML
A tag HTML <nav> é um elemento importante para estruturar as seções de navegação de uma página da web. Aqui estão alguns dos principais motivos pelos quais a tag <nav> é importante:
- A tag <nav> foi projetada para melhorar a acessibilidade dos links de navegação para usuários com deficiências, como usuários de leitores de tela. Ao usar a tag <nav> para definir os links de navegação, você pode garantir que os usuários com deficiências possam navegar facilmente no site.
- A tag <nav> fornece marcação semântica para links de navegação, tornando mais fácil para os mecanismos de pesquisa e outras ferramentas automatizadas entender a estrutura da página da web. Isso pode melhorar a otimização do mecanismo de busca (SEO) do site.
- Ao usar a tag <nav> consistentemente em todo o site, você pode criar uma experiência de usuário consistente e previsível para os usuários. Isso pode melhorar a usabilidade e facilidade de uso do site.
- A tag <nav> pode ser estilizada usando CSS para personalizar a aparência dos links de navegação. Isso permite que você crie um design visual consistente e coeso para o site.
- A tag <nav> é suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Isso garante que ele possa ser usado por uma ampla gama de usuários e dispositivos.
- Ao usar a tag <nav> para agrupar links de navegação, você pode criar um layout mais organizado e estruturado para o site. Isso pode tornar mais fácil para os usuários encontrarem o que estão procurando e pode melhorar a experiência geral do usuário.
Atributos
Global
<nav> Tags em HTML são compatíveis com Atributos Globais .
Evento
Tag <nav> em HTML são compatíveis com Atributos de Evento .
CSS predefinido
Por padrão, a maioria dos navegadores renderiza o elemento <nav> com os seguintes valores:
nav {
display: block;
}
Compatibilidade do navegador
Na tabela, os números indicam qual versão do navegador é compatível com o elemento .
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <nav> | 5,0 | 9,0 | 4.0 | 5,0 | 11.1 |
Vantagens da tag de navegação HTML
Aqui estão algumas das principais vantagens de usar a tag <nav> :
- A tag <nav> foi projetada para melhorar a acessibilidade dos links de navegação para usuários com deficiências, como usuários de leitores de tela. Ao usar a tag <nav> para definir os links de navegação, os desenvolvedores podem garantir que os usuários com deficiências possam navegar facilmente no site.
- A tag <nav> fornece marcação semântica para links de navegação, tornando mais fácil para os mecanismos de pesquisa e outras ferramentas automatizadas entender a estrutura da página da web. Isso pode melhorar a otimização do mecanismo de busca (SEO) do site.
- Ao usar a tag <nav> de forma consistente em todo o site, os desenvolvedores podem criar uma experiência de usuário consistente e previsível para os usuários. Isso pode melhorar a usabilidade e facilidade de uso do site.
- A tag <nav> pode ser estilizada usando CSS para personalizar a aparência dos links de navegação. Isso permite que os desenvolvedores criem um design visual consistente e coeso para o site.
- A tag <nav> é suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Isso garante que ele possa ser usado por uma ampla gama de usuários e dispositivos.
Se o conteúdo deste artigo fez com que você aprendesse algo único e informativo, compartilhe esse conhecimento valioso com seus entes queridos acessando os links de mídia social abaixo.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
