HTML: Menú
Volvamos al ejemplo de las lecciones anteriores:
<header>
<img src="/logo.png" alt="Logo"> <!-- Logo del sitio -->
<div id="menu"> <!-- Menú -->
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contacts">Contactos</a></li>
</ul>
</div>
</header>
En este ejemplo, el menú del sitio está marcado con una etiqueta <div> con el identificador menu. Como se sabe, esta designación funciona para los desarrolladores, pero no para los navegadores. Ellos no entienden que esto es un menú y no solo un contenedor para una lista.
Para crear un menú completo, se utiliza la etiqueta de pareja <nav>, cuya tarea es marcar el área de la página con el menú principal. Además, varios dispositivos de lectura de pantalla utilizados por personas con discapacidad visual también utilizan esta etiqueta para determinar si se debe mostrar en la página.
Reemplacemos <div id="menu"></div> con la etiqueta <nav> aprendida:
<header>
<img src="/logo.png" alt="Logo"> <!-- Logo del sitio -->
<nav> <!-- Menú -->
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contacts">Contactos</a></li>
</ul>
</nav>
</header>
El elemento nav, al igual que header, no es único para la página. Se puede utilizar para cualquier menú en la página, pero hay algunas recomendaciones:
- No es necesario envolver cada menú en un elemento
nav. Por lo general, solo se especifican los menús principales en esta área. Los menús adicionales, como el menú del pie de página, no se envuelven en la etiqueta<nav>, aunque esto no está prohibido. - Un buen ejemplo de uso adicional de
naves la navegación dentro de la página actual. navpuede contener no solo enlaces, sino también texto que contiene enlaces. Use el sentido común. Si la navegación es principal para la página o para todo el sitio, envuélvela en la etiqueta<nav>.
Tarea
Crea la estructura de la "cabecera" del sitio. Coloca una imagen y un menú dentro de ella. Utiliza la etiqueta <nav> y una lista con viñetas.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.
Consejos útiles
Envuelve en una etiqueta de navegación solo los menús principales del sitio o de una página específica. Los menús adicionales no necesitan estar envueltos en la etiqueta
<nav>.La navegación puede estar en cualquier área de la página, no solo en la cabecera del sitio.