Como no es la primera vez que os doy la vara con el tema, quizá convendría que os dierais un garbeo por las entradas de cómo estructurar adecuadamente una web en HTML5 si no recordáis bien las bases que voy a mencionar por aquí.
Cuando comencé con aquellas publicaciones, os comentaba que una página web bien estructurada en HTML5, ha de constar de las siguientes partes, únicas pero repetibles:
Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>
Esto quería decir que es conveniente englobar correctamente cada apartado del contenido de nuestra web con esas etiquetas, pero que lejos de sólo poder usarlas una vez y en un orden, son flexibles: una sección puede contener artículos que a su vez contengan otras secciones (subsecciones); una página web puede emplear la etiqueta <header> en la cabecera de la web, pero también en las cabeceras de sus secciones y de sus artículos.
A esta lista de indispensables, es conveniente por mi parte ir añadiendo otras etiquetas, como por ejemplo, la que hoy nos ocupa: <main>
<main> y HTML5
Vaya por delante que esta etiqueta es una novedad incluida con HTML5 y tenemos que ser conscientes de ello al emplearla, pues es admitida por la mayor parte de los navegadores modernos, salvo por Internet Explorer y, no, no hablamos del 6, hablamos de cualquier versión, por el momento. Con los demás (Chrome, Firefox, Safari, Opera), no hay problemas.
Como fuera, para curarnos en salud mientras se ponen al día y, por mejorar la accesibilidad de nuestra web, es recomendable emplear este elemento adjuntándole la coletilla role="main" (ver en el código de ejemplo de más abajo). Coletilla que, aunque suene redundante, resulta ser una especificación ampliamente admitida por los navegadores, de tal manera que, los que no reconozcan la etiqueta, sí sabrán a qué corresponde su rol. Esta especificación se engloba dentro de los Roles ARIA de accesibilidad (más información en el enlace).
Sabiendo esto, la siguiente advertencia es que, a diferencia de las etiquetas anteriormente listadas, <main> ha de ser única en cada página web. No puede repetirse. Ojo, no puede haber varios <main> en una misma página web, pero sí uno en cada página de vuestro website. No confundamos a estas alturas una página web con la suma de las mismas.
Pero… ¿por qué sólo un <main>? Pues porque esta etiqueta especifica el contenido principal de la página web, destacándolo sobre el resto.
Así, lo podéis asociar a la sección de mayor peso o al grueso de la información interesante que diferencia esa página específica de las demás. Es decir, NO se usa para destacar como importante la cabecera, el logotipo, el pie de pagina, los anuncios… ni otros elementos que se repitan a lo largo de las diferentes páginas de vuestra web.
Las recomendaciones de la W3C añaden que <main> no debe colocarse en el interior de <article>, <aside>, <footer>, <header> o <nav>. En el caso de la etiqueta <article>, puede englobarla, pero no pertenecer a ella. En los demás casos (<aside>, <footer>, <header> o <nav>), ni siquiera eso.
Os dejo un ejemplo de código (esbozado) por si así os queda más claro:
<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 desarrollamos.</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>
<main> y CSS
Al no estar masivamente soportada por todos los navegadores, no es recomendable adjuntar estilos CSS directamente a esta etiqueta, si bien, entre otras soluciones, se puede recurrir al uso del script HTML5 Shiv -una opción para adaptar HTML5 a navegadores que no soportan todas sus funcionalidades de la que ya os hablé hace tiempo- o, en el caso específico de obligar a que las distintas versiones de Internet Explorer lo interpreten, bastaría con añadir display:block; entre las características con las que dotéis main en vuestro CSS.
main { display: block; }
Resumiendo: Utilizaremos la etiqueta <main> una vez por página a fin de destacar el contenido principal de la misma y tendremos cuidado porque no todos los navegadores son capaces de interpretarla correctamente.
Espero que mi verborrea os haya resultado de utilidad y espero volver dentro de no mucho con más buenas prácticas sobre otras etiquetas nuevas introducidas en HTML5. Dudas y comentarios, son bienvenidos :)
¿Opiniones, dudas? Cuéntame…