Estructura semántica de HTML5

Versión para impresión
Estructura de HTML5

En relación a la estructura de una web, el lenguaje HTML5 utiliza unas etiquetas que le aportan semántica. El lenguaje es capaz de diferenciar, por ejemplo, entre el encabeza del documento y el pie. Google y otros buscadores son capaces de detectar dicha estructura.

HTML5

Las etiquetas referentes a la estructura en HTML5 serían:

<header>

Representa un grupo que sirve de introducción a un contenido.

Normalmente define la cabecera del documento, en donde suelen ir el título del sitio y el logo.

El título se podría poner en un <h1>, y luego, en el <article>, poner otro <h1>. Semánticamente serían <h1> distintos, ya que cada uno está en una zona distinta de la página web.

<hgroup>

Sirve para agrupar por ejemplo un título con su subtítulo. Por ejemplo, el título y el lema:

<hgroup> 
 <h1>veteporlasombra</h1> 
 <h2>menos es más</h2> 
</hgroup>

Nota: no usar. Aunque whatwg.org la considera, el w3c no.

<nav>

Para incluir dentro (generalmente en una lista) el menú principal de una web. También se puede utilizar para los menús secundarios.

<nav> 
 <ul> 
  <li>Quiénes somos</li> 
  <li>Productos</li> 
  <li>Contacto</li> 
 </ul> 
</nav>

<main>

Especifica el contenido principal del documento.

El contenido que alberga debería ser único. Es decir, que ninguo de los contenidos debería estar repetido en otras páginas del sitio web, como ocurre por ejemplo con barras laterales, menús, avisos legales, logos del sitio o formularios de búsqueda.

Nota: en la página no debe de haber más de un <main>. Dicho <main> no debe ser hijo de los elementos <article>, <aside>, <footer>, <header> o <nav>.

<article>

Representa un contenido que puede ser distribuido o reutilizado como parte independiente, por ejemplo en sindicación. Por ejemplo, podría ser una entrada de un foro o de bitácora, el artículo de un periódico, o un comentario que envía un usuario.

A veces los artículos se pueden anidar, y los de dentro están relacionados con el artículo externo y principal. Por ejemplo, sería el caso de cada comentario de un artículo.

Podría tener <header> y <footer>.

<section>

Representa una sección general de un documento o aplicación. Es un grupo temático de contenido, y suele tener un encabezado.

Por ejemplo, los capítulos de un libro, las pestañas de un contenido dividido en pestañas, o las secciones numeradas de una tesis. La página de inicio de un sitio web podría dividirse en secciones tales como la introducción, novedades, y la información de contacto.

<aside>

Es una sección que de alguna forma está relacionada con el contenido principal que la rodea, pero se puede considerar aparte de dicho contenido.

En estas secciones se suelen poner lateralmente menús secundarios (dentro de <nav>), anuncios y banners o citas.

<footer>

Representa el pie del contenido más cercano. Suele contener información como el autor, el copyright, o enlaces relacionados con el documento.

Podemos encontrar un pie en cualquiera de las otras secciones del documento (header, article o secction).

<figure> y <figcaption>

<figure>
Se utiliza para meter dentro una imagen con una foto, ilustración o gráfico que ilustra el contenido de un artículo o sección.
<figcaption>
Sería el pie de foto con la leyenda del gráfico, y su empleo es opcional.

El figure iría dentro de una sección o artículo, para que se relacione con él. Por ejemplo:

<article> 
 <h1>TÍTULO DEL ARTÍCULO</h1> 
 <p>párrafo del artículo</p> 
 <section> 
  <h1>TÍTULO DE LA SECCIÓN</h1> 
  <p>párrafo de la sección</p> 
  <figure> 
   <img src="foto o ilustración" /> 
   <figcaption>texto del pie de foto</figcaption> 
  </figure> 
 </section> 
</article>

Por ejemplo:

Estructura semántica en HTML5

<details> y <summary>

<details open>
Es un bloque con datos adicionales al contenido. Por defecto está cerrado, a no ser que se añada el atributo open
<summary>
Es el título del details.

Por ejemplo:

<p> ¡Oferta!: menú del día a 12 euros por barba. </p>
<details>
 <summary>Incluye:</summary>
 <ul>
  <li>pan</li>
  <li>agua</li>
 </ul>
</details>

Script de compatibilidad con IE

Hay algunos script para que los navegadores antiguos reconozcan las etiquetas de HTML5, como por ejemplo:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

¡Oferta!: menú del día a 12 euros por barba.

Incluye:

  • pan
  • agua

Combinando la estructura tradicional y la semántica

Podríamos combinar la forma tradicional de estructurar una web con la semántica, porque los navegadores antiguos no reconocen las nuevas etiquetas. Así, por ejemplo para el header, podríamos hacer:

<div id="header">
 <header><h1>Esto es la cabecera</h1></header>
</div>

Categorías: