| Artículos | 01 ENE 2011

Escribe, hoy, la web del futuro con HTML5

Compartir

Fran Iglesias.
HTML5 es la última especificación, aún en desarrollo, del lenguaje de marcado para hipertexto inventado por Tim Berners Lee a principios de los años 90 y que es la base de la web, la parte más visible de Internet.

Si eres desarrollador web, HTML5 es una especificación que merece la pena empezar a adoptar desde ahora mismo por varios motivos. El primero es que prácticamente todo tu código HTML4 actual es válido en HTML5, de modo que la migración no significa un salto en el vacío. En realidad, puedes plantearla como un proceso de mejora progresiva.
Goza de un amplio soporte en los navegadores modernos: Safari, Firefox, Chrome y Opera lo soportan ya, y Explorer lo hará en la inminente versión 9. Además, es sencillo detectar el soporte de características específicas y actuar en consecuencia.
Simplificará tu código y enriquecerá la experiencia del usuario: los nuevos tipos de elementos incluidos permitirán hacer un código más limpio y con mayor significado, además de que los nuevos elementos para formularios permitirán interacciones que actualmente hay que soportar mediante otras soluciones.
Y todo esto con un perjuicio mínimo a los usuarios que aun continúen utilizando los navegadores más antiguos.
El soporte de las características de HTML5 es aún variable en función de los navegadores y sus versiones, ya que la especificación no está aún completamente terminada.

Empezando con HTML5
Lo primero que debe hacer un documento HTML es, por así decirlo, presentarse y decir qué tipo de documento es. Esto es lo que conocemos por declaración del DOCTYPE. En HTML4, esta declaración era un galimatías. En HTML5, es tan concisa como: <!DOCTYPE html>
Así que puedes sencillamente tomar un documento HTML4, cambiar su DOCTYPE y ya tienes tu página web convertida a HTML5.
Además, conviene que se especifique el idioma correspondiente a la información contenida, lo que se hace utilizando la etiqueta html: <html lang=”es”>
Lógicamente, esto no nos basta para sacarle jugo al lenguaje. La especificación incluye nuevos elementos, los cuales aportan diversos beneficios, desde una mayor “semántica” (en el sentido de una descripción más significativa de lo que es cada parte del documento) hasta mejoras funcionales accesibles desde JavaScript.

Seccionando una página: Cabeceras y pies
Una de las estructuras clásicas de una página web es la de Cabecera-Contenido-Pie. La cabecera para el título y menú principal, un bloque de contenido, y un pie para diversas funciones de navegación, avisos legales, etc.
Hasta ahora, este tipo de estructura solía resolverse usando la “etiqueta-para-todo” div:
<div id=”header”>
<!-- contenido de la cabecera -->
</div>
<div id=”main”>
<!-- contenido principal de la página -->
</div>
<div id=”footer”>
<!-- Pie de página -->
</div>

Una solución sencilla pero que deja un cierto poso de insatisfacción. HTML5 nos aporta nuevas etiquetas con un valor semántico propio: section, header y footer.
Header: representa la cabecera del elemento que la contiene. Si es hija directa de body, se trata de la cabecera de la página.
Footer: representa un pie para el elemento que la contiene.
Section: es una división arbitraria pero significativa que hacemos de un contenido o aplicación.
Nuestro código expresado en HTML5 quedaría así, más sencillo y descriptivo:
<header>
<!-- contenido de la cabecera -->
</header>
<section id=”main”>
<!-- contenido principal de la página -->
</section>
<footer>
<!-- Pie de página -->
</footer>

Y no te preocupes por el futuro de la etiqueta div, sigue presente en el lenguaje para las divisiones arbitrarias no semánticas que necesites hacer.

Artículos
Buena parte de los contenidos de la web los podemos caracterizar fácilmente como “artículos” en tanto que textos sobre un tema de longitud variable, que generalmente tienen un título y pueden estar divididos en apartados.
Así que parece lógica la inclusión de un elemento article, cuyo significado es precisamente indicar que ese contenido es una unidad.
Podríamos reescribir nuestro código para expresarlo aún mejor:
<header>
<!-- contenido de la cabecera -->
</header>
<article>
<!-- contenido principal de la página -->
</article>
<footer>
<!-- Pie de página -->
</footer>

Nuestro artículo podría tener sus propios header y footer, conteniendo la primera el título y el último información extra, como los datos de publicación, lecturas, etc, que vemos habitualmente en los sitios web.
<header>
<!-- contenido de la cabecera -->
</header>
<article>
<header>
<!-- Título -->
</header>
<!-- contenido del artículo -->
<footer>
<!-- Pie del artículo -->
</footer>
</article>
<footer>
<!-- Pie de página -->
</footer>

Cuestión de jerarquía
Una de las recomendaciones de accesibilidad de las páginas web es que debe existir una buena jerarquía de niveles de títulos y subtítulos que permita representar un esquema del contenido, usando las etiquetas h1, h2, ... h6. Sin embargo esto conlleva varios dolores de cabeza. Por ejemplo, si el título general de la página va en h1, el título del artículo tiene que ir en h2 ya que solo podía haber un nivel h1, pero eso nos quita niveles de profundidad para desarrollar el contenido. Y los títulos de otros bloques de la página, ¿en qué nivel los ponemos? En resumen, un follón.
Las secciones en HTML (section, article, y otras) aportan la capacidad de resetear los niveles de esquema de modo que cada una de ellas puede tener su propia jerarquía independiente. De este modo, un código como el siguiente, con dos títulos h1 en diferentes contextos, es perfectamente válido y claro:
<header>
<h1>Curso de HTML5</h1>
</header>
<article>
<header>
<h1>El elemento ARTICLE</h1>
</header>
<h2>Significado</h2>
...
<footer>
<!-- Pie del artículo -->
</footer>
</article>
<footer>
<!-- Pie de página -->
</footer>

Esto tiene consecuencias interesantes en el desarrollo de aplicaciones web, ya que nos permite montar una página a base de módulos con jerarquías de contenido independientes.
Por cierto, también puedes tener varios article en una misma página, como la portada de un blog o una estructura similar.
Algo más sobre títulos. Otro problema que resuelve HTML5 tiene que ver con los conjuntos de títulos, que combinan dos o más elementos y que deberían interpretarse juntos. Para ello se incorpora el elemento hgroup, que se pude usar, por ejemplo, así:
<hgroup>
<h1>Mi blog</h1>
<p>Tonterías recopiladas por Fran</p>
</hgroup>

Navegación por el sitio web
Cualquier sitio web medianamente útil contiene varias páginas y se hace necesario in

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información