Etiqueta HTML <nav>
La etiqueta <nav> es un elemento HTML5 utilizado para definir una sección de enlaces de navegación dentro de una página web. Esta etiqueta ayuda tanto con la estructura como con la semántica de la página, haciéndola más accesible para usuarios y motores de búsqueda por igual. El elemento <nav> puede usarse para agrupar los enlaces de navegación principales, como enlaces a diferentes secciones o páginas de un sitio web.
La <nav> tag es uno de los elementos HTML5. Se utiliza para especificar un bloque de enlaces de navegación, ya sea dentro del documento actual o hacia otros documentos. Ejemplos de bloques de navegación son tablas de contenido, menús e índices.
Un documento HTML puede contener varias etiquetas <nav>, por ejemplo, una para la navegación del sitio y otra para la navegación intra-página.
Ten en cuenta que no todos los enlaces en el documento HTML se colocan dentro del elemento <nav>; este incluye bloques de navegación principales. La etiqueta <nav> puede colocarse para definir enlaces en el pie de página del sitio web, pero generalmente se usa la etiqueta <footer> en tales casos.
peligro
La etiqueta
<nav>no puede anidarse dentro del elemento<address>.
Sintaxis
La etiqueta <nav> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<nav>) y cierre (</nav>).
Ejemplo de uso de la etiqueta HTML <nav>:
Ejemplo de la etiqueta HTML nav
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> |
<a href="/learn-css.html">CSS</a> |
<a href="/learn-javascript.html">JavaScript</a> |
<a href="/learn-php.html">PHP</a>
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>Ejemplo de la etiqueta <nav>:
Ejemplo de la etiqueta HTML nav
<!DOCTYPE html>
<html>
<head>
<style>
nav {
display: flex;
flex-wrap: wrap;
}
nav a {
text-decoration: none;
display: block;
padding: 15px 25px;
text-align: center;
background-color: rgb(189, 185, 185);
color: #464141;
margin: 0;
font-family: sans-serif;
}
nav a:hover {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.w3docs.com/">Home</a>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
<a href="https://www.w3docs.com/snippets">Snippets</a>
<a href="https://www.w3docs.com/tool/">Tools</a>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</nav>
</body>
</html>Ejemplo de creación de un menú desplegable usando la etiqueta HTML <nav>:
Ejemplo de la etiqueta nav al crear un menú desplegable
<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
position: relative;
list-style-type: none;
}
nav ul li:hover {
background: rgba(19, 20, 123, 0.67);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color: rgba(35, 17, 134, 0.8);
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgba(19, 20, 123, 0.67);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
<ul>
<li>
<a href="https://www.w3docs.com/quiz-start/html-basic">HTML Basics</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/css-basic">CSS Basics</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Basics</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/php-basic">PHP Basics</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz-start/es6-basic">ES6 Basics</a>
</li>
</ul>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
<ul>
<li>
<a href="https://www.w3docs.com/snippets/angularjs.html">Angular JS</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/apache.html">Apache</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/git.html">Git</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/linux.html">Linux</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/nodejs.html">Node.Js</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets/symfony.html">Symfony</a>
</li>
</ul>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
<ul>
<li>
<a href="https://www.w3docs.com/tools/html-encoder/">HTML ENCODER/DECODER</a>
</li>
<li>
<a href="https://www.w3docs.com/css3-maker/border-radius">CSS MAKER</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/password-generator">PASSWORD GENERATOR</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/image-base64">Base 64</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/code-diff/">CODE DIFF</a>
</li>
</ul>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
<ul>
<li>
<a href="https://www.w3docs.com/tools/string-revers">STRING REVERSE</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/string-word-count">STRING WORD COUNT</a>
</li>
<li>
<a href="https://www.w3docs.com/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>Atributos
La etiqueta <nav> admite los Atributos Globales y los Atributos de Evento.. Ten en cuenta que los atributos globales se aplican a todos los elementos HTML.
Cómo dar estilo a una etiqueta HTML <nav>
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 15px;
}