Conecta tu Empresa

El problema de ambos lados del argumento es que muy pocos sitios están utilizando HTML 5 en realidad, por lo que las soluciones teóricas a los problemas percibidos permanecen sin ser puestos a prueba.

Dicho lo cual, no es difícil ver ambos beneficios y posibles cuelgues con la próxima generación de herramientas de marcado web.

Contenido

1. Lo que es diferente en HTML 5?
2. Finalmente, un DOCTYPE que pueda recordarse
3. Estructura semántica, por fin
   1. <header> <header>
   2. <nav> <nav>
   3. <section> <section>
      • <article> <article>
      • <aside> <aside>
      • <footer> <footer>
   4. Poniendo todo junto
   5. Estilizando las nuevas etiquetas
   6. Compatibilidad con navegadores antiguos
   7. Bien, ahora puede usar HTML 5, pero debería?

1. Lo que es diferente del HTML 5?

En primer lugar, ¿qué queremos decir con HTML 5? Idealmente, nos referimos a un todo - nuevas etiquetas semánticas estructurales, las especificaciones de la API como lienzo o almacenamiento fuera e incluso algunas nuevas etiquetas semánticas en línea. Sin embargo, por razones prácticas (léase: problemas de soporte del navegador) vamos a limitar esta introducción sólo a las etiquetas estructurales. Tan frescos como lienzo, almacenamiento fuera de línea, video nativo o API's de geolocalización, estos no cuentan consistentemente con el soporte de todos los navegadores todavía.

"Pero espera," dices, "la mayoría de los navegadores no soportan ningún nuevo elemento estructural!" Esto es cierto, pero la gran mayoría de ellos estará feliz de aceptar cualquier etiqueta que desee maquillarlos. Incluso Internet Explorer 6 puede hacer frente a los nuevos elementos, sin embargo si desea aplicar estilos mediante CSS, necesitará un poco de ayuda de JavaScript.

Lo único a tener en mente cuando se están aplicando estilos a las nuevas etiquetas es que las etiquetas desconocidas no tienen estilo por defecto en la mayoría de los navegadores. También son tratadas como elementos en línea. Sin embargo, ya la mayoría de las nuevas etiquetas de HTML 5 son de carácter estructural, vamos a querer que se comporten como elementos de bloque. La solución es asegurarse de incluir display:block; en sus estilos CSS.

Para ayudar a dar algún sentido a lo que hay de nuevo en HTML 5 hoy, investiguemos y comencemos a utilizar algunos de los nuevos elementos estructurales.

2. Finalmente, un DOCTYPE que pueda recordarse

Lo primero que tenemos que hacer para crear un documento HTML 5 es usar un "DOCTYPE" nuevo. Ahora, si usted ha memorizado el código doctype de HTML o XHTML 1.x 4, es mejor "mono" que nosotros. Cada vez que comienzamos una nueva página tenemos que traer una vieja y cortar y pegar la definición DOCTYPE.

Es un dolor, razón por la cual amamos los nuevos DOCTYPE HTML 5. ¿Está usted listo? Aquí está:


No debería ser demasiado difícil meter este código a la memoria. Simple y obvio. Insensible a mayúsculas y minúsculas.

La idea es dejar de hacer versiones de HTML para que la compatibilidad hacia atrás sea más fácil. Sea o no exitoso en el largo plazo eso es otra historia, al menos mientras tanto le ahorra algo de tecleo.

3. Estructura semántica, por fin

OK, hemos definido nuestra página como un documento HTML 5. Hasta aquí todo bien. Ahora, ¿qué son essas nuevas etiquetas de las que hemos estado oyendo?

Antes de sumergirnos en las nuevas etiquetas, tenga en cuenta la estructura de su página web promedio, que (en general) se ve como esta:


Eso está bien para fines de presentación, pero lo que si queremos saber algo acerca de lo que contienen los elementos de página?

En el ejemplo anterior, hemos añadido identificadores a nuestras divs estructurales. Esta es una práctica bastante común entre los diseñadores experimentados. El objetivo es doble - en primer lugar, los identificadores proporcionan ganchos que pueden ser utilizados para aplicar estilos a secciones específicas de la página y en segundo lugar, los identificadores sirven como una estructura primitiva, pseudo-semántica. Los programas inteligentes de análisis verán los atributos de los identificadores en una etiqueta y trataran de adivinar lo que quieren decir, pero es difícil cuando los nombres de identificación son diferentes en cada sitio.

Y ahí es donde vienen las nuevas etiquetas estructurales.

Reconociendo que estos identificadores eran una práctica común, los autores de HTML 5 han dado un paso adelante y puesto algunos de estos elementos en sus propias etiquetas. Aquí está una rápida descripción de las nuevas etiquetas estructurales presentes en HTML 5:

<header>

La etiqueta de cabecera está pensada como un contenedor de información introductoria, sobre una sección o una página web entera. La etiqueta <header> puede incluir desde el típico logotipo / eslogan que se ve encima de la mayoría de páginas, a un titular que introduce una sección. Si usted ha estado usando <div id="header"> en sus páginas, esa sería la etiqueta a reemplazar con <header>.

<nav>

El elemento <nav> se explica por sí mismo - los elementos de navegación van aquí. Por supuesto, lo que constituye la navegación es un tanto discutible - hay navegación primaria del sitio [los menús], pero en algunos casos también puede haber elementos de navegación en la página. Los creadores "WHATWG" de HTML 5 (Web Hypertext Application Technology Working Group), modificaron recientemente la explicación de la etiqueta <nav> para mostrar cómo podría ser utilizada dos veces en la misma página.

Para más información sobre la etiqueta <nav> y un animado debate sobre HTML 5, vea el artículo de Jeffrey Zeldman sobre el elemento <nav>.

El cuento es que si usted ha estado usando una etiqueta <div id="nav"> para manejar su navegación de páginas, puede reemplazarla con una simple etiqueta <nav>.

<section>

La etiqueta <section> es probablemente la más nebulosa de las nuevas etiquetas. Según laespecificación de HTML 5, una sección es una agrupación temática de contenidos, precedida por lo general por una etiqueta de cabecera y seguida por una etiqueta de pie de página. Pero las secciones también pueden anidarse una dentro de otra, si es necesario.

En nuestro ejemplo anterior, el div llamado "content" sería un buen candidato para convertirse en una sección. Luego, dentro de esa sección, en función del contenido, podría haber secciones adicionales.

<article>

Según las notas de WHATWG, el elemento artículo debe envolver "una sección de contenido que forma parte independiente de un documento o sitio, por ejemplo, una revista o artículo de periódico, o una entrada de blog."

Tenga en mente que usted puede tener más de una etiqueta de artículo en la página, por ejemplo la página principal de un blog puede tener los últimos diez artículos, cada uno envuelto en una etiqueta de artículo. Los artículos también se pueden separados en secciones usando la etiqueta <section>, aunque usted querrá ser un poco cuidadoso en la planificación de su estructura, de lo contrario podría terminar con una fea sopa de etiquetas.

<aside>

Otra etiqueta bastante nebulosa, el elemento <aside> es para el contenido "tangencialmente relacionado con el contenido que forma el flujo de texto principal de un documento." [1] Esto significa una observación entre paréntesis, notas al pie, citas, anotaciones y los más típicos contenido secundario laterales (como los que vemos a la derecha de este artículo).

De acuerdo con las notas de la WHATWG parece que <aside> funcionaría en todos esos casos, a pesar del hecho de que no hay gran diferencia entre una nota al pie y una nube de etiquetas en la barra lateral.

Hey, nadie dijo HTML 5 fuera perfecto!

<footer>

El pie de página también se explica por sí mismo, excepto, quizá porque se puede tener más de uno. En otras palabras, las secciones pueden tener pies de página, adicionales a los pies de página principales, generalmente encontrados en la parte inferior de la mayoría de las páginas.

Poniendo todo junto

OK, vamos a reescribir el ejemplo original usando las nuevas etiquetas:


Mucho más limpio y más fácil de entender, ¿verdad? Un par de notas: podríamos haber envuelto nuestra<h1>My Article</h1> título en etiquetas <header>. Opté por no hacerlo, ya que el elemento h1 ya transmite el propio encabezado, pero si además tiene una fecha de publicación, una línea de autoría u otros datos sobre la el artículo o entrada, el grupo de etiquetas sería buen candidato para agregar una etiqueta contenedora<header>.

Note además que se podría añadir un segundo pie de página por debajo del elemento artículo para contener cosas como la navegación próxima / previa, entradas relacionadas u otros contenidos.

Estilizando las nuevas etiquetas

En la mayoría de los navegadores, todo lo que necesita hacer es simplemente definir sus estilos como lo haría normalmente con el fin de aplicarlos a estos nuevos elementos. Pero asegúrese de agregar la regladisplay:block; a cada elemento - de todos modos por ahora. Con el tiempo, cuando los navegadores comiencen normalmente a soportar los nuevos elementos, ya no será necesario.

Por ejemplo, vamos a aplicar estilos a nuestra cabecera:


Tenga en cuenta que aún puede agregar clases e identificadores de atributos a estas etiquetas. Así que, si quería dar estilo a una sección de navegación por separado, usted simplemente tiene que añadir una clase o un ID a la etiqueta de este modo:


A continuación, puede aplicar un estilo:


Compatibilidad con navegadores más antiguos

Pero espere, ¿qué pasa con Internet Explorer? Ninguno de estos estilos están trabajando en IE6. Si todavía necesita soportar navegadores heredados como IE, hay un punto. IE6 analiza y muestra estas etiquetas muy bien, pero no les aplicará ningún CSS. La solución es usar un poco de JavaScript.

Todo lo que necesitamos hacer para que IE aplique estilo a nuestras etiquetas HTML 5 es utilizar el métodocreateElement para que IE6 se de cuenta de las nuevas etiquetas. Añadir este poquito a la cabeza de su archivo HTML 5. O bien, puede guardarlo en un archivo por separado e incluirlo de esa manera.


Sé lo que está pensando: "Oye, que no se especificó un tipo MIME para esa etiqueta script."

No necesita hacer eso en HTML 5. En HTML 5, se asume que todos los scripts son type="text/javascript" por lo que no hay necesidad de saturar más las etiquetas de sus scripts con atributos (a menos que su script no sea de JavaScript).

Eso corrige los problemas de IE, pero no estamos fuera de peligro aún. Resulta que hay un error en el motor de renderizado Gecko que hace que Firefox 2 y algunas versiones de Camino se atraganten con estas etiquetas también.

Hay dos maneras de evitar este error, ninguna de los cuales es ideal. Para más información, eche un vistazo a este artículo en HTML5doctor. El mismo artículo también tiene un guión con todos los elementos de HTML 5 por venir.

Hay que tener en cuenta, sin embargo que las estadísticas de uso de Firefox 2 caen rápidamente por debajo del 10 por ciento para todo el tráfico web, de modo de hacer caso omiso de este error sería una posibilidad que dependa de la audiencia de su sitio.

Bien, ahora puede usar HTML 5, pero debería?

La respuesta corta es sí.

La respuesta larga es que depende del sitio. Si está empecinado en recrear la página de CNN, bueno, es posible que desee esperar un poco, hasta que el soporte del navegador mejore. Pero si está renovando su blog, adelante. Incluso hay algunos plugins de WordPress que pueden ayudar si está usando este particular sistema de publicación. Aquí hay un tema de HTML 5 por Jeff Starr.

Además, eche un vistazo a los sitios que presentados en HTML 5 Galería y vea el código fuente para saber lo que están haciendo.

Sin embargo, si la deficiencia de IE le detiene, considere esto: incluso Google está usando HTML 5 doctypeen su página de búsqueda principal. Incluso si no utiliza todas las nuevas etiquetas estructurales por lo menos puede sacar provecho de cosas como declaraciones de scripts más cortas, y algunas de las etiquetas semánticas no estructurales que cubrire la próxima vez.

Fuente: Webmonkey
Traducción: SIP