Contenido

Las principales diferencias entre HTML5 y HTML4

16 Jun

+ 44

Estamos en un momento del desarrollo web muy activo, llevamos cierto tiempo con gran cantidad de cambios, nuevas tendencias y sobretodo nuevas necesidades. Por esto me siento afortunado de estar viviendo esta oleada de cambios que a mi parecer algún día terminarán.

Un cambio que ahora estamos viviendo es el nacimiendo de HTML5, una nueva revisión del estandard que mueve Internet y hace posble que ahora estemos interactuando (los usuarios que leen la página).

El aumento de necesidades han dado lugar a la aparición de nuevos tags, el debate sobre el uso de otros y cambios más o menos importantes pero que debemos conocer.

1. Sintaxis

El término HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero no compatible con las características más esotéricas del SGML de HTML4.

HTML5 define detalladas reglas de parse, incluyendo un control de errores, para que esta sintaxis sea compatible con las implementaciones más populares. Los agentes de usuario seguirás las mismas reglas que para los que actualmente tienen text/html.

El otro sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que no es más que una sintaxis compatible con XML y documentos correctos en XHTML1. Los documentos servidos con esta sintaxis deben ser servidos mediante el MIME application/xml.

2. Codificación de carácteres

Al igual que sus hermanos menores, seguiremos podiendo definir el charset de nuestro documento mediante el tag <meta charset="UTF-8" > o la correspondiente versión de XML para XHTML5.

2.2. El DOCTYPE

El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al proncipio de la página, de esta forma nos aseguramos de que el navegador renderiza la página en modo estandard. En cambio para la versión XHTML5 este elemento es opcional debido a que XML actua de diferente manera dentro de nuestro navegador.

<!DOCTYPE html >;

3.1. Modelos estrictos de contenidos

HTML5 define de forma más estricta el contenido para elementos <div /> y <li />. Estos elementos ahora pueden contener contenido de elementos «block» o «inline» pero no los dos. En HTML4 esto fue considerado como un bug de la espeficación ya que permitía el uso de ambos.

Permitido: 

<div>
 <em>…</em> //contenido inline
 …
</div>
<div>
 <p><em>…</em></p>
 <p>…</p> //Contenido block
</div>

pero no permite esto:

<div>
 <em>…</em>
 <p>…</p>
</div>

Otro cambio afecta al elemento <tfoot />, ahora podrá aparecer al final de la página, al igual que directamente despues del elemento <thead />.

<table border="1">
 <caption>Nombre de la tabla</caption>
 <thead>
  <tr>
   <th scope="col">COLUMNA 1</th>
   <th scope="col">COLUMNA 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>DATOS 1</td>
   <td>DATOS 2</td>
  </tr>
  <tr>
   <td>DATOS 3</td>
   <td>DATOS 4</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th scope="col">PIE 1</th>
   <th scope="col">PIE 2</th>
  </tr>
 </tfoot>
</table>

3.2. Nuevos elementos

Los tiempos modernos requieren nuevos elementos para proporcionar una web más semántica, completa y homogenea. Para ello se han añadido una buena serie de elementos que nos permitirán encapsular más nuestro contenido.

  • <article /> elemento que nos permite declarar un trozo del contenido como artículo. Ideal para blogs o periódicos.
  • <aside /> representa un trozo de contenido que se relaciona muy levemente con el resto del contenido.
  • <dialog /> elemento que permite reprensetar conversaciones.

<dialog>
 <dt> Costello
 <dd> Look, you gotta first baseman?
 <dt> Abbott
 <dd> Certainly.
 <dt> Costello
 <dd> Who's playing first?
 <dt> Abbott
 <dd> That's right.
 <dt> Costello
 <dd> When you pay off the first baseman every month, who gets the money?
 <dt> Abbott
 <dd> Every dollar of it.
</dialog>
  •  <figure /> podrás usarlo para asociar con un caption un contenido incrustado, como por ejemplo gráficos o vídeo:
<figure>
 <video src=ogg>…</video>
 <legend>Example</legend>
</figure>
  • <footer />  parece que me han leido la mente o quizas leyeron este post. Sección de la página para contener información sobre el autor, copyright, etc,…
  • <header /> representa a la sección de cabecera.
  • <nav /> representa la sección de la página orientada a la navegación.
  • <section /> elemento que indica que se trata de una sección genérica.
  • <audio /> y <video /> para el contenido multimedia.
  • <embed /> es un elemento dedicado para contenido de plugins.
  • <m /> representa el texto marcado.
  • <meter /> usado para representar medidas, por ejemplo el tamaño del disco usado…
  • <time /> usado para mostrar fechas y/o tiempo.
  • <canvas /> usado para mostrar gráficos renderizados en tiempo real, por ejemplo gráficos, juegos, etc,…
  • <commnad /> relacionado con los comandos que el usuario puede invocar.
  • <datagrid /> ideal para mostrar un arbol de datos o una tabla tabulada.
  • <details /> muestra información adicionar si el usuario lo demanda.
  • <datalist /> junto con el nuevo atributo list para los <input /> puede ser usado para crear comboboxes:
<input list=browsers>
<datalist id=browsers>
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>
  • <event-sources /> puede ser usado para capturar eventos enviados desde servidor.
  • <output /> nos indica que tipo de salida vamos producir con nuestra página.
  • <progress /> representa una barra de proceso de una tarea, por ejemplo descargar,…

Los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para indicar los diferentes tipos de elementos de entrada posibles.

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

La idea es que estos tipos sean poporcionados por el agente de usuario (navegador) en su interface que submitarán el formato definido al servidor.

3.3 Nuevos atributos

HTML 5 ha introducido una gran cantidad de nuevos elementos para varios elementos de los que ya disponemos en la HTML4.

  • media: Para conseguir una mayor consistencia con el link en los elementos <a />
  • ping: Especificacremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a />
  • target:  Disponible para mejorar la consistencia con el elemento <a />.
  • autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
  • form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario.
  • replace: atributo para <input />; <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
  • data: Para <form />, <select />; y <datalist />.
  • required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
  • inputmode: Atributo para <input /> y <textarea />.
  • disabled: Para <fieldset />, permite desactivar el fieldset completo.
  • autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
  • list: Para elementos <datalist /> y <select />.
  • template: Para <input /> y <button /> podrá usarse para repetir templates.
  • scoped: Para elemento <style />, permitirá usar hojas de estilo «scoped» ??
  • async: Para el elemento <script /> el ajax hecho atributo.

Atributos globales

  • Aparte de los ya existentes: class, dir, id, lang y title.
  • contenteditable: indica que se trata de una área editable.
  • contextmenu: Puede ser usado como punto de menú contexctual proporcionado por el usuario.
  • draggable: indica que se trata de un elemento draggable.
  • tabindex: indica la posición numérica a la que llegaremos pulsando la tecla TAB.
  • irrelevant: atributo que indica que el contenido no es relevante.
  • repeat, repeat-start, repeat-min, repeat-max: atributos referentes a las iteraciones.

3.4 Elementos Cambiados

Estos elementos de HTML5 son imcompatibles con HTML4.

  • El elemento <a /> sin href ahora creará un enlace al sitio.
  • El elemento <address /> es ahora un nuevo concepto de sección.
  • El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia.
  • Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma.
  • <menu /> ha sido redefinido para ser usado con los actuales menús.
  • El elemento <small /> ahora representa una impresión pequeña.
  • El elemento <strong /> definitivamente representa el enfasis puesto en trozo de nuestro texto.

3.5 Elementos eliminados

En la nueva versión, algunos de los elementos anteriormente desaprovados pasan a ser eliminados definivamente.

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript (solo en XHTML5)
  • s
  • strike
  • tt
  • u

3.6 Atributos eliminados

Al igual que los elementos los atributos tambien pasarán a mejor vida.

  • rev y charset en <link /> y <a />
  • target en <link />
  • nohref en <area />
  • profile en <head />
  • version en <html />
  • name en <map />
  • scheme en <meta />
  • archive, classid, codetype, declare y standby en <object />
  • valuetype en <param />
  • charset en <script />
  • summary en <table />
  • header, axis y abbr en <td /> y <th />

4.1. Extensión de HTMLDocument

HTML5 tambien ha modificado el elemento padre del DOM Level 2. En él encontramos una serie de mejoras y otras que finalmente se hacen estandares:

  • getElementsByClassName(), para seleccionar elementos por el atributo class. Ya lo comentamos hace tiempo y vimos que las diferencias a nivel de tiempo de respuesta eran más que satisfactorias.
  • innerHTML, aunque prácticamente se usa en todas, o casi todas, las aplicaciones web existentes, por fín será reconocido como estandar en la especificación. Además aprovechando si insercción se posibilita su uso en el elemento padre.
  • activeElement, hasFocus(), nos permetirá conocer el elementos activo en tiempo real y el que tenga el foco.
  • getSelection(), devuelve un objeto con la selección actual.
  • designMode y execCommand(), muy usados para editar documentos.

4.2. Extensiones del Elementos HTMLElement.

A nivel de elemento el DOM tambien ha sufrido una serie de cambios que vale la pena comentar.

  • getElementsByClassName(), nos permite seleccionar los hijos de cualquier objeto que contengan una clase determinada.
  • innerHTML, nos permite leer/modificar el contenido de un nodo (al añadir crea nodos texto con etiquetas).
  • classList, una implementación muy interesante para vivir con className que nos permite interactuar con las clases de los elementos, proporcionando métodos como has(), add(), remove() y toggle() con los que podremos trabajar con las clases de nuestros elementos.
  • relList, funciona de igual forma que classList, pero sobre los atributos rel de <a />, <area /> y <link />.

17 comentarios, 27 referencias

+

#

  1. Las principales diferencias entre HTML5 y HTML4 | aNieto2K // menéame 17/06/2007 11:06
  2. Entradas en las blogosferas.4 - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo. 17/06/2007 08:06
  3. El HTML de los futuros blogs (HTML5) | aNieto2K 09/08/2007 02:08
  4. Nuevo html5 manual y diferencias. « hoteldipity - hoteldipity 14/08/2007 04:08
  5. Emergiatech news 23/08/2007 10:08
  6. El HTML de los futuros blogs (HTML5) 24/08/2007 08:08
  7. El circo del HTML5, peligro para el estandar | aNieto2K 07/09/2007 12:09
  8. Webkit integra tags HTML 5 para controles multimédia | aNieto2K 13/11/2007 03:11
  9. Diferencias entre en HTML 4 Y HTML 5 04/01/2008 05:01
  10. HTML 5 Working Draft publicado | aNieto2K 22/01/2008 08:01
  11. Publicado el primer borrador de HTML 5 | Enchufa2 23/01/2008 02:01
  12. Implementando de HTML5 con Javascript | aNieto2K 28/05/2008 02:05
  13. Opera 9.5 y el movimiento hacia los nuevos estandares web | ADSL Todo ADSL ADSL2+ VDSL FTTH, configurar emule 12/06/2008 06:06
  14. Web Forms 2.0, el futuro de nuestros formularios(I) | aNieto2K 17/09/2008 11:09
  15. HTML 5 « x0v 20/12/2008 09:12
  16. HTML5: mejoras importantes en el lenguaje de la web « Tecnologia, Actualidad,y mucho mas…. 29/05/2009 12:05
  17. Lenguaje de la Web : HTML 5 « Gnu/Linux 29/05/2009 03:05
  18. webtodoweb.com » Blog Archive » HTML5: mejoras importantes en el lenguaje de la web 30/05/2009 01:05
  19. Maya Lab » Blog Archive » HTML5: mejoras importantes en el lenguaje de la web 31/05/2009 05:05
  20. ¿Y el HTML5? | Vida Geek 09/06/2009 07:06
  21. betacontinua » HTML5 16/06/2009 08:06
  22. Enlaces interesantes sobre « Blog – Daniel Luque 11/07/2009 10:07
  23. Web 3.0 – Hacia una Web mas Humana | BGL Blog - Agencia de Marketing y Publicidad en Internet 22/07/2009 07:07
  24. Web 3.0 – Hacia una Web mas Humana | Tempus Fugit by Jonathan Rios 22/07/2009 09:07
  25. CSS Reset para HTML5 | aNieto2K 27/07/2009 06:07
  26. Web 3.0 – Hacia una Web mas Humana « Prueba 29/07/2009 02:07
  27. Las promesas del HTML5 at La vida mía de mi 28/09/2009 07:09
  • Muy buen artículo, se supone que los navegadores van a soportar HTML5 sin problemas? Y seguiran interpretando el HTML4?

    Yo una de las conclusiones que saco de todos estos cambios es que se va a potenciar muchísimo más el uso de CSS no? La mayoría de las soluciones alternativas a lo que se hacía antes es esa…

  • Ahora a aprender de nuevo XD

    Cómo te lo curras 🙂

  • excelente articulo andres, los cambios son muy interesantes y todos muy utiles y muy acertados, que bueno…

    Ahora a esperar a su liberacion e implementacion en los principales navegadores haber si MS no saca HTML5Vista =P asi nos seguirian fregando los estandares…

    Y dando mas dolores de cabeza =$

  • Interesante pero yo por ahora me conformaría con que todos los navegadores aceptasen XHTML + CSS 2.1 al 100%

    Que va a ser que no lo cumple ninguno:
    http://www.webdevout.net/browser-support-summary

  • wauuu
    despuesde cuantos a#os de html 4.0
    y algunos de xhtml 1
    de verdad va a ser dificil migrar.

    pero si hay multicompatibilidad pues que mas da.

    aunque algunas cosas se me asen raras

  • Me preocupa un poco el punto 3.1 (Modelos estrictos de contenidos)… ¿Si el <em> está dentro de <p>, entonces si se permite? Porque si no, nos dejan sin muchas posibilidades. Además, no encuentro la razón lógica a no permitir elementos de ambos tipos dentro de un <div>; al final, son solo divisiones de la web en secciones. Esta medida aumentará mucho el uso de divs dentro de nuestro código (creo… quiza ya usandola sepa bien cómo funciona).

    También el hecho de eliminar la tag <acronym> me parece bastante mal. Me gustaría saber bien las razones que tienen en mente para muchos de estos cambios.

    Aunque por unos 8 años más (calculole yo), el XHTML1.0 va a ser la mejor opción para codificar webs… en lo que terminan esta nueva versión, luego en lo que los navegadores (pienso en IE ¬¬) la soportan y finalmente (y la parte más lenta, creo yo) la gente migra a estos navegadores actualizados… tomará mucho tiempo y esfuerzo.

  • Me ha gustado mucho el post, estoy liado ahora con 3 paginas webs y la verdad, el html es el lenguaje que menos se actualiza.

    Ya iba siendo hora, porque con la cantidad de webs que hay ya son muy necesarias etiquetas como media, irrelevant para gestionar mejor el contenido por parte de los buscadores, y sin duda las ayudas con los formularios y ajax se notaran mucho más.

    Solo queda que nos actualicen el protocolo http que ya está bastante obsoleto y no está pensado para la web 2.0

    Muy bien Anieto un 10!

  • Muy buen articulo
    una pregunta con respecto a Elemtnos Globales ¿Tabindex? no estaba ya en HTML4 y XHTML1?

    saludos

  • EMBED??? oO? casi que me cuesta creerlo…

    Un elemento propietario y hasta la fecha desestimado por el W3C? y destinado a morir lo vuelven a incluir… muy raro, sobretodo después de andar dando la lata con OBJECT incluso para imágenes -la especificación original que se saltó Netscape-.

    Hubiera apostado firmemente por OBJECT en exclusiva en HTML5… aunque… ahora que lo pienso, hablas de HTML no de XHTML así que espero no tenga demasiada trascendencia la especificación ahora que media internet se ha adaptado a XML.

    Personalmente, como en otras tantas ocasiones he comentado, no le veo sentido a una nueva especificación HTML cuando XML parece ser lo más cercano a la panacea del marcado web ^^

    Si por mí fuera, hace días que, por ejemplo, WordPress produciría XML con Hojas de Transformación y todo esto sin mencionar aspectos como la finalización de la especificación XForms. Así y mientras, será XHTML quién guie el humilde camino de Cultura Digital al menos 😀

  • Desde luego es un paso importante camino a una web más semantica.

    Yo siempre había imaginado que al final saldría archivos xml como los rss para webs estáticas en donde se específicarían los elementos de la página html original, «artículo», «imagen», «autor», etc… pero html creo que lo resuelve bastante bien de momento.

  • Gracias por el artículo.

    Solo comentar un par de cosas.

    Me parece muy bien que hayan añadido semántica al lenguaje. Luego, cada un@ lo pinte con sus colores, pero está muymuymuy bien mejorar la estructuración de los documentos.

    Mejor aún me parece que hayan añadido audio y video. Así podremos desahernos de una vez por todas del FLASH! Ya no habrá excusas: si usas flash, es por que eres vag@!

    Aún y así, esperaba un cambio que se aproximara más al SVG poque:
    * es gráficamente muy potente
    * es completamente XML
    * podría ser muy rápido (tanto o más que el flash, pudiéndote saltar el plugin sin perder la robustez y seguridad que brinde el navegador)
    * se puede servir comprimido (ZIP)

    Hasta pronto!!
    emi

  • Esto es EXCELENTE! coincido con vos, me leyeron la mente! Varias veces, inconcientemente cuando escribo el código, mando , etc..

    Genial el artículo!

  • Un artículo genial!!
    Muy completo e informativo.

    Ahora la pega será que como IE tendrá soporte para HTML5 cuando yo sea abuelo, pues muchas de estas nuevas opciones quedarán sin darle juego…

  • El Firefox 3.5 ya soporta HTML 5

  • Sólo por el «submitar» que he leído por ahí, un «no» acentuado que también he leído, y alguna otra cosa digna de un traductor automático (sintaxis de toda la vida es femenino, no masculino…), me parece que el artículo deja mucho que desear…
    Limitándonos al contenido, la verdad es que hay algunas cosas de HTML que no comprendo… ¿Para qué usar los nuevos elementos etc si son básicamente DIVs? en fin …

  • @Darkhogg: Pues básicamente para hacer que el contenido tenga un mayor sentido semántico. Actualmente los DIV’s no están aportando toda la información que podrían ofrecer.

    Saludos.

  • Muy buen artículo Andrés, me ha ayudado a aclarar mi posición actual con respecto al nuevo juguetito de la W3C.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.