Como ya comentamos, uno de los puntos nuevos de HTML5 es el uso de nuevas etiquetas semánticas que serán usadas para identificar diversas partes de la web.
Bien es sabido que, normalmente, cuando realizamos la maquetación una web, ésta está dividida en una serie de partes que se repiten de un proyecto a otro: la cabecera, el menú, el cuerpo o el pie, por ejemplo. Esa estructura básica (a grandes rasgos) es prácticamente común a todos los portales e incluso solemos usar los mismos nombres a la hora de identificar las capas.
Como es un sistema que repetimos una y otra vez los desarrolladores, HTML5 lo ha hecho suyo y ha decidido estandarizar este uso creando nuevas etiquetas. Así los div comunes que veníamos usando hasta ahora se sustituyen por las etiquetas semánticas header, hgroup, nav, section, article, aside y footer, que a nivel visual identifican mejor el tipo de contenido que envuelven, pero que a nivel funcional se comportan exactamente igual. Por tanto, podemos darles las propiedades de estilos que queramos con CSS como hacíamos antes.
Es importante comentar antes de seguir, que del mismo modo que no hay una única manera de hacer una web, tampoco hay un único modo correcto de implementar las etiquetas. Hay un alto componente subjetivo y de libre interpretación a la hora de estructurar nuestro portal, ya que la valoración del nivel semántico es una tarea propia de cada individuo.
Etiqueta header
La etiqueta header se va a usar para una cabecera, generalmente la cabecera de la página. Sin embargo, no hay nada que impida usarla también para la cabecera de un artículo o de un apartado, por ejemplo. Su sintaxis sería:
<header>
contenido de la cabecera
</header>Etiqueta hgroup
Los h1, h2, h3, etc. se usan para establecer el grado de jerarquía de los títulos de una web; título, subtitulo, epígrafe, etc. De acuerdo a esto, h1 no se puede usar más de una vez en cada una de las páginas de una web, no porque no se pueda, sino porque perdería su eficacia en torno al SEO. Pero lo cierto es que una página suele tener más de un título, sobre todo cuando hablamos de portales que cargan mucho contenido dinámico, como blogs, revistas, etc.
Pues bien, la etiqueta hgroup permite crear grupos de títulos para que pueda haber más de un h1, h2 y h3 sin que pierdan importancia. Ideal para los listados de artículos que suelen constar de título, subtítulo y una entradilla.
<hgroup>
<h1> título </h1>
<h2> subtítulo </h2>
</hgroup>Etiqueta nav
La etiqueta nav la usaremos para identificar el menú de navegación del portal. Dentro de ella colocaremos la botonera tal cual lo hacíamos antes, usando preferiblemente listas (ul y ol).
<nav>
contenido del menú
</nav>Etiqueta section
Cuando vayamos a crear un bloque de contenido específico, usaremos la etiqueta section. En la home de un periódico usaríamos un section para las noticias principales, otro para las secundarias y otro para las relacionadas, por ejemplo.
<section>
contenido de la sección
</section>Etiqueta article
Dentro de una sección de contenido usaríamos la etiqueta article cuando dicho contenido esté compuesto por partes independientes. Por ejemplo cada noticia dentro de un listado sería un article, o cada producto en una tienda online.
<article>
primera entrada
</article>
<article>
segunda entrada
</article>
...Etiqueta aside
La etiqueta aside es un poco especial, ya que se usa para envolver secciones cuya información está relacionada con el contenido que estamos viendo pero sólo tangencialmente. Es decir, lo que hay dentro de un aside no es relevante para entender la temática principal de un contenido, pero podría ser útil para el usuario.
Esta etiqueta aside es habitual encontrarla por ejemplo en las barras laterales de un sitio web, las fichas de autores en los artículos o en las secciones destinadas a la publicidad.
<aside>
contenido
</aside>Etiqueta footer
Para el pie podemos usar la etiqueta footer, que al igual que la de cabecera, generalmente la usaremos para la página entera. Aunque tampoco hay nada que impida que la usemos como pie de artículos.
<footer>
contenido del pie
</footer>Índice del manual
- Introducción a HTML5
- ¿Cuáles son las diferencias de HTML5?
- Cambio de doctype
- Etiquetas semánticas header, hgroup, nav, section, article, aside y footer
- Etiquetas audio, video, source, track, embed y canvas
- Los formularios: nuevos tipos de input en HTML5
- Los formularios: nuevos elementos en HTML5
- Etiquetas en obsoletas en HTML5
- Ventajas e inconvenientes de usar HTML5
Deja una respuesta