Etiquetas HTML5: Hgroup, Aside y Mark

La codificación con HTML5 ha venido a bombardear la mente de varios desarrolladores en los últimos meses, su incorporación al mundo de la programación ha hecho que más de uno se interese por aprender los nuevos estándares y aplicaciones que esta nueva versión del lenguaje de etiquetas nos brinda. Si bien es un tema que se ha venido tratando por varios meses incluso años, HTML5 ha tomado una relevancia especial a últimas horas por su gran avance en cuestiones de desempeño en el lado cliente.

Si tú eres de esas personas que se han mantenido al tanto de lo nuevas tecnologías web, debes estar consciente de los grandes avances que se han alcanzado, la manera en que HTML5 ha logrado agrupar e incorporar funciones que antes parecían imposibles de realizar utilizando únicamente el navegador del usuario, desde almacenaje propio hasta animaciones.

Además de esto, HTML5 trae consigo una nueva manera de estructurar nuestros sitios web, etiquetas como “section”, “article”, “header” y “footer” nacieron para unirse a otras ya conocidas como “body” y “div”. Con esto cada parte de una página quedará mejor delimitada, entendiendo con un simple vistazo la función o el rol que juegan dentro de la estructura.

Un cambio en estructura siempre es un parte fundamental por aprender, es por esto que muchos recomiendan que entre los primeros pasos a realizar cuando comenzamos con el trato de HTML5 se encuentre el dejar fuera etiquetas de estilo y comenzar con la construcción de las páginas con los nuevos elementos semánticos.

Si bien las etiquetas ya mencionadas son los elementales para comenzar a desarrollar, al momento de realizar una estructura no debemos olvidarnos de esos pequeños pero fundamentales elementos que nos ayudarán a crear una mejor semántica. Me refiero a etiquetas como “mark”, “hgroup” o “aside” que si bien son pequeñas, pueden representar gran funcionalidad para la estructura.

Etiqueta hgroup de HTML 5

La función del elemento “hgroup” es agrupar un conjunto de encabezados en un sólo bloque para que puedan ser manejados como una unidad. Cuando mencionamos la palabra encabezado nos estamos refiriendo nada más y nada menos que las etiquetas que van de h1 a h6, y que nos sirven para darle un formato a los títulos de nuestros artículos, entradas o nombres lo que hace resaltarlos del resto del texto.

Si tuviéramos un título y un subtítulo que quisiéramos relacionar y agrupar, el tag adecuado para ello es “hgroup”. Una aplicación común en un sitio web es el agregar un “eslogan” al título de nuestra página o quizás la fecha al título de una entrada, para ello comúnmente se maneja un nivel de encabezado para el título principal y otro nivel de encabezado inferior para el lema o eslogan.

Hgroup será el encargado de agrupar los dos títulos para manejarlos como unidad en el árbol del documento, esto sin comprometer el valor semántico de cada etiqueta. Debemos aclarar que dentro de un elemento “hgroup” solo podemos manejar etiquetas de tipo encabezado, por lo que no es permitido introducir párrafos o algún otro tipo de etiqueta.

Su aplicación en el código HTML quedaría de la siguiente manera:

<hgroup>
<h1>La Webera</h1>
<h2>Portal del Diseñador Web y Webmaster</h2>
</hgroup>

Debido a la envoltura “hgroup”, el lema del sitio no está incluido en el esquema del documento, y eso es exactamente lo que queremos.

Aunque el uso más práctico de “hgroup” es para establecer frases, también se puede utilizar para agrupar metadata o algún otro texto auxiliar cuyo contenido no queremos que aparezca en la estructura del documento.

Etiqueta aside de HTML 5

El elemento “aside” es utilizado para envolver todo aquel contenido que sea relativo a la sección principal de un sitio y es a menudo representado con las famosas barras laterales en los sitios web.

Aunque si bien es cierto que la mayor parte del tiempo encontraremos a esta etiqueta envolviendo contenido que se encuentra a un lado del sitio, debemos aclarar que la etiqueta en sí no esta relacionada con ninguna posición, tanto puede estar a un lado como en el centro o incluso el tope superior o inferior de la página.

Su función como ya mencionábamos consiste en envolver una sección de contenido que tiene alguna clase de relación el texto más grande donde aparece, por lo que no puede valerse por si misma como una pieza portable de contenido. Es por ello se puede hacer uso de ella para mostrar mensajes de publicidad, alguna cita o una aclaración relacionada con la entrada o el texto donde se despliega.

Por ejemplo, si quisiéramos una caja de publicidad enseguida de un artículo en este blog podríamos hacer algo como esto:

<aside style="background: #DEDEDE; color:steelblue; float:right; width:220px; padding: 20px; border: 1px solid #CCCCCC">
<span style="font-weight:bold">¿Necesitas una web?</span><br/> ¡Nosotros te la diseñamos!
</aside>
<hgroup>
<h1>Diseño de formularios con CSS y HTML</h1>
<h2>Artículo creado el 9/05/07</h2>
</hgroup>
<p>En este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos para nuestros sitios y servicios web usando sencillamente CSS. Los formularios son parte importantes, pero poco elegantes, de muchos sitios. CSS hace más fácil la creación de formularios atractivos rápidamente, porque una vez que se ha desarrollado un diseño lo podemos reproducir en cada formulario del sitio.</p>

Etiqueta mark en HTML 5

El último elemento a analizar en este artículo es la etiqueta “mark”, como se puede deducir por su nombre esta es utilizada para marcar el contenido de manera que pueda resaltarse y diferenciarse de los demás, su particularidad viene a que su función puede ser una dependencia del comportamiento del usuario, ya que en algunas ocasiones esta etiqueta puede indicar algún tipo de actividad reciente.

La etiqueta en sí se encarga de agregar distintos estilos al texto para que este destaque del resto, ya sea un color de fondo o algún relieve, con esto se pretende mejorar la experiencia del usuario en caso de que este haya realizado una consulta o de que haya realizado alguna actividad donde el marcado le resulte de ayuda.

Si marcamos aquellas palabras que el usuario introdujo en la casilla de búsqueda le resultará mucho más sencillo identificar el párrafo o sección donde se habla del tema buscado. Fuera de esta función, la etiqueta se puede utilizar para mejorar la interacción del usuario con el contenido, haciendo destacar fragmentos.