El elemento nav es un contenedor para enlaces de navegación, que permiten de acceder a las secciones de un sitio web, así como a documentos externos.
El elemento <nav> mejora la semántica de un sitio web, pues ayuda a los navegadores y a los motores de búsqueda a entender que los enlaces dentro de esta etiqueta están relacionados con la navegación. Además, este elemento puede ser de gran utilidad para las tecnologías de asistencia a proporcionar una mejor experiencia al usuario, permitiendo que los asistentes de navegación identifiquen rápidamente las áreas de navegación en una página.
Estructura básica del elemento <nav>
El elemento <nav> puede incluir varios tipos de elementos, pero comúnmente se usa con listas desordenadas (<ul> o <ol>) y elementos de lista <li> que contienen enlaces <a>. Aquí tienes un ejemplo básico:
<header>
<h1>Mi Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="services.html">Servicios</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>
<main>
<h2>Bienvenido a mi sitio web</h2>
<p>Este es un ejemplo de cómo utilizar el elemento nav en HTML.</p>
</main>
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>Buenas prácticas
Utiliza el elemento <nav> únicamente para enlaces de navegación. Si hay enlaces que no están relacionados con la navegación principal, no deben estar dentro de este elemento.
No es requerido que los enlaces que habitualmente se encuentran al final de un documento HTML (contacto, trabaja con nosotros, información legal, etc.) pertenezcan a un elemento nav. El elemento footer en sí mismo es suficiente en estos casos.
Evita múltiples menús de navegación: En general, se recomienda tener una o dos secciones <nav> en una página para evitar confusiones sobre cuál es la principal.
Si utilizas tecnologías de asistencia, considera agregar atributos ARIA para mejorar la accesibilidad. Por ejemplo, aria-label puede ser útil para describir la función de la barra de navegación.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
