HTML5 no es más que la siguiente evolución del HTML, un estándar que aún está en curso, pero que ya muchos navegadores han empezado a implementar. En cualquier caso, estamos en la misma situación de siempre, dependientes de la implementación de cada navegador.
Ahora, el código HTML debe preocuparse únicamente de la estructura del contenido de las páginas, y jamás de su apariencia. La presentación al usuario pasa a ser completamente una tarea de las hojas de estilo (CSS), mientras que el HTML se vuelve más semántico.
El DOCTYPE
Todas las páginas deben empezar con el DOCTYPE, ya que sin él, el navegador podría interpretar incorrectamente el contenido de la página, y en consecuencia, mostrarla de forma incorrecta al usuario. El DOCTYPE para HTML5 es el siguiente:
<!doctype html>
La falta del DOCTYPE puede provocar que los navegadores funcionen en un modo a prueba de errores (quirks mode), lo cual en IE8 significa que pueda intentar funcionar como un IE5.
Además, si en IE8 activamos la Vista de Compatibilidad, entonces empezará a funcionar en modo IE7 (sin los beneficios de CSS2.1). Esto también puede ocurrir si Microsoft incluye tu Sitio Web en su Lista de Vista de Compatibilidad. Podemos evitar este comportamiento incluyendo la siguiente línea en la cabecera, para forzar al Internet Explorer a utilizar su modo standard (es decir, el modo más alto en que pueda funcionar; ej: IE10 funcionará en modo IE10):
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Algunas web utilizan alguna variación de la anterior línea en su cabecera, por ejemplo, para mostrarse como en un IE9, independientemente de que la página web tenga o no el DOCTYPE:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
HTML5 y las versiones antiguas de Internet Explorer
Uno de los inconvenientes de utilizar hoy en día HTML5, es que las versiones antiguas de Internet Explorer no reconocen correctamente las nuevas etiquetas, por lo que tampoco reconocerán correctamente los estilos que apliquemos con CSS.
Es posible corregir este comportamiento utilizando JavaScript, para lo cual podemos simplemente añadir el siguiente trozo de código a nuestra cabecera (<head>).
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Este código sólo es visible para las versiones de Internet Explorer anteriores a IE9. También podemos descargar dicho fichero JavaScript para incluirlo dentro de nuestra Web. Para más detalles, incluyendo la descarga del código, visitar html5shim, HTML5 IE enabling script.
Siempre que sea posible, es deseable asegurarse de utilizar las versiones más recientes de Internet Explorer. Para aquellos casos en que no podamos tener dicha certeza ni queramos perder a dichos usuarios, poder aprovechar el JavaScript.
Téngase en cuenta que hoy en día IE8 es la versión de Internet Explorer más utilizada.
Las etiquetas <div> y <span>
<div>. Representa una división lógica o sección dentro de una página web, con el objetivo de agrupar varios elementos en bloque para formatearlos con CSS o manipularlos con JavaScript. No aporta ningún significado semántico, por lo que suele ser preferible utilizar otras etiquetas (ej: <header>, <footer>, <article>, <section>, etc.) cuando sea posible. Por defecto, los navegadores muestran una línea antes y después de un <div>, comportamiento que puede cambiarse utilizando CSS. Puede utilizarse con sus atributos class, lang y title.
<span>. Representa una agrupación de varios elementos en línea para formatearlos con CSS o manipularlos con JavaScript, permitiendo de este modo seleccionar parte del contenido de una etiqueta superior. No aporta ningún significado semántico.
Algunas etiquetas (tags) interesantes en HTML5
<address>. Debe contener información de contacto acerca del documento o de parte del documento, como links a los autores, páginas web, direcciones de email, etc. Por ejemplo, puede utilizarse en los pies (<footer>).
<header>. Representa la cabecera de una sección (<section>), artículo (<article>), o de una página web, pudiendo contener una tabla de contenido, un logo, encabezados (<h1> - <h6>), un formulario de búsqueda, elementos de navegación, etc. Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”header”>, algo que ahora queda obsoleto.
<footer>. Representa el pie de una sección (<section>), artículo (<article>), o de una página web, pudiendo contener información de Copyright, notas legales, elementos de navegación, información de contacto (<address>), etc. De este modo, una página puede contener varias secciones, cada una con su pie (<footer>) más un pie adicional para la propia página. Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”footer”>, algo que ahora queda obsoleto.
<section>. Representa un documento genérico, que usualmente tiene una estructura (encabezado, contenido, y pie). Salvo rara excepción, no debería utilizarse la etiqueta <section> si no hay un encabezado natural para ella. No se trata de un contenedor estrictamente por razones de estilo, ya que en ese caso utilizaríamos la etiqueta <div>. Tampoco debe utilizarse cuando las etiquetas <article>, <aside> o <nav> son más apropiadas.
<article>. Representa un componente de una página, como puede ser una artículo de una revista, una entrada de un Blog, una entrada de un Foro, o cualquier elemento independiente de contenido (ej: el contenido de una página Acerca De). En ocasiones es confundido con las etiquetas <section> y <div>, aunque la etiqueta <article> es una especialización de la etiqueta <section>. Puede tener sus encabezados (<header>, <h1> - <h6>, etc.), sus diferentes secciones (<section>), y su pié (<footer>). Por ejemplo, sería posible definir la entrada de un Blog como un elemento <article>, y en su interior de forma anidada cada comentario también podría definirse como elementos <article> dentro de una sección (<section>) específica para los comentarios.
<nav>. Debe contener un conjunto de enlaces de navegación (<a>) que represente un bloque principal de enlaces de navegación (ej: una tabla de contenidos, la miguitas, elementos de paginación previous/next, etc.). Puede utilizarse en un artículo (<article>), sección (<section>), en una cabecera (<header>), o incluso a nive de la página web, aunque no suele utilizarse en el pie (<footer>). Tradicionalmente, lo que se utilizaba en su lugar era una capa, del tipo <div id=”nav”>, que contenía una lista no-ordenada (<ul>) con los enlaces (<a>) como elementos de lista (<li>), algo que ahora queda obsoleto.
<aside>. Cuando es utilizado dentro de un artículo (<article>) su contenido debe estar específicamente relacionado con dicho artículo (ej: un glosario). Cuando es utilizado fuera de un artículo (<article>) su contenido debe estar relacionado con el sitio web o con la página web (ej: blogroll, grupos de navegación adicionales, e incluso publicidad).
<menu>.
<code>.
<figure>.
<cite>.
<time>.
<audio>.
<video>.
Otras recomendaciones para la utilización de HTML5
Existen varias recomendaciones que debemos evaluar al realizar un desarrollo Web basado en HTML5.
- No utilizar la etiqueta <font>. El formateo del texto debe realizarse utilizando estilos, evitando utilizar HTML para estas labores de presentación.
- No utilizar las etiquetas <b> e <i>. En su lugar utilizar las etiquetas <strong> y <em>.
- No utilizar la etiqueta <table> para ajustar o distribuir los contenidos en la página. La etiqueta <table> sólo debe utilizarse para contener información tabular, como un grid de resultados.
- No utilizar los atributos relacionados con la presentación, ni en la etiqueta <body>, ni en ninguna otra etiqueta. En su lugar deben utilizarse estilos CSS, para controlar todos estos detalles (incluso para las etiquetas <body> y <html>): bordes, colores, alineación, márgenes, imágenes de fondo, etc.
- No abusar de la etiqueta <br>. Considerar la utilización de estilos CSS para controlar los márgenes en los diferentes elementos (ej: <p>, <h1> - <h6>, etc.).
- Utilizar encabezados <h1> - <h6> para indicar la importancia relativa del texto. Deben utilizarse de forma consecutiva, es decir, a un <h1> no debe seguirle un <h4>.
- No abusar de la utilización de la etiqueta <div>. Por ejemplo, una barra de navegación puede representarse con una lista (<ul>). Además, en HTML5 están disponibles nuevas etiquetas como <section>, <header>, <footer> o <article>, que pueden utilizarse en lugar de <div>, y además aportan un valor semántico.
- Utilizar las etiquetas <dl> (definition list), <dt> (definition term), y <dd> (definition description) siempre que sea necesario. En lugar de incluir como simple texto las listas de definiciones de términos, es recomendable utilizar las etiquetas existentes para ello (<dl>, <dt> y <dd>). Téngase en cuenta, que para un término <dt> (ej: Autor) pueden existir varios elementos de definición <dd> (ej: varios autores).
Una última recomendación bastante importante es validar el código HTML y CSS que estemos creando. Hay varias formas de realizar esto, de las cuales, quizás la más sencilla sea utilizar los validadores HTML y CSS disponibles OnLine que ofrece el W3C:
Además, deberemos probar nuestra Página Web en diferentes Navegadores, para garantizar que se muestra bien en todos ellos (ej: Diferentes versiones de IE, FireFox, Google Chrome, etc.).
Y si lo deseamos, recordar que podemos utilizar Minificadores de Código (HTML, CSS, JavaScript, y demás) para conseguir un código más ligero, minimizando el tiempo de descarga.
Despedida y Cierre
Hasta aquí llega el presente artículo, que espero poder actualizar algo más con el paso del tiempo. Por último, antes de acabar, quería añadir algunos enlaces de interés:
Poco más por hoy. Como siempre, confío que la lectura resulte de interés.
