<main> en HTML5La etiqueta <main> es una de las muchas introducidas en HTML5 para mejorar la estructura semántica de las páginas web. Esta etiqueta tiene un propósito muy específico y crucial: contener el contenido principal de un documento. Aquí está una descripción detallada:
<main>La etiqueta <main> en sí es bastante simple y posee muy pocos atributos. No obstante, hereda todos los atributos globales estándar que pueden ser aplicados a elementos HTML. A continuación se describen estos atributos:
<main>, lo que permite aplicar estilos CSS específicos.<main>, lo esencial para la manipulación mediante JavaScript y CSS.role, aria-label, etc.La lista de atributos globales include muchos, pero estos son algunos de los más comúnmente utilizados con la etiqueta <main>.
<main><article>, <aside>, <footer>, <header>, o <nav>.<main> por documento.<main> en HTML5 con Ejemplos SencillosLa etiqueta <main> se utiliza para encapsular el contenido más relevante de un documento HTML. Es útil para la organización semántica y para la accesibilidad, ya que algunas tecnologías asistivas como lectores de pantalla pueden utilizar esta estructura para saltar al contenido principal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de uso de <main></title>
<style>
main {
padding: 20px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#about">Sobre Nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<main>
<h2>Bienvenido a nuestra página</h2>
<p>Esta es la sección principal donde encontrarás la información más relevante.</p>
</main>
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página Completa</title>
<style>
main {
margin: 20px;
padding: 20px;
background-color: #e7f7fe;
}
</style>
</head>
<body>
<header>
<h1>Blog de Tecnología</h1>
</header>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>Título del Artículo</h2>
<time datetime="2023-10-01">1 de Octubre, 2023</time>
</header>
<p>Contenido del artículo. Aquí encontrarás información valiosa sobre tecnología...</p>
</article>
<section>
<h2>Comentarios</h2>
<p>Comparte tu opinión y comenta la noticia.</p>
</section>
</main>
<aside>
<h2>Publicidad</h2>
<p>Esta sección podría contener publicidad o enlaces patrocinados.</p>
</aside>
<footer>
<p>© 2023 Blog de Tecnología</p>
</footer>
</body>
</html>La etiqueta <main> en HTML5 sirve para encapsular el contenido principal de una página web, proporcionando una estructura más clara y mejorando la accesibilidad. Es un componente esencial para cualquier página HTML5 y, aunque simple en atributos, su semántica y estructura son invaluables para el diseño web moderno.