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 elementohead -
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 historiameter :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 videoaudio:En este caso un archivo de audiodetails:Más detalles sobre alguna cosadatagrid:Una tabla, una recopilación de datos formateadosmenu: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.
No te pierdas las promociones exclusivas para los lectores de Techlosofy. Por ejemplo rellenando este simple formulario puedes probar gratis 2 meses la revista de la OCU y te regalan una videocamara y una memoria USB
Artículos relacionados
Comentarios al artículo
1
Fecha: August 9, 2007 at 11:02 pm
[...] Contact the Webmaster Link to Article ajax Nuevos elementos en HTML 5, la quinta versión del lenguaje de la web. » [...]
2
Fecha: August 10, 2007 at 12:12 am
[...] Nuevos elementos en HTML 5 [...]
3
Fecha: August 10, 2007 at 2:14 am
[...] hemos publicado en Techlosofy, pero la verdad es que es muy interesante comentarlo: HTML5, la nueva versión del lenguaje HTML llegará con nuevos elementos por primera vez en este milenio. Sin duda este acercamiento a la web [...]
4
Fecha: August 10, 2007 at 3:29 am
[...] HTML5, la nueva versión del lenguaje HTML llegará con nuevos elementos por primera vez en este milenio. Sin duda este acercamiento a la web semántica cambiará mucho la vida de los webmasters. Elementos como aside, figure, section, time, meter, progress, video, audio, details, datagrid, command … abrirán nuevas posibilidades. El W3C introduce estos cambios porque 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) [...]
5
Fecha: August 10, 2007 at 8:57 am
El ejemplo de IBM me ha dado una muy buena impresión de lo que viene.
6
Fecha: August 10, 2007 at 9:54 am
[...] http://techlosofy.com Desarrollo de Software, Internet, [...]
7
Fecha: August 10, 2007 at 4:38 pm
Novedades entorno a HTML 5…
Como ya hemos ido contando, después de comparar HTML 5 vs XHTML 2.0 al final el W3C dijo adiós al XHTML, una decisión que no termina de convencerme. Sobretodo por los xi:include (un include(); de PHP pero en XML/XHTML 2.0 sin necesidad de lenguajes …
8
Fecha: August 14, 2007 at 12:39 am
[...] Elementos estructurales [techlosofy.com] [...]
9
Fecha: August 23, 2007 at 11:59 am
[...] Technosofy. Filosofía Tecnológica (Spanish webpage) Nuevos elementos en HTML5: http://techlosofy.com/nuevos-elementos-en-html-5-la-quinta-version-del-lenguaje-de-la-web/ [...]
10
Fecha: August 28, 2007 at 6:03 pm
[...] Nuevos elementos en el HTML 5 (techlosofy.com): La quinta versión del lenguaje de la web, el HTML, ya está aquí. En este post se hace una extensa revisión de los principales cambios. [...]
11
Fecha: October 23, 2007 at 12:14 am
[...] quieres saber mas sobre el futuro de HTML, nuestros amigos de Techlosofy hicieron un gran post al [...]
12
Fecha: November 11, 2007 at 7:36 pm
[...] pasada semana, te decíamos que si eras webmaster, y llevabas personalmente una web, blog o portal de Internet, estabas sin duda alguna de [...]
13
Fecha: January 8, 2008 at 2:24 am
[...] del desarrollo a nivel físico, nos brinda su aspecto espiritual conformando en su conjunto una filosofía de vida integral, que nos lleva a la armonía total de nuestro ser, así su nombre [...]
14
Fecha: January 20, 2008 at 6:21 am
[...] el factor de equilibrio, o desequilibrio, acorde a la ubicación, distribución, tamaño, formas, y elementos que ordenados por dicho arte, lograban la armonía y bienestar en todos los niveles tanto [...]
15
Fecha: January 23, 2008 at 11:25 pm
[...] tiempo, por el mundialmente conocido, Koji Kondo, él mismo que esta vez lo ha renovado en su nueva versión, pero con un nuevo toque en piano, la cual podremos oír [...]
16
Fecha: January 27, 2008 at 12:58 pm
loquesea
17
Fecha: May 28, 2008 at 6:57 pm
[...] nuevo HTML 5 incorpora nuevas etiquetas (aside, figure, section, time, meter, progress, video, audio, details, [...]
18
Fecha: May 30, 2008 at 2:06 am
[...] muchos otros que no pueden dejar de ver aquí y aquí. No cabe duda que será un gran paso para el HTML, ahora nos queda esperar pacientemente a que este [...]
19
Fecha: September 22, 2008 at 8:56 pm
Me parece bastante interesante, nos facilita bastante la vida, aunque siento que siempre se descuida un poco cuando no usas la web solo para leer si no para aplicaciones un poco mas complejas y aquí en esta síntesis no veo mucho al respecto, pero aun así, muy interesante.
20
Fecha: November 4, 2008 at 8:02 am
[...] solo tienen uno o dos sensores mientras que los modelos más evolucionados tienen 12 o 16 elementos colocados en una matriz lo cual permite que la toma de imagen sea mucho más [...]
21
Fecha: May 26, 2009 at 6:08 am
[...] estudio de todos los elementos que intervienen en la productividad en un intento de comprender los elementos que subyacen para aumentar la [...]
22
Fecha: June 12, 2009 at 6:00 am
[...] a analizar la información geográfica que hayan recogido. Los módulos 5 y 6 se dedican al desarrollo de sistemas GIS para diferentes medios. El módulo 7 incide el proceso de imágenes digitales y por [...]
23
Fecha: June 16, 2009 at 12:39 am
[...] estos estupendos enlaces que vale la pena leer: Artículo sobre HTML 5 en el blog Techlosofy (http://techlosofy.com/nuevos-elementos-en-html-5-la-quinta-version-del-lenguaje-de-la-web/) y un artículo del blog de IBM que cita también technology, New element in HTML 5 [...]












Últimos comentarios