HTML: Contenido único de la página
Cada página HTML contiene contenido único que solo se encuentra en esa página. Esta área se marca con la etiqueta de apertura y cierre <main>. Esto ayuda a los dispositivos de asistencia y a los motores de búsqueda a comprender rápidamente dónde se encuentra el contenido principal en la página.
Tomemos el encabezado del sitio que creamos y agreguemos un área con contenido único:
<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>
<main>
<!-- Contenido principal de la página. Puede ser un artículo, una descripción de un servicio, datos en la página, contactos, un formulario de pedido de servicio, etc. -->
</main>
El elemento main es único para cada página. Esto refleja su propósito semántico: marcar el contenido único. Al envolver el contenido en main, es importante no incluir áreas no únicas:
- Menú lateral
- Navegación general del sitio
- Encabezado y pie de página general del sitio
- Logo
Coloca en main solo contenido de texto o gráfico. Es fácil encontrar este contenido en las plantillas, ya que no se duplica en otras páginas.
Dentro del elemento main pueden haber áreas de navegación, encabezados, secciones y otros elementos que se estudiarán en este módulo.
Tarea
Crea el encabezado del sitio. Consiste en 2 elementos:
- Logo
- Sección de navegación. Dentro de ella, una lista con dos elementos
Agrega la sección <main>. Dentro de ella, inserta contenido arbitrario.
¿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
main es una sección única que se utiliza solo una vez en toda la página
Para encontrar fácilmente el área que debe estar en
main, intenta eliminar mentalmente todas las áreas que están en todas las páginas. Estas son las áreas que no deben estar dentro demain