La etiqueta <nav> se utiliza para declarar la sección de navegación en documentos HTML. Los sitios web suelen tener secciones dedicadas a enlaces de navegación, lo que permite a los usuarios navegar por el sitio. Estos enlaces se pueden colocar dentro de una etiqueta de navegación. En otras palabras, el elemento nav representa una sección de la página cuyo propósito es proporcionar enlaces de navegación, ya sea en el documento actual o en otro documento. Los enlaces en el elemento de navegación pueden apuntar a otras páginas web o a diferentes secciones de la misma página web. Es un elemento semántico. Ejemplos comunes de elementos de navegación son menús, tablas, contenidos e índices.
La etiqueta de navegación está reservada para áreas de navegación primarias, como el menú principal en la parte superior de la página o sección. Un documento puede tener varios elementos de navegación, por ejemplo, la navegación del sitio y uno para la navegación dentro de la página. Los enlaces dentro de la etiqueta de navegación pueden ser códigos dentro de una lista ul o simplemente codificados como enlaces separados, sin el elemento ul. Este elemento facilita mucho la creación de un menú de navegación, crea un menú horizontal limpio de enlaces de texto y ayuda al software de lectura de pantalla a identificar correctamente las áreas de navegación principales en el documento.
Sintaxis:
<nav> Links... </nav>
Ejemplo:
html
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2> HTML nav Tag</h2> <!-- nav tag starts --> <nav> <a href="#">Home</a> | <a href="#">Interview</a> | <a href="#">Languages</a> | <a href="#">Data Structure</a> | <a href="#">Algorithm</a> </nav> <!-- nav tag ends --> </body> </html>
Producción:
Ejemplo: estilo de navegación usando CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
nav {
border: 1px;
background-color: green;
color: white;
padding: 6px;
}
a {
text-decoration: none;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML nav Tag</h2>
<!-- nav tag starts -->
<nav>
<a href=
"https://www.geeksforgeeks.org/">
Home</a> |
<a href=
"https://www.geeksforgeeks.org/company-interview-corner/">
Interview</a> |
<a href=
"https://www.geeksforgeeks.org/gate-cs-notes-gq/">
Gate</a> |
<a href=
"https://www.geeksforgeeks.org/data-structures/">
Data Structure</a> |
<a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/">
Algorithm</a>
</nav>
<!-- nav tag ends -->
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 5.0 y superior
- Borde 12 y superior
- Internet Explorer 9.0 y superior
- Mozilla 4.0 y superior
- Safari 5.0 y superior
- Ópera 11.1 y superior
Publicación traducida automáticamente
Artículo escrito por Sathwika123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA