Fuente: http://theproc.es/2010/1/29/12236/manual-de-html5-en-espanol—1-de-3

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de programación “básico” de la World Wide Web, el HTML. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizandolo a nuevas necesidades que demanda la web de hoy en día.

Debido a que estos cambios afectaran la forma de desarrollar la web en un futuro inmediato, desde The Process, plantearemos una serie de artículos donde desvelaremos los cambios más importantes.

Actualmente el HTML5 está en un estado BETA (Enero 2010), aunque ya algunas empresas están desarrollando sus sitios webs en esta versión del lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios webs (facebook, twenti, etc), donde su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos.

Mejor estructura

Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos:

• <section></section> – Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo mu favorable para el buen posicionamiento web.
• <article></article> – El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>.
• <aside></aside> – Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página.
• <header></header> – Elemento <header> representa un grupo de artículos introductorios o de navegación.
• <nav></nav> – El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación.No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas co el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>.
• <footer></footer> – El elemento <footer> representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.Veamos las Diferencias entre HTML y HTML5

Mejoras en los formularios

El elemento input adquiere gran relevancia al ampliarse los elementos que se permitiran en el “type”.

<input type=”search“> para cajas de búsqueda.

<input type=”number“> para adicionar o restar números mediante botones.

<input type=”range“> para seleccionar un valor entre dos valores predeterminados.

<input type=”color“> seleccionar un color.

<input type=”tel“> números telefónicos.

<input type=”url“> direcciones web.

<input type=”email“> direcciones de email.

<input type=”date“> para seleccionar un día en un calendario.

<input type=”month“> para meses.

<input type=”week“> para semanas.

<input type=”time“> para fechas.

<input type=”datetime“> para una fecha exacta, absoluta y tiempo.

<input type=”datetime-local“> para fechas locales y frecuencia.

Otros elementos muy interesantes

• <audio> y <video> – Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash.El comportamientos de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imagenes, por ejemplo. Youtube, ya ha anunciado que deja el Flash y comienza a proyectar con HTML5.
• <embed> – Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>.
• <canvas> – Este es un elemento complejo que permite que se generen gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los desarrolladores crear aplicaciones muy interessantes.

Elementos INLINE

HTML5 introduce nuevos elementos “inline” muy útiles para aumentar nuestro existente arsenal de “span, strong, em, abbr, etc”. A partir de ahora a estos elementos ya no se les llamará “inline”, sino “text-level semantics.”

mark

Cuando revisamos un listado de una búsqueda en una web, usualmente vemos el término por el que hemos buscado iluminado o resaltado dentro de cada resultado. Por lo general se marca cada instancia del término de búsqueda con un elemento span, pero span desde un punto de vista semántico, se queda un poco cojo, ya que realmente sirve para poco más que aplicarle una clase específica a un elemento dentro de un estilo ya definido.Se podría utilizar em o strong pero semánticamente no sería correcto ya que no querrías otorgarle una “importancia” al término de búsqueda, simplemente queremos que de alguna manera quede resaltado.Introduzcamos el elemento mark:

<h1>Resultado de búsqueda para 'unicornio'</h1>
<ol>
  <li>
  <a href="http://www.3sellers.com/">Leyendo el Gran   <mark>unicornio</mark> azul.</a>
  </li>
</ol>

El elemento mark no lleva implícito ninguna importancia para el contenido salvo el mostrarlo como algo de interés en el contexto en que esté. Según la especificación, mark denota fragmento de texto de un documento marcado o iluminado con fines de referencia debido a su importancia en otro contexto.

meter

El elemento meter puede ser utilizado para marcar medidas, siempre que esas medidas sean parte de una escala con valores mínimos y máximos.

<meter>9 de 10 gatos</meter>

No es obligatorio escribir el valor máximo si no quiere, para eso se puede utilizar el atributo max.

<meter max="10">9 gatos</meter>

Existe un atributo min correspondiente. También se puede utilizar los atributos high, low, y optimum. Si lo desea, puede incluso ocultar la medición dentro del atribulo value.

<meter low="-273" high="100" min="12" max="30" optimum="21" value="25">Hace bastante calor en esta época del año.</meter>

progress

Mientras el elemento meter es muy bueno para describir algo que ya ha sido medido. El elemento progress te permite marcar un valor que está en proceso de cambio.

Su perfil está <progress>60%</progress> completado.

Otra vez se pueden utilizar los atributos min, max, y value:

<progress min="0" max="100" value="60"></progress>

El elemento progress es más útil cuando se utiliza combinado con DOM Scripting. Se puede utilizar JavaScript para actualizaciones dinámicas del valor, permitiendo al navegador comunicar el cambio al usuario. Muy útil para cargar archivos con Ajax.

Estructura

HTML5 presenta una estructura basada en la experiencia de los desarrolladores de HTML y CSS. Tras haber valorado un millón de páginas y haber tabulado los nombres más comunes que se le asigna a los elementos class, nombres como “header, footer y nav” prevalecieron.

section

El elemento section es usado para agrupar por temas contenido relacionado. Eso suena muy similar al elemento div, que suele utilizarse como contenedor de contenido genérico. La diferencia es que div no tiene sentido en la semántica; no te dice nada sobre el contenido que lleva dentro. El elemento section, por otra parte, se utiliza de forma explícita para agrupar contenido relacionado.

Usted podría sustituir a algunos de sus elementos div con elementos section, pero recuerde siempre preguntarse ¿Está todo el contenido relacionado?

<section>
  <h1>Ave del paraíso</h1>
  <p> Narrativa policíaca y de intriga/Novela negra.</p>
  <p> CAROL JOICE</p>
</section>

header

Especialistas en HTML5 describen al elemento header como un contenedor de “a group of introductory or navigational aids”, que viene siendo algo como: elementos que sirven como introducción o elemento para la navegación. Eso suena razonable. Ese es el tipo de contenido que yo esperaría encontrar en un encabezado, y en inglés la palabra “header” se utiliza a menudo como sinónimo de cabecera (masthead).Existe una diferencia crucial entre el elemento header en HTML5 y el uso aceptado y generalizado de la palabra encabezado o cabecera. Por lo general en una página existe una sola cabecera pero un documento puede tener múltiples encabezados, o lo que sería lo mismo múltiple elementos “header”. Se puede utilizar un elemento header dentro de un elemento section por ejemplo. Las especificaciones describen los elementos section como “a thematic grouping of content, typically with a heading”, o sea, una agrupación temática de contenido, generalmente con un encabezado.

<section>
  <header>
    <h1>Ave del paraíso</h1>
  </header>
  <p>Narrativa policíaca y de intriga/Novela negra.</p>
  <p>CAROL JOICE</p>
</section>

El elemento header aparecerá por lo general en la parte superior de un documento o section, no tiene que ser así obligatoriamente. Ha sido definido por su contenido —introductorio o elemento para la navegación— sea cual sea su posición.

footer

Como el elemento header, footer (pie) suena como su descripción y ubicación. En cambio, el elemento footer deberá contener información sobre sus elementos de contenido: quien lo escribió, información de copyright, enlaces a contenido relacionado, etc.Mientras estamos acostumbrados a tener un pie para todo un documento, HTML5 nos permite también tienen pies dentro de las secciones.

<section>
  <header> 
    <h1>Ave del paraíso</h1>
  </header>
  <p>Narrativa policíaca y de intriga/Novela negra.</p>
  <footer>
    <p>CAROL JOICE</p>
  </footer>
</section>

aside

Así como el header coincide con el concepto de un “tope superior”, el elemento aside (en inglés: a un lado) coincide con el concepto de una “barra lateral”. Cuando digo “barra lateral”, no me estoy refiriendo a la posición. El hecho de que algunos contenidos aparezcan a la izquierda o a la derecha del contenido principal no es razón suficiente para utilizar el elemento aside. Una vez más, es el contenido el que importa, no la posición.El elemento aside se debe utilizar para un contenido que esté relacionado tangencialmente. Si usted tiene un contenido que considera debe estar separado del contenido principal, entonces probablemente sería adecuado utilizar el elemento aside para que contenga esta contenido. Pregúntese si el contenido que hemos colocado dentro de aside puede ser eliminado y esta acción no resta o altera el significado del contenido principal del documento o de la sección.

Por poner un ejemplo del tipo de contenido del que hablamos, podemos mencionar frases entrecomilladas con notable relevancia. (Imagen) Es un contenido directamente relacionado con el contenido principal, pero si se eliminara, este último no perdería su comprensión ni su estructura semántica.Recuerde, sólo porque su diseño visual requiere un cierto contenido que aparezca en una barra lateral, no significa necesariamente que aside es el contenedor que debe contener los elementos correctos.

nav

El elemento nav hace exactamente lo que usted cree. Contiene información de navegación, por lo general una lista de enlaces.Aclaremos un poco eso. El elemento nav está destinado a la información de navegación principal. El hecho de que un grupo de enlaces se agrupan en una lista no es razón suficiente para utilizar el elemento nav. Toda la navegación del sitio, en cambio, casi con toda seguridad pertenece al elemento nav.Muy a menudo, un elemento nav aparecerá dentro de un elemento header. Eso tiene sentido si se considera que el elemento header se puede utilizar para “ayudas a la navegación” o colocar el menú principal.

article

Es correcto pensar en header, footer, nav, y aside como bloques específicos del elemento section. Una sección es un trozo genérico de contenido que está relacionado, mientras que header, footer, nav, y aside son trozos de tipos de contenido específicos relacionado.El elemento article es otro tipo de sección especializada. Se utiliza como contenedor de un tipo de contenido que esté relacionado consigo mismo. ¿Difícil de entender?Pregúntese si se sindicará el contenido en un RSS o Atom feed. Si el contenido todavía tiene sentido en ese contexto, entonces article será probablemente el elemento correcto a utilizar. De hecho, article es un elemento que está diseñado específicamente para sindicación de contenido.Si usted usa el elemento time dentro de un elemento article, tiene la opción de añadir un atributo Booleano pubdate para indicar que contiene la fecha de publicación:

<article>
  <header>
    <h1>Título de la página</h1>
  </header>
  <p>Qué lindo el Sol esta mañana en Calcuta</p>
  <footer>
    El Cambio climático en la India
   <p>Publicado
    <time datetime="005-10-08T15:13" pubdate>
3:13pm 12 de Octubre de 2010
    </time>
por José Pérez</p>
  </footer>
</article>

Si tiene más de un elemento time en un artículo, solamente podrá uno de ellos podrá contener el atributo pubdate.

El elemento article es muy útil para artículos de Bitácoras (Blogs), noticias, comentarios, críticas y artículos de foros.

Lo que es más problemático es que article y section son muy similares. Todo lo que les separa es la palabra o el concepto “relacionado entre sí”. Sería muy fácil si existiera una regla a seguir, pero en este caso todo se basa en la “interpretación”. Se puede tener múltiples article dentro de una etiqueta section, se puede tener múltiples section dentro de un article, se pueden anidar article dentro de article y section dentro de section. Es cuestión de cada uno la selección que semánticamente más se adecue a uno u otro elemento teniendo en cuenta que “todo” el contenido de section debe estar relacionado entre si, y el contenido de article, que ha sido pensado para artículos y puedan ser sindicados.