El elemento <main> es un contenedor que sirve para encerrar los temas centrales de todo el documento HTML o de una sección. Esto significa que representa todo el contenido que no está encerrado dentro de un <header>, <footer>, <nav>, <aside> y cualquier otro elemento secundario.
El contenido de un elemento <main> debe ser único, por tanto, debe excluir cualquier contenido que se repita a través de un conjunto de documentos, por ejemplo el logo del sitio web, barras laterales, menús de navegación, etc.
El elemento <main> resulta de gran ayuda para aquellas personas con discapacidades visuales que acceden a la web por medio de lectores de pantalla, debido a que gracias a este elemento los navegadores pueden ir directamente al contenido principal del documento, dejando de lado la información no relevante.
El siguiente ejemplo muestra una estructura de un documento HTML, en donde al elemento main encierra a los contenidos esenciales.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Elephantidae</title>
</head>
<body>
<header>
<nav>
<a href="index.php">Inicio</a>
<a href="/articulos.html">Artículos</a>
<a href="/contacto.php">Contáctanos</a>
</nav>
</header>
<main>
<h1>Elefantes o elefántidos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus qui est libero eum enim fuga aspernatur non, tenetur temporibus quae laudantium iste dicta nesciunt eveniet eaque praesentium? Architecto, maiores?</p>
<p>Lorem ipsum dolor sit amet. Natus explicabo nesciunt quo obcaecati ducimus quae quaerat nulla, quas inventore maiores excepturi provident deserunt dicta, modi autem aperiam sequi tempora maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae sit quam aliquid accusantium laborum incidunt odio obcaecati ea quos quas optio iure, natus voluptatum, veniam cumque inventore nulla quasi aut.</p>
<h2>Géneros actuales</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quibusdam et laborum aut est consequatur sapiente temporibus accusamus id ab minus dolores, cumque suscipit, quaerat ea iure a eos officia!</p>
<ul>
<li>Elefantes africanos (Loxodonta).</li>
<ul>
<li>Loxodonta africana - elefante africano de sabana o matorral.</li>
<li>Loxodonta cyclotis - elefante africano de la selva.</li>
</ul>
<li>Elefantes asiáticos (Elephas)</li>
<li>Elephas maximus.</li>
</ul>
<h2>Características y comportamiento de las especies actuales</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem id facere explicabo atque nisi, vero debitis quibusdam tenetur ut fuga natus, nostrum iure, adipisci dolorem nobis asperiores, velit voluptatibus? Eveniet.</p>
</main>
<footer>
<p>© Todos los derechos reservados.</p>
</footer>
</body>
</html>El elemento <main> solo puede tener como elemento padre a los elementos <html>, <body>, <div> y <form>, y no tiene atributos específicos, sino aquellos que son comúnes a todos los elementos.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
