HTML5 sigue en borrador y lo seguirá  durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle . Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

* section representa una sección “general” dentro de un documento o aplicación, comoun capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.

* article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.

* aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.

* header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.

* 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.

* nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos

* datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.

* number para que el usuario indique un número.

* range para indicar un rango entre dos números.

* email para indicar un correo electrónico.

* url para indicar una dirección web.

* search para indicar una búsqueda.

* color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato.

Otros elementos importantes

* audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo.

* embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.

* canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él.

Otros elementos:

* dialog se plantea para escribir conversaciones.

* figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.

* mark representa un texto resaltado.

* meter representa una medida, como el número de KB.

* progress representa el estado de una tarea. Esto permitirá barras de tareas personalizadas y potentes.

* time representa una fecha o una hora.

* command representa un comando que el usuario puede ejecutar en su navegador.

* output representa una salida de un programa, probablemente ejecutado directamente en el navegador.

* datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Añaden nuevos atributos, que son:

* Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace.

* Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página.

* Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página

* Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario.

* Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos.

* Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos

* Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado

* Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento.

* Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.

* Atributo manifest en el elemento html. Esto permite indicar nuevos elementos.

* Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente.

Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento.

* Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos.

* Atributo contenteditable, para indicar que el elemento es editable por el usuario.

* Atributo contextmenu, para indicar un menú contextual sobre un elemento.

* Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados.

* Atributo draggable, para indicar que un elemento se puede arrastrar.

* Atributo hidden, para ocultar un elemento que ya no interesa.

* Atributo spellcheck, para indicar.

Nuevas APIs

No está claro que todas las APIs siguientes se vayan a incluir en el estándar HTML5 propiamente. De cualquier forma, estas son las nuevas APIs que nacen o se desarrollan en HTML5:

* Una API para dibujar en 2D, que se podrá usar junto al nuevo elemento canvas.Se pueden pintar elementos sobre un lienzo.

* Una API para controlar los nuevos elementos multimedia, video y audio. Así podremos controlar la reproducción con código Javascript.

* Una API para guardar datos localmente, utilísimo para que las aplicaciones web puedan trabajar sin necesitar conexión a Internet. Ese DOM storage está ya implementado en las últimas versiones de los grandes navegadores.

* Una API para que las aplicaciones web puedan enlazarse a protocolos o tipos de archivos MIME, otro añadido extremadamente útil. Esto permitiría abrir las fotos de tu disco duro directamente en una aplicación de retoque online, etc…

* Una API para editar los campos que sean editables.  Esto permite controlar los elementos HTML que son editables por el usuario, tipo Word.