Definición destacada
¿Como funciona el comando en HTML5: 'main'?
Última modificación: 2024-06-17
La etiqueta <main> en HTML5
La 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:
Atributos de la etiqueta <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:
- Atributos Globales:
- class: Define una o más clases a las cuales pertenece el
<main>, lo que permite aplicar estilos CSS específicos. - id: Asigna un identificador único al elemento
<main>, lo esencial para la manipulación mediante JavaScript y CSS. - style: Permite agregar declarativas de CSS directas para el elemento.
- title: Proporciona información adicional como una sugerencia que aparece al poner el cursor sobre el elemento.
- tabindex: Define el orden de tabulación del elemento.
- *aria- attributes**: Usado para mejorar la accesibilidad, por ejemplo
role,aria-label, etc.
- class: Define una o más clases a las cuales pertenece el
La lista de atributos globales include muchos, pero estos son algunos de los más comúnmente utilizados con la etiqueta <main>.
Restricciones de <main>
- No debe ser un descendiente de elementos como
<article>,<aside>,<footer>,<header>, o<nav>. - Solo debe haber un elemento
<main>por documento.
Uso del <main> en HTML5 con Ejemplos Sencillos
La 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.
Ejemplo 1: Estructura Básica de una Página
<!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>Ejemplo 2: Página con Más Secciones
<!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>Conclusión
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.