Subscribe

lunes, 13 de septiembre de 2010

Nueva semántica con HTML 5

Una de las grandes innovaciones de HTML5 ha sido la de introducir semántica en nuestro código html de forma que de nuestra web se pueda extraer más información de la que ofrecemos mediante nuestros contenidos.
Vamos a centrarnos un poco en como trabajábamos hasta ahora, por ejemplo, a la hora de hacer un menú:
<div class="menu">
<ul>
<li><a href="seccion1.html">ir a sección 1</li>
<li><a href="seccion2.html">ir a sección 2</li>
<li><a href="seccion3.html">ir a sección 3</li>
<li><a href="seccion4.html">ir a sección 4</li>
</ul>
</div>
Esto que vemos pinta una lista de enlaces, y será el menú principal de nuestra web. Hasta el momento con html4 no podíamos diferenciar entre estos enlaces que formaban el menú de nuestra web, con un enlace externo relacionado con, por ejemplo, una noticia de nuestro portal.
La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo. Por ejemplo, ese trozo de código con html 5 podría ser algo parecido a:



<nav>
<ul>
<li><a href="seccion1.html">ir a sección 1</li>
<li><a href="seccion2.html">ir a sección 2</li>
<li><a href="seccion3.html">ir a sección 3</li>
<li><a href="seccion4.html">ir a sección 4</li>
</ul>
</nav>
De esta forma estamos diciendo, de una forma transparente a los visitantes de nuestro sitio web, que esa lista de enlaces es nuestro menú de navegación.
Ahora la pregunta es, realmente, ¿para qué sirve todo esto?
Evidentemente, el darle significado a las cosas solo tiene sentido si luego hay alguien que es capaz de interpretar ese significado (sino sería como hablarle a los sordos por teléfono). En nuestro caso, los motivos pueden ser desde un mejor posicionamiento SEO (mientras más información le demos a los rastreadores más información podrán sacar de nuestros sitios), hasta una mejor interpretación de los lectores para ciegos u otros tipos de software similares.
La nueva lista de elementos que tenemos en html5 es:
  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • time
  • mark

No es motivo de este post describir estos elementos, para ello ya tendremos tiempo de verlos uno a uno, pero para el que tenga más interés recomiendo el libro "Dive into html5" o el articulo de Alejandro Castillo.
Pero quizás la referencia más amplia que he encontrado de los nuevos elementos de html5 es este link. Más que una lectura un lugar de referencia a la hora de maquetar nuestros contenidos con esta versión de html.
Como siempre pasa, no todo el mundo está de acuerdo con el camino que los creadores de html5 han tenido para darle semántica a los elementos, para ver un poco más afondo esta polémica os aconsejo el articulo de John Allsopp o el comentario sobre el mismo de Julio Loayza en su blog Realidad Aparte.

No hay comentarios:

Publicar un comentario