¿Cuál es la diferencia clave entre HTML 4 y HTML 5?

145

¿Cuáles son las diferencias clave entre HTML4 y HTML5 draft ?

Mantenga las respuestas relacionadas con la sintaxis modificada y los elementos html agregados / eliminados.

pozo profundo
fuente

Respuestas:

197

HTML5 tiene varios objetivos que lo diferencian de HTML4.

Consistencia en el manejo de documentos con formato incorrecto

El principal es el manejo consistente y definido de errores . Como sabes, HTML admite a propósito 'sopa de etiquetas', o la capacidad de escribir código con formato incorrecto y corregirlo en un documento válido. El problema es que las reglas para hacerlo no están escritas en ningún lado. Cuando un nuevo proveedor de navegadores quiere ingresar al mercado, solo tiene que probar documentos con formato incorrecto en varios navegadores (especialmente IE) y aplicar ingeniería inversa a su manejo de errores. Si no lo hacen, muchas páginas no se mostrarán correctamente (las estimaciones ubican aproximadamente el 90% de las páginas en la red como al menos algo malformadas).

Por lo tanto, HTML5 está intentando descubrir y codificar este manejo de errores, para que todos los desarrolladores de navegadores puedan estandarizar y reducir en gran medida el tiempo y el dinero necesarios para mostrar las cosas de manera consistente. Además, mucho tiempo después de que HTML haya muerto como formato de documento, es posible que los historiadores aún quieran leer nuestros documentos, y tener un algoritmo de análisis completamente definido será de gran ayuda.

Mejores características de aplicaciones web

El objetivo secundario de HTML5 es desarrollar la capacidad del navegador para ser una plataforma de aplicación, a través de HTML, CSS y Javascript. Muchos elementos se han añadido directamente a la lengua que se encuentran actualmente (en HTML 4) Flash o hacks basados en JS, tales como <canvas>, <video>, y <audio>. Cosas útiles como el almacenamiento local (una base de datos de valores clave incorporada en el navegador accesible para js, para almacenar información más allá de lo que pueden contener las cookies), nuevos tipos de entrada, como la fecha para la cual el navegador puede exponer una interfaz de usuario fácil (para que podamos no tiene que usar nuestros selectores de fecha de calendario basados ​​en js), y la validación de formularios compatible con el navegador hará que el desarrollo de aplicaciones web sea mucho más simple para los desarrolladores, y las hará mucho más rápidas para los usuarios (ya que muchas cosas serán compatibles de forma nativa, en lugar de hackeado a través de javascript).

Semántica de elementos mejorada

Hay muchos otros esfuerzos más pequeños que tienen lugar en HTML5, tales como papeles semánticos mejor definidos para los elementos existentes ( <strong>y <em>ahora en realidad significan algo diferente, e incluso <b>y <i>tener la semántica vagos que deberían funcionar bien cuando se analizan los documentos del histórico) y la adición de nuevos elementos con utilidad semántica - <article>, <section>, <header>, <aside>, y <nav>debe sustituir a la mayoría de los <div>s utilizadas en una página web, por lo que sus páginas un poco más semánticas, pero lo más importante, más fáciles de leer . No más escaneo doloroso para ver qué se </div>está cerrando esa aleatoriedad ; en su lugar, tendrá una obvia </header>o </article>hacer que la estructura de su documento sea mucho más intuitiva.

Xanthir
fuente
14
Destaque las etiquetas y oraciones editando la respuesta. (Es solo una sugerencia porque mientras leía esto, me cansaba.)
Mohammad Faisal
44

De Wikipedia :

  • Nuevas reglas de análisis orientadas hacia un análisis flexible y compatibilidad
  • Nuevos elementos: sección, video, progreso, navegación, medidor, tiempo, a un lado, lienzo
  • Nuevos atributos de entrada: fechas y horas, correo electrónico, url
  • Nuevos atributos: ping, charset, async
  • Atributos globales (que se pueden aplicar para cada elemento): id, tabindex, repetir
  • Elementos obsoletos descartados: centro, fuente, huelga
Christian Davén
fuente
12

Deberá verificar las diferencias HTML5 de HTML4: Nota del grupo de trabajo del W3C del 9 de diciembre de 2014 para ver las diferencias completas. Hay muchos elementos nuevos y atributos de elementos. Algunos elementos fueron eliminados y otros tienen un valor semántico diferente al anterior.

También hay API definidas, como el uso del lienzo, para ayudar a construir la próxima generación de aplicaciones web y asegurarse de que las implementaciones estén estandarizadas.

Zach
fuente
11

HTML5 presenta una serie de API que ayudan a crear aplicaciones web. Estos pueden usarse junto con los nuevos elementos introducidos para aplicaciones:

  • Una API para reproducir video y audio que se puede usar con los nuevos elementos de video y audio.
  • Una API que habilita aplicaciones web sin conexión.
  • Una API que permite que una aplicación web se registre para ciertos protocolos o tipos de medios.
  • Una API de edición en combinación con un nuevo contenteditableatributo global .
  • Una API de arrastrar y soltar en combinación con un draggableatributo.
  • Una API que expone el historial y permite agregar páginas para evitar romper el botón de retroceso.
Viktor Fonic
fuente
3

Puede interesarle esta lista de elementos y atributos HTML5 .

Además, tenga en cuenta que es "HTML 4", no "HTML4". De hecho, para HTML 5, se utilizan ambas variantes, pero hay una diferencia importante en el significado. HTML 5 se refiere al nombre de la especificación W3C, mientras que "HTML5" es el tipo de documento de esos archivos HTML con un text/htmltipo MIME que sigue esta especificación. Lo mismo ocurre con XHTML 5 frente a XHTML5.

Mathias Bynens
fuente
1
Parece implicar que XHTML 5 existe, aunque este no es el caso. La última recomendación del W3C de XHTML es 1.1, y 2.0 está en la etapa de borrador.
David Rivers el
44
@David Rivers: existe. XHTML5 es la serialización XML de HTML5 .
Mathias Bynens
2
@David Rivers: Por cierto, XHTML 2 ya no está en las etapas de borrador. Se ha descontinuado a favor de HTML5 .
Mathias Bynens
Gracias. Acabo de descubrir esto también y no puedo creer lo fuera de lugar que he estado. ¡Ha sido un año duro!
David Rivers
0

Las invitaciones de HTML 5 le agregan un gran valor semántico a su código. Además, existen soluciones nativas para incrustar contenido multimedia.

El resto es importante, pero es un azúcar más técnico que lo salvará de hacer lo mismo con un lenguaje de programación del cliente.

e-satis
fuente