¿Qué es HTML5? novedades del nuevo stándard I

Estructura bien diferenciada y clara

• header: Sirve para delimitar la cabecera de una página web. En el caso de Blorgia.com, es el título y los 3 artículos que mostramos.


• nav: Es la  sección dedicada a la navegación entre el sitio, donde nosotros hemos puesto la dirección de navegación.


• article: Con él delimitamos un contenido independiente en un documento, como podría ser 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.


• section: Sirve para representa una sección “general” dentro de una web. En un blog sería el post. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.


• aside: Sirve para mostrar contenido "poco relacionado" como por ejemplo, nuestras menús de navegación de la izquiera y derecha donde inclumos los canales.


• footer: Para cerrar una página, es el pié de la página web. Con la típica información acerca de la página que no tiene nada que ver con la temática de la página, como el autor, el copyright, etc...

Mejoras en los formularios

• datetime, datetime-local, date, month, week, time, para 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.

Otros elementos importantes

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que 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. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).


• 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. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Más elementos

• command: Para indicar un comando que el usuario puede ejecutar en su navegador.


• datagrid: Muy útil en ajax, representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información.


• dialog: se plantea para escribir conversaciones, por ejemplo para transcripciones de chat. No parece útil, pero sigue en la línea de declarar qué es cada cosa en la web.


• 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, por ejemplo para resaltar una búsqueda.


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


• progress: representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.


• output: representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.


• time: representa una fecha o una hora.