UP

-     Escrito por gon

Nuevos elementos en HTML 5, la quinta versión del lenguaje de la web.

HTML, “Hypertext Markup Language” o como diríamos en español: Lenguaje marcado de hipertexto llega a su versión 5 con cambios. Según comentan en el W3C y en un fenomenal artículo de IBM, HTML5 incluirá nuevos elementos por primera vez en el último milenio.

Los nuevos elementos estructurales serán: aside, figure, y section. Pero aún hay más porque se incluirán también las otras etiquetas: time, meter, progress, video, audio, details, datagrid, command… Sin duda todo un gran paso hacia la web semántica.

La adición de nuevos elementos es sin duda una noticia impactante, sobre todo después de ver como el desarrollo del lenguaje HTML lleva parado desde 1999 con el lanzamiento de HTML4. El consorcio mundial de la web hasta ahora había estado centrado en el desarrollo de SGML, XML, XForms, RSS, CSS e incluso AJAX. Como comentan en el artículo de IBM, este cambio era necesario. Seguir utilizando un lenguaje de 1999 es seguir siendo hombres de las cavernas: Nuestros navegadores ahora tienen pestañas, utilizamos RSS y conocemos XML… sin embargo seguimos haciendo básicamente lo mismo que el milenio pasado: Tablas (<table>) y Párrafos (<p>)

Los nuevos elementos estructurales

Estos nuevos elementos van a dar mucho juego, por ejemplo a la hora de ver el código fuente de un blog, ya no será lo mismo. Muchos elementos div, cuyo identificador era muy común repetir ahora tienen su propio elemento HTML5. Veamos por qué.

  • section : Pued ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezamiento.
  • header : La cabecera de una página. No confundir con el elemento head
  • footer : El final de la página.
  • nav : Una colección de links a otras páginas
  • article : Una entrada independiente en un blog, revista, etc.

Podéis ver un ejemplo comparativo de código entre HTML4 y HTML5 en la web de IBM.

Hacia la web semántica

Estos nuevos elementos nos harán dar un paso más hacia la web semántica. Algunas páginas de hecho podrán cambiar del todo su código para incluir estas novedades:

  • aside : Es un bloque semántico que representa una nota, un consejo una explicación….
  • figure : Se utilizará para representar una imagen
  • dialog : Se utilizará para representar una conversación entre varias personas
  • time : Se utilizará para marcar un momento temporal en una historia
  • meter : Se utilizará para indicar ciertas medidas dependiendo de los atributos
  • progress: Representará el estado de cierto proceso
  • video: Siempre sabremos que entre estas etiquetas hay un video
  • audio: En este caso un archivo de audio
  • details:Más detalles sobre alguna cosa
  • datagrid: Una tabla, una recopilación de datos formateados
  • menu: Un listado, un menu….

El futuro de la web. Los buscadores, etc

Fijaos las inmensas posiblidades que se abren para el futuro. Desde luego los webmasters empezarán a adoptar HTML5 y los buscadores como Google mejorarán para dar prioridad a ciertas etiquetas para ciertas búsquedas. ¿Buscas algo en una fecha concreta? ¿Un formato determinado como video o audio? ¿Buscas un artículo, una definición o una conversación?

El nuevo mundo del posicionamiento web llegará muy pronto.

Más información: El futuro de la web | El futuro de HTML

Actualización: Un lector, completa nuestro resumen con las novedades de HTML5

  • Se añaden dos nuevos mecanismos para almacenar datos en el cliente, sessionStorage y globalStorage.
  • Se abre la posibilidad de tener una base de datos en el cliente y poder ejecutar consultas SQL (aún no está bien definido este apartado).
  • El elemento event-source, que permite tener una fuente de eventos externa (por ejemplo, <event-source src="http://www.host.com/script.cgi" onevent="process(event)">). Dicho de otra forma: eventos DOM enviados desde el servidor.
  • Posibilidad de realizar conexiones bidireccionales con el servidor mediante TCPConnection(), LocalBroadcastConnection() y PeerToPeerConnection().
  • Envío de mensajes entre documentos mediante postMessage().
  • El elemento canvas entra en la especificación.
  • Otro que entra es embed. Aquí parece que han dado la guerra por perdida con object (de ahí la inclusión también de elementos como audio y video).
  • Se añade el atributo contentEditable a todos los elementos.
  • Soporte para arrastrar y soltar.
  • Historial de deshacer para todos los cambios realizados en el DOM.

Techlosofy | Tecnología fácil

Newsletter