HTML5 - Introducción

Publicado en Tema 6º : Internet

HTML5 está llamada a ser el reemplazo del actual (X)HTML. HTML5 ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad.

Durante bastante tiempo se ha abusado bastante del elemento div, que nos permite estructurar una web en bloques. 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, 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.
  • 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 marcados semánticamente.
  • 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. En muchos sitios se utiliza con todo lo relacionado con redes sociales.
  • 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 pie 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 dentro del sitio, como la típica barra superior de las aplicaciones de escritorio.

Antes, utilizando HTML o XHTML, teníamos esta estructura

html

Y ahora, utilizando HTML5, tenemos esta estructura

html5

HTML5: Los Formularios...

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

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

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com).

HTML5: Elementos multimedia y más...

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

 

 

Utilidades ...

imprescindibles Firefox Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Recursos

aulav

Visitas...

Hoy 38

Ayer 57

Mes 1146

TOTAL 153691

En Línea...

Hay 35 invitados y ningún miembro en línea