Semántica en HTML5 (V): nav y main
Tras unos cuantos días sin publicar nada, muchos más de los que me hubiese gustado, he decidido dar carpetazo a la serie de artículos sobre la semántica en HTML5 aunando dos etiquetas que nada tienen que ver en un único artículo. Con estas dos nuevas etiquetas finalizaré una estructura básica que puede ser usada para construir cualquier web y que además será 100% semántica, que es a fin de cuentas lo que buscaba con esta serie de artículos.
Por supuesto la semántica en HTML5 es mucho más amplia, y voy a obviar etiquetas como address o time (al menos de momento), porque son menos generales y no suelen conformar la estructura básica de una web. Además también queda pendiente el tema de los datos estructurados mediante los esquemas de Schema.org, un punto también muy importante cuando se habla sobre la semántica de una web y que en algún momento tocaré en un futuro artículo (promesa de año nuevo xD). Así que sin más vueltas, vamos a ensuciarnos las manos como buenos alienígenas que somos.
Vamos a comenzar por una de las etiquetas más básicas, que a buen seguro no te costará para nada entender (y más si te has leído los capítulos anteriores de esta entrega), que es la etiqueta nav. Según la información que nos proporciona la W3C, nav representa una sección de una web que enlaza otras páginas o partes de la página, o lo que viene a ser lo mismo, un menú de navegación. Sólo hay que tener en cuenta que el fin de la etiqueta nav no es la de etiquetar cualquier enlace, sino únicamente aquellos que conformen una navegación principal.
Con esta definición creo que queda bastante claro que sólo usaremos nav para el típico menú principal de navegación que suele tener cualquier web, los típicos enlaces de navegación "prev next" de Blogger o quizás también una nube de etiquetas, porque todos ellos nos llevan a partes importantes de nuestra web y forman parte de las opciones de navegación que ofrecemos a nuestros usuarios, evidentemente nunca debe de usarse para un blogroll.
La otra etiqueta que vamos a tratar y que posteriormente nos ayudará a construir una web semántica, es la etiqueta main. El elemento main es el más nuevo de todos los que hemos tratado hasta ahora, de hecho comenzó siendo una extensión de HTML y se fue desarrollando de forma separada, aunque en estos momentos ya está integrada en la especificación de HTML.
Aunando el wiki de la W3C y la extensión de la especificación para HTML5 de main, tambień de la W3C, podemos sacar como conclusión que main viene a sustituir la sección del contenido que generalmente se suele etiquetar con una id main o content y que su finalidad es la de englobar el contenido principal de un documento o aplicación. Sólo un apunte, únicamente puede haber un main por documento, ya que a fin de cuentas no es una etiqueta para seccionar contenido, para eso tenemos section o article.
Llegados a esto punto es cuando por fín vamos a ensuciarnos las manos. Voy a echar mano de la última plantilla que usamos en Semántica en HTML5 (III): article y section y a darle el toque final para obtener una plantilla base semántica en HTML5. Omitiré la inclusión de la etiqueta aside, por ser poco generalista, ya que como vimos en Semántica en HTML5 (IV): aside es una etiqueta con unos requisitos para su uso un poco más especiales y a mi gusto no se adapta muy bien a una plantilla base, así nos evitaremos que a alguno le de por enmarcar su sidebar con este etiqueta.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<header id="cadecera">
<nav id="menu">Menú de navegación</nav>
<img src="logo.gif">
<p>título del blog</p>
<form id="busqueda">formulario de búsqueda</form>
</header>
<main id="contenido">
<article class="post">
<header class="encabezado-post">
<h1>Título del post</h1>
<time>Fecha de publicación</time>
<p>Autor del post</p>
</header>
<div class="contenido-post">
...
</div>
<footer class="post-footer">
nº de comentarios, tags
</footer>
</article>
</main>
<footer id="footer">
copyright, condiciones de uso, etc.
</footer>
</body>
</html>