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

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.


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


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.

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.


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


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.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.