3.1 Etiqueta <main>
HTML5 introdujo un montón de nuevos elementos semánticos que ayudan a los desarrolladores a crear páginas web más estructuradas
y comprensibles. Entre ellos, destacan las etiquetas <main> y <aside>,
que se utilizan para crear contenedores para contenido principal y adicional, respectivamente.
La etiqueta <main> representa el contenido principal del documento. Se utiliza para colocar contenido único y clave para
la página en cuestión. El contenido dentro de la etiqueta <main> debe ser único para cada
página y no contener elementos que se repitan en todas las páginas, tales como logotipos, barras laterales, enlaces de navegación o pies de página.
Sintaxis:
<main>
<!-- Contenido principal de la página -->
</main>
Ejemplo de uso:
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Características principales:
- Contenido: la etiqueta
<main>debe contener el contenido principal de la página, que es único para esa página - Ubicación: solo debe haber una etiqueta
<main>en la página - Accesibilidad: la etiqueta
<main>mejora la accesibilidad de la página, ayudando a las tecnologías asistivas (como los programas de lectura de pantalla) a encontrar el contenido principal más rápidamente
Aplicación:
- Contenido principal de la página
- Contenido único relacionado con la página actual
Ventajas:
- Marcado semántico: ayuda a los motores de búsqueda y tecnologías asistivas a entender qué es el contenido principal de la página
- Mejora de la estructura de la página: separa claramente el contenido principal de otras partes de la página, como encabezados, barras laterales y pies de página
Particularidades:
- Debe contener contenido único para la página
- No debe incluir elementos que se repiten en otras páginas (por ejemplo, barras de navegación, barras laterales, pies de página)
3.2 Etiqueta <aside>
La etiqueta <aside> se utiliza para indicar contenido adicional, que está relacionado con el contenido principal, pero no
forma parte del flujo principal del documento. Generalmente se utiliza para barras laterales, que contienen publicidad, enlaces
a artículos relacionados, biografías de autores y otros elementos auxiliares.
Sintaxis:
<aside>
<!-- Contenido adicional -->
</aside>
Ejemplo de uso:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Características principales:
- Contenido: la etiqueta
<aside>contiene información adicional, relacionada con el contenido principal, pero no forma parte del flujo principal del documento. - Ubicación: puede colocarse dentro o fuera de la etiqueta
<main>, dependiendo del contexto. - Aplicación: se utiliza para barras laterales, bloques de publicidad, enlaces a artículos relacionados y otra información auxiliar.
Aplicación:
- Barras laterales con información adicional
- Bloques de publicidad
- Enlaces a recursos relacionados
- Materiales adicionales relacionados con el contenido principal
Ventajas:
- Marcado semántico: ayuda a los motores de búsqueda y tecnologías asistivas a entender que este contenido es auxiliar en relación con el contenido principal
- Mejora de la estructura de la página: separa claramente el contenido adicional del principal, haciendo que la página esté más organizada y sea más fácil de entender
Particularidades:
- Contiene contenido que está relacionado con el principal, pero no es parte de él
- Puede usarse para barras laterales, bloques de publicidad, suscripciones y otros materiales adicionales
GO TO FULL VERSION