Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 27/08/2012

HTML5: Las etiquetas semánticas y estructurales

Después de nuestro artículo de introducción a HTML5, vamos a hacer un repaso a algunas de las nuevas etiquetas que nos trae esta revisión del lenguaje. En particular, en este artículo, nos centraremos en las que han aparecido para añadir valor semántico y estructural a la web.

Algunas de las más importantes etiquetas introducidas en HTML5 son las que añaden valor semántico y estructural, es decir, indican de forma inequívoca las distintas partes de las que consta un página: cabecera, pie, navegación, ...

<header>

La etiqueta <header> se usa para marcar un grupo de elementos de introducción o de navegación dentro de una sección o documento. Normalmente se usa para incluir los encabezados (<h1>–<h6> o <hgroup>) pero no es obligatorio. También puede contener otras cosas como el índice de una sección, un formulario de búsqueda, logos relevantes, ...

El uso de la etiqueta <header> no está restringido a una por documento, sino que se puede usar una por cada sección del mismo, de esta forma:

<header>
      <h1>Título del documento</h1>
      <p>Más información</p>
</header>

<article>
      <header>
              <h1>Título del artículo</h1>
            <p>Autor del artículo</p>
    </header>
    <p>Texto del artículo</p>
</article>

Podemos ver además en el ejemplo que en HTML5 el uso de múltiples <h1> es válido.

Una cosa a tener en cuenta es que la etiqueta <header> se usa para marcar un grupo de elementos; es decir, si sólo tenemos un elemento no es necesario usar esta etiqueta. Por ejemplo, en este código no sería necesario:

<article>
    <header>
        <h1>Título del artículo</h1>
    </header>
    <p>Texto del artículo</p>
</article>

Sería más correcto de esta forma:

<article>
    <h1>Título del artículo</h1>
    <p>Texto del artículo</p>
</article>

<hgroup>

La etiqueta <hgroup> se usa para agrupar un conjunto de uno o más elementos de encabezado (<h1>–<h6>).

El uso más típico de esta etiqueta es para agrupar el título de la página con su eslogan. Antes de HTML5 lo más típico era que este tipo de estructura se marcase así:

<div id="header">
    <h1>Nombre de la empresa</h1>
    <p>Eslogan de la empresa</p>
</div>
<div id="content">
    <h2>Noticia 1</h2>
    <p>Desarrollo de la noticia 1</p>

    <h2>Noticia 2</h2>
    <p>Desarrollo de la noticia 2</p>
</div>

Este tipo de estructura dejaba el eslogan al nivel de cualquier otro texto de la web, cuando es evidente que es un texto más importante. Marcarlo con un <h2> no era correcto ya que crearía una nueva sección que en realidad no existe. Con HTML5 podemos usar <hgroup> para darle la importancia que realmente tiene, asociándolo al título:

<hgroup>
    <h1>Nombre de la empresa</h1>
    <h2>Eslogan de la empresa</h2>
</hgroup>

<nav>

La etiqueta <nav> se usa para marcar una sección del documento cuya función es la navegación por la página web.

Esta etiqueta no debe ser usada para marcar todos los grupos de enlaces, únicamente los bloques principales de navegación por la página. Por ejemplo, los típicos enlaces que hay en el pie de página no se deben marcar con <nav>.

<article>

La etiqueta <article> se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página actual y que podría sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.

Normalmente un <article> tendrá, además de su propio contenido, también una cabecera (a menudo con <header>) y posiblemente un pie (<footer>).

<section>

La etiqueta <section> se usa para marcar una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado.

Ejemplos de uso de <section> podrían ser: capítulos, las pestañas en un menú tabulado o, en la página principal de un sitio web, la introducción, lista de noticias e información de contacto. Sólo se debería usar <section> para contenido independiente al que se podría poner un encabezado y que no sea susceptible de ir marcado con <article>, <aside> o <nav>.

Existe cierta confusión sobre cuándo usar <article> y cuándo <section> ya que ambos se parecen bastante. En general, se debe usar <article> cuando el contenido sea susceptible de ser sindicado (por ejemplo en unas RSS). Un ejemplo de uso de las dos etiquetas podría ser en la página principal de una web con un listado de noticias, de esta forma:

<h1>Título de la página</h1>
<section id="news-list">
    <h2>Noticias</h2>
    
    <article>
        <h3>Noticia 1</h3>
        <p>Desarrollo de la noticia 1</p>
    </article>
    
    <article>
        <h3>Noticia 2</h3>
        <p>Desarrollo de la noticia 2</p>
    </article>
</section>

<aside>

La etiqueta <aside> se usa para marcar un trozo de contenido que está relacionado con el contenido de la página web, pero que no es parte del mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a páginas relacionadas, barras laterales, ...

<footer>

La etiqueta <footer> se usa para marcar el pie de una sección o documento y que contiene información sobre el mismo como el autor, licencia, términos de uso, ...

Fuente http://www.arumeinformatica.es

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.