fbpx

HTML main

Con la etiqueta HTML <main> puedes describir el contenido principal del cuerpo de un documento. Lo que tenga relación directa con el tema principal de la página. Es por esa razón que sólo la debes colocar una vez.

Igualmente, puede ser la funcionalidad principal de una aplicación web. Esta etiqueta HTML le da accesibilidad a los lectores de pantalla para ir directamente al contenido.

Descripción

La etiqueta <main> en HTML tiene como principal función contener los temas principales de una sección o documento. Su sintaxis es sencilla <main> y </main>, son las etiquetas de inicio y fin respectivamente, siendo ambas obligatorias en el código. Esta etiqueta se inserta a partir de la versión HTML5. Sólo puedes utilizar una etiqueta por página.

Los únicos elementos que puede tener como antepasados la etiqueta <main> en HTML son <html>, <body>, <div> y <form>.

Su principal función es mejorar la accesibilidad. La etiqueta HTML <main> es muy útil para las aplicaciones especiales desarrolladas para personas con discapacidades, tales como navegadores de voz, ya que pueden ir directamente al tema principal del documento.

Todavía no tiene compatibilidad completa en todos los motores de búsqueda, actualmente sólo Firefox y Chrome tienen el soporte. Para el resto de los buscadores debes utilizar un script, el archivo HTML5 shiv, con el cual das la solución correspondiente.

Otra opción que puedes utilizar cuando tu navegador no es compatible con <main> es añadir lo siguiente: main {display : block;}.

Ejemplo de uso

Para tener una noción del uso de la etiqueta <main> en HTML5, el siguiente ejemplo te puede orientar:

<main>
	<article>
		<h1>Artículo 1</h1>
		<p>Subtítulo 1</p>
	</article>
	<article>
		<h1>Artículo 2</h1>
		<p>Subtítulo 2</p>
	</article>
</main>

Otro ejemplo que puede ayudarte en el uso de la etiqueta <main> en HTML en un navegador incompatible es el siguiente:

<body>
	<header>
		<div id=”logo”>El logo</div>
		<nav>…</nav>
	</header>
	<main role=”main”>
		<section id=”productos”>
		<h1>Nuestros Productos</h1>
		<p>Aquí encontrarás los productos que vendemos.</p>
		<article id=”estrella”>
			<h2>Producto Estrella</h2>
			<p>…</p>
		</article>
		<article id=”barato”>
			<h2>Producto barato</h2>
			<p>…</p>
		</article>
		</section>
	</main>
	<footer>…</footer>
</body>

Atributos

Los atributos globales son los que utiliza esta etiqueta HTML <main>, los cuales son comunes para todos los elementos.



Share This