Semántica HTML5

Elementos Semánticos HTML5

La semántica es el estudio de los significados de las palabras y frases en un idioma.

Elementos semánticos = elementos con un significado.

¿Qué son los elementos semánticos?

Un elemento semántico describe claramente su significado tanto para el navegador web como para el desarrollador.

Elementos no semánticos: Para las etiquetas <div> y <span> no dice nada sobre su contenido.

Elementos semánticos: Para las etiquetas <form>, <table> y <article> sí define claramente su contenido.

Los elementos semánticos HTML5 son soportados en todos los Navegadores Web modernos. Pero adicionalmente, se puede especificar el comportamiento de los "elementos desconocidos" para enseñar a los Navegadores Web antiguos como manejarlos para su visualización.

Nuevos Elementos Semánticos en HTML5

Muchas páginas web contienen código HTML como: <div id="nav"> <div class="header"> <div id="footer"> para indicar la navegación, el encabezado y el pie de página respectivamente.

HTML5 ofrece nuevos elementos semánticos para definir diferentes partes de la página web:

El elemento section HTML5

El elemento <section> define una sección del documento y de acuerdo a la documentación HTML5 del W3C: "Una sección es una agrupación temática de contenido" generalmente con un título de encabezado".

Una página de inicio normalmente se puede dividir en secciones para introducción, contenido e información de contacto.

<section>
  <h2>Título de Sección</h2>
  <p>Este es el contenido de la sección...</p>
</section>

El elemento article HTML5

El elemento <article> define contenido independiente y autocontenido, es decir, un artículo. Un artículo debe tener sentido por sí solo y debería ser posible leerlo destacándose independiente del resto de la página.

Ejemplos de en donde pueden ser usados los elementos <article>:

• Post de foros.
• Post de blogs.
• Artículos de Noticias.

<article>
  <h2>Título del Artículo</h2>
  <p>Contenido del Artículo...</p>
</articl>

¿Anidar un article en un section o viceversa?

Aunque podemos encontrar en internet sitios web que anidan elementos <article> en otro elemento <section> o viceversa, no es correcto dentro de en la semántica HTML5. Dado que el elemento <section> representa una sección genérica del documento, mientras que el elemento <article> representa un contenido autocontenido del documento, es decir, es el contenido de la página que se destaca del resto de las secciones.

Un elemento <article> anidado en otro elemento <article> representa contenido directamente relacionado al <article> que lo contiene. Como por ejemplo un artículo que contiene comentarios o post relacionados al artículo.

El elemento header HTML5

El elemento <header> especifica una sección de encabezado del documento o un encabezado de una sección del documento. Defería ser usado como un contendor de introducción de contenido. Pueden existir muchos elementos <header> en un documento.

El siguiente ejemplo define un encabezado para un artículo:

<article>
  <header>
    <h2>Título</h2>
    <p>Introducción del contenido ...</p>
  </header>
  <p>Contenido del Artículo ...</p>
</article>

El elemento footer HTML5

El elemento <footer> especifica el pie del documento o de una sección. Debe contener información relacionada a la información de su contenedor. Un pie de documento tipico contiene los datos del autor, los derechos reservados (copyright), ligas a los términos de uso, información de contacto, etc. Pueden exister muchos elementos <footer> en un documento.

<footer>
  <p>Post por: Sergio Loya</p>
  <p>Contacto: <a href="mailto:sergioloya@exasoluciones.com"></a>.</p>
</footer>

El elemento nav HTML5

El elemento <nav> declara un conjunto de ligas o enlaces de navegación.

Nota: No todos los enlaces de un documento deben estar dentro de un elemento <nav>. El elemento <nav> es intencionado para el bloque mayor de enlaces de navegación, como el menú de navegación principal del sitio.

<nav>
  <a href="/inicio/html">HTML</a> |
  <a href="/inicio/css">CSS</a> |
  <a href="/inicio/js">JavaScript</a> |
  <a href="/inicio/jquery">jQuery</a>
</nav>

El elemento aside HTML5

El elemento <aside> define un contenido aparte del contenido en el que se encuentra (como una barra lateral). El contenido <aside> debe estar relacionado con el contenido circundante.

<p>Mi familia y yo visitamos el zoológico.</p>
<aside>
  <h4>Zoológico</h4>
  <p>Lugar en donde se exhiben animales ...</p>
</aside>

Los elementos figure y figcaption HTML5

El propósito de una leyenda de una figura es agregar un descripción textual a una imagen. En HTML5, una imagen y una leyenda pueden ser agrupados juntos en un elemento <figure>:

<figure>
  <img src="img_manzana.jpg" alt="Una manzana">
  <figcaption>Fig1. - Manzana, Fruta.</figcaption>
</figure>

El elemento <img> define una imagen, el elemento <figcaption> define la leyenda.

¿Por qué los elementos semánticos?

Con el HTML 4, los desarrolladores usaron sus propios nombres de id y class para dar estilos a los elementos como: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc. Esto dificulto a los motores de búsqueda identificar el contenido correcto una página web. Con los nuevos elementos semánticos HTML5 (<header>, <footer>, <nav>, <section> y <article>) será más fácil identificar el contenido correcto de una página web.

De acuerdo con el W3C, un Sitio Web semántico: "Permite que los datos se compartan y reutilicen a través de aplicaciones, empresas y comunidades".

Elementos Semánticos en HTML5

A continuación se muestra una lista ordenada alfabéticamente con los nuevos elementos semánticos en HTML5:

Etiqueta	Descripción
<article>	Define un artículo.
<aside>	Define contenido aparte del contenido de la página.
<details>	Define detalles adicionales que el usuario puede mostrar y ocultar.
<figcaption>	Define una leyenda para un elemento <figure>.
<figure>	Especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc.
<footer>	Define el pie del documento o el pie de una sección.
<header>	Especifica un encabezado para un documento o sección.
<main>	Especifica el contenido principal de un documento.
<mark>	Define un texto marcado/resaltado.
<nav>	Define un conjunto de enlaces de navegación.
<section>	Define una sección en un documento.
<summary>	Define un encabezado visible para un elemento <details>.
<time>	Define un Date/Time.