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 llegó a su versión 5 con cambios. De este modo HTML5 ha incluido nuevos elementos por primera vez en el último milenio. Veamso entonces con todo detalles cuáles son  los Nuevos elementos en HTML 5, la quinta versión del lenguaje de la web.

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

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 un 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 : Puede 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….Define el contenido relacionado tangencialmente con el contenido que lo rodea, como los enlaces de lectura relacionados y los glosarios, que pueden estar anidados dentro de un elemento del artículo.
• figcaption:Define un título para un elemento figure.
• figure : Se utilizará para representar una imagen.Además, se utiliza junto con el elemento
  para marcar diagramas, ilustraciones, fotos y listados de códigos, etc.
• header: No debe confundirse con el elemento «head», la etiqueta «header», normalmente contiene el encabezado de la sección (un elemento h1? H6), así como otro contenido, como enlaces de navegación, tabla de contenido, formulario de búsqueda, o cualquier logotipo relevante.
• footer: Para contenido ubicado en la parte inferior de la página web o sección más cercana. Un pie de página generalmente contiene información sobre su sección, como quién lo escribió, enlaces a documentos relacionados, datos de derechos de autor, etc. A su vez, puede contener secciones completas, con apéndices, índices, acuerdos de licencia y otro contenido similar.
• main:Delinea el contenido principal del cuerpo de un documento o aplicación web. Como tal, el área de contenido principal contiene contenido que está directamente relacionado o se expande sobre el tema central de la página. Además, ayuda a los lectores de pantalla y otras tecnologías de asistencia a comprender dónde comienza el contenido de la página principal.
• mark: Pretende llevar la atención del lector a una parte del texto debido a su relevancia contextual.
• nav:Indica una sección con enlaces de navegación, ya sea a otras páginas o a partes dentro de la misma página.
• section: A diferencia de la etiqueta, que se usa para una gran variedad de propósitos, entre los cuales el formato de contenido, el elemento «section» delimita un grupo temático de contenido. Cada sección incluye típicamente un elemento de encabezado y contenido asociado dentro de DIV y párrafos. Los ejemplos incluyen introducción, entradas de blog e información de contacto.
• summary: Un elemento opcional que resume el contenido del elemento de detalles padre. Como tal, puede contener una descripción, título o leyenda.
• time: Contiene contenidos amigables para el ser humano, junto con una forma legible por la máquina de esos contenidos en el atributo datetime. Los tipos de contenido van desde varios tipos de fechas hasta horas, compensaciones de zona horaria y duraciones.
• 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. Produce además una caja expandible para mostrar información adicional. El comportamiento de expansión / contracción no depende de las secuencias de comandos, por lo que debería funcionar incluso si JavaScript está deshabilitado o no es compatible.
• datagrid: Una tabla, una recopilación de datos formateados
• menu: Un listado, un menu….

Además :

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

Elementos de nivel de texto

Además de lo mencionado, tenemos que hablaros de los elementos de nivel de texto

• bdi: Define una parte del texto que podría tener el formato en una dirección diferente a la de otro texto.
• wbr:Define un posible salto de línea en el texto que se escribe como una palabra larga.

Nuevos elementos de formulario

HTML5 introduce una serie de nuevos tipos de entrada, atributos y otros elementos al lenguaje HTML.

• datalist: Define las opciones predefinidas para los controles de entrada. Funciona de manera similar a un cuadro de texto autocompletado.
• keygen: Define un campo generador de pares de claves (para formularios). Cuando se envía el formulario de control, la clave privada se almacena en el almacén de claves local, y la clave pública se empaqueta y se envía al servidor.
• output: Define el resultado de un cálculo.
• progress:Presenta una barra de progreso que rastrea el progreso de una tarea.

Nuevos tipos de entrada

HTML5 introdujo una serie de nuevos tipos de entrada para formularios que abordan los requisitos específicos de comportamiento y formato que faltaban para la especificación HTML 4.01. Por ejemplo, manejar la introducción de fechas, números, números de teléfono, etc.

Sintaxis de atributos más relajados

En HTML5, los valores de los atributos pueden estar delimitados por comillas simples o dobles o, en el caso de entradas de una sola palabra, sin ninguna de las dos. Los atributos sin un valor (como deshabilitado) no requieren un igual o comillas (= «»).

Elementos graficos

Define el dibujo gráfico usando JavaScript Define el dibujo gráfico usando SVG

Elementos de los medios

A medida que Internet se convierte en una experiencia multimedia más inmersiva, los navegadores ahora están equipados para manejar muchos tipos de medios sin la necesidad de complementos adicionales. Un buen ejemplo es el elemento «embed» que se debe a una explosión en el intercambio de videos de YouTube.

• audio: Define el sonido o el contenido musical.
• embed: Define contenedores para aplicaciones externas (generalmente un reproductor de video)
• source: Define fuentes para video y audio
• track: Define pistas para video y audio
• video: Define contenido de video y audio

Fijaos las inmensas posibilidades 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.

Tras explicaros todas las novedades y elementos, queremos dejaros además este vídeo en el que se explica todo el proceso de actualización de HTML 5:

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