¿Qué es HTML5? Significado, elementos y beneficios

HTML5 es la quinta versión de HTML con mejoras en las capacidades del sitio web, contenido web y más.

¿Qué es HTML5?

HTML5 se define como la quinta versión de HTML, un lenguaje de marcado utilizado por los navegadores web para visualizar el código. Cuenta con varias mejoras en las capacidades del sitio wweb, desarrollo de contenido web y más.

Evolución de HTML

En los primeros días de la World Wide Web, los principales creadores de navegadores web, como Microsoft Internet Explorer y Mosaic Netscape, desarrollaron elementos específicos del navegador para mejorar la apariencia de la página web para sus navegadores. A fines de la década de 1990, habían creado distintas versiones de sitios web para Internet Explorer y Netscape.

Fue en 1996 que el recién formado World Wide Web Consortium (W3C) recomendó la creación de HTML 3.2. Este estándar cubría los elementos HTML de uso común de la época. También incluía extensiones de presentación para HTML, como los elementos centrales y las fuentes creadas durante las 'guerras de navegadores' de Internet Explorer-Netscape.

Pronto llegaron HTML 4.0 (1998) y HTML 4.01 (1999), enfatizando la separación de presentación y estructura al mismo tiempo que mejoraba la accesibilidad. Estas actualizaciones transfirieron elementos de presentación bajo el estándar de hojas de estilo en cascada (CSS) recién creado.

Advenimiento de HTML5

Poco después del cambio de milenio, representantes de Mozilla, Opera y Apple se unieron para establecer el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG). El objetivo de esta entidad, que era distinta del W3C, era mejorar el desarrollo de HTML de una manera que permitiera que el lenguaje cumpliera con las nuevas demandas que surgían de las prácticas de creación y el comportamiento del navegador del mundo real. Web Applications 1.0 y Web Forms 1.0, los documentos iniciales de WHATWG, se combinaron para establecer HTML5.

Actualmente, WHATWG mantiene un estándar HTML "vivo" que no se clasifica mediante números. El trabajo de WHATWG también ha servido como base para que el W3C establezca su propio grupo de trabajo de HTML5. HTML5 recibió formalmente el estado de "Recomendación" en octubre de 2014.

Las especificaciones para el estándar HTML5 son mantenidas por ambas organizaciones, lo que ocasionalmente da lugar a ligeras inconsistencias. La mayoría de los desarrolladores de navegadores confían en la versión WHATWG como referencia de implementación.

HTML 4.01 estricto, la versión sin elementos basados ​​en presentación y otros atributos obsoletos, sirvió como base para HTML5. Esto ha llevado a que la mayoría de HTML5 se cree utilizando los mismos elementos compatibles con el navegador que se usaron años antes. También ha introducido muchos elementos nuevos y atributos globales y ha dejado obsoletos muchos atributos y elementos obsoletos de HTML 4.01. Una característica clave de HTML5 es la inclusión de un protocolo estándar para manejar el marcado heredado y mal formado por parte de los navegadores.

Lo que distingue a HTML5

Antes de esta actualización, HTML se centraba en los elementos utilizados para marcar contenido para la visualización de páginas web. HTML5 lleva las cosas adelante al ofrecer numerosos métodos nuevos para completar tareas. En el caso de versiones anteriores de HTML, estas tareas requerirían una programación específica o complementos propietarios como Silverlight o Flash.

Las características de HTML5 incluyen elementos de marcado y secuencias de comandos, así como interfaces de programación de aplicaciones (API) para funcionalidades como agregar video y audio en una página, almacenamiento de datos locales, operaciones fuera de línea y uso de datos de ubicación. Con HTML5 que aborda las funciones de desarrollo web estándar, los equipos de desarrollo no necesitan crear funcionalidad desde cero para cada aplicación y, en cambio, pueden confiar en las capacidades integradas del navegador.

Elementos de HTML5

HTML5 ha introducido numerosos elementos nuevos compatibles con la mayoría de los principales navegadores web. A continuación se enumeran los elementos clave de HTML5.

1. <article>

Este nuevo elemento de sección se utiliza para marcar contenido específico como parte de un artículo. Luego, este contenido se trata de forma independiente de otros contenidos en el sitio web, aunque puede haber superposiciones.

2. <aside>

Este elemento define el contenido aparte del contenido que se encuentra dentro. A menudo se usa en las barras laterales de los documentos. Si bien este elemento no se representa de una forma específica en un navegador, se puede usar CSS para diseñarlo.

Este elemento tiene como objetivo identificar el contenido relacionado con el contenido principal de la página, pero no como parte de su intención principal. Por ejemplo, se puede utilizar para delinear la información del autor y los enlaces 'ver más'.

3. <audio>

Este elemento permite a los usuarios incrustar el contenido de sonido de una página, como música o transmisiones de audio. La etiqueta <audio> se usa con una o más etiquetas <source>> para delimitar las fuentes de audio. El navegador ejecutará la primera fuente admitida. Los formatos de audio compatibles incluyen MP3, OGG y WAV. Si un navegador no admite este elemento, mostrará el texto entre las etiquetas <audio> y </audio>.

4. <bdi>

El nombre de este elemento significa aislamiento bidireccional. Su función es aislar un segmento de texto que se podría formatear en una dirección diferente del texto fuera del elemento. <bdi> ayuda a incrustar contenido generado por el usuario que presenta texto con formato direccional desconocido.

5. <canvas>

Este elemento utiliza JavaScript para dibujar gráficos (cuadros, rutas, degradados, texto) y agregar imágenes a una página.Los bordes y el texto no se incluyen de forma predeterminada, y las etiquetas son transparentes y solo sirven como contenedor para los gráficos dibujados. Estos gráficos se pueden generar utilizando un script distinto del elemento. Si el elemento no es compatible o JavaScript está deshabilitado en un navegador, mostrará cualquier texto dentro de las etiquetas <canvas>.

6. <data>

Este elemento se utiliza para agregar información legible por máquina al contenido. El valor legible por máquina lo proporcionan los procesadores de datos, mientras que también se ofrece un valor legible por humanos para que los navegadores web lo representen.

7. <datalist>

Este elemento proporciona una característica de 'autocompletar' para el elemento <input> al especificar una lista desplegable de opciones preestablecidas que el navegador presentará a los usuarios a medida que se ingresan los datos. El atributo id del elemento <datalist> tiene que ser igual al atributo list del elemento <input> para vincularlos.

8. <details> y <summary>

El contenido contenido dentro de este elemento está inicialmente oculto y solo se muestra una vez que el usuario desea verlo. Puede incluir cualquier contenido.

Para ello se crea un widget interactivo que el usuario puede abrir o cerrar. Este widget está cerrado de forma predeterminada y se expande una vez abierto para mostrar el contenido que contiene.

La etiqueta <resumen> define el encabezado visible del widget <detalles>, con el que se puede interactuar para ver u ocultar el contenido.

9. <dialog>

Este elemento define un cuadro de diálogo o subventana, lo que facilita la generación de cuadros de diálogo emergentes y ventanas modales en una página web.

10. <embed>

Este elemento se utiliza para incrustar aplicaciones de terceros que generalmente toman la forma de contenido multimedia como video o audio. Sirve como un contenedor para que los usuarios incrusten complementos como la animación Flash. Solo se requiere la etiqueta inicial para implementar este elemento en HTML5. Debe tener en cuenta que muchos navegadores modernos ya no son compatibles con los complementos y applets de Java, los controles ActiveX o Shockwave Flash, lo que limita la usabilidad de este elemento.

11. <figure> y <figcaption>

Este elemento se utiliza para especificar contenido independiente, como diagramas, ilustraciones, listas de códigos y fotografías. Su contenido está relacionado con el flujo principal; sin embargo, su posición no depende del flujo principal y, por lo general, el flujo de la página no se ve afectado si se elimina el elemento. El elemento <figcaption> permite a los usuarios agregar un título para <figure>.

12. <footer>

Este elemento define un pie de página para una sección o una página. Por lo general, contiene información sobre el autor, detalles de contacto, derechos de autor, enlaces "volver al principio", mapa del sitio, lecturas relacionadas, etc. Un solo documento puede contener varios elementos <footer>. Los detalles de contacto generalmente se insertan dentro de la etiqueta <direccion> de este elemento.

13. <header>

Este elemento generalmente contiene información relacionada con el encabezado y el título de la página. Por lo general, describe un contenedor para información introductoria o enlaces de navegación. También es útil para visualizar uno o más elementos de encabezado (clasificados de <h1> a <h6>), logotipos, íconos y autores. Este elemento incluso se puede usar para envolver un formulario de búsqueda o la tabla de contenido de una sección. Si bien un solo documento puede contener numerosos elementos <header>, las etiquetas <header> no se pueden colocar dentro de un <address>, <footer> u otro elemento <header>.

14. <keygen>

Este elemento se utiliza en formularios para especificar un campo generador de pares de claves. Su propósito es proporcionar a los usuarios un método de autenticación seguro. Una vez que se envía el formulario, se generan claves públicas y privadas. Este último se almacena localmente, mientras que el primero se transmite al servidor y se utiliza para crear certificados de cliente para autenticar al usuario en el futuro. El elemento también es útil para crear y verificar firmas digitales.

15. <main>

Este elemento describe el contenido principal de la página, que debe ser exclusivo de ese documento específico. El contenido que se repite en los documentos, como enlaces de navegación, barras laterales, logotipos de sitios, formularios de búsqueda y datos de derechos de autor, no debe incluirse en este elemento. Un único documento no puede tener más de un elemento <main>, y este elemento no puede ser descendiente de un elemento <aside>, <article>, <header>, <footer> o <nav>.

16. <mark>

Este elemento define el texto que se debe resaltar o marcar dentro de un párrafo.

17. <meter>

También conocido como indicador, este elemento se utiliza para definir medidas escalares dentro de un rango predefinido y valores fraccionarios. Por ejemplo, <meter> puede determinar el uso del disco o la relevancia de los resultados de la consulta.

18. <nav>

Este elemento describe las secciones del sitio web que normalmente se dedican a los enlaces de navegación que conducen a otro punto de la página actual o a una página diferente. Los elementos <nav> comunes incluyen tablas, menús e índices.

No se deben incluir todos los enlaces dentro de un documento dentro de un elemento <nav>; más bien, está destinado solo a bloques de enlaces de navegación más grandes. Los lectores de pantalla y los navegadores con características similares pueden usar <nav> para saber cuándo se puede omitir la representación del contenido inicial.

19. <output>

Este elemento representa el resultado de un cálculo, como uno realizado por JavaScript u otro script. Sus atributos incluyen for (para especificar la relación entre el resultado del cálculo y los elementos utilizados durante el cálculo), form (para especificar el formulario al que pertenece el elemento de salida) y name (para nombrar el elemento de salida).

20. <progress>

Este elemento visualiza el progreso de una tarea, como la cantidad de trabajo completado o la duración de las descargas. Generalmente se usa junto con JavaScript.

21. <ruby>, <rt> y <rp>

Este elemento se usa para especificar anotaciones Ruby, es decir, texto adicional en una fuente pequeña adjunta al texto principal. El propósito del texto rubí es guiar a los usuarios en el significado o la pronunciación de los caracteres (generalmente usados ​​para contenido en japonés).

<ruby> se usa regularmente junto con <rt> y <rp>. <ruby> contiene caracteres que requieren una explicación, <rt> contiene la información que se debe proporcionar y las etiquetas <<rp> opcionales se utilizan para definir el contenido que se mostrará en el caso de navegadores que no admitan las anotaciones regulares de Ruby.

22. <section>

Este elemento define secciones específicas de páginas web, incluidos encabezados y pies de página. Se utiliza para dividir una página en secciones y subsecciones, especialmente cuando se requiere más de un encabezado, pie de página u otro marcador de sección. Agrupa bloques genéricos de contenido relacionado.

23. <svg>

Este elemento crea un contenedor para gráficos SVG. Tiene numerosos métodos para dibujar cuadros, caminos, círculos, imágenes gráficas y texto.

24. <time>

Este elemento muestra la fecha y la hora en un formato legible por humanos y también se utiliza para codificar datos de fecha y hora en un formato legible por máquina. Sus aplicaciones incluyen recordatorios de cumpleaños, programación de eventos del calendario y mejora de la calidad de los resultados del motor de búsqueda.

25. <video>

Este elemento se utiliza para incrustar contenido de video en una página web. Debe contener etiquetas <source> para delinear las diferentes fuentes de video, y el navegador reproducirá la primera fuente admitida. Los formatos de video admitidos incluyen MP4, OGG y WebM. Si el navegador no admite este elemento, mostrará el texto entre las etiquetas <video> y </video> en su lugar.

26. <wbr>

El nombre de este elemento significa oportunidad de salto de palabra. Especifica los puntos dentro de una línea de texto donde se puede agregar un salto de línea si es necesario. Esto es útil cuando se usan palabras que son demasiado largas y el navegador puede dividirlas en el lugar equivocado.

Beneficios de HTML5

Ya hemos visto cómo los elementos introducidos en HTML5 facilitan la integración de contenido multimedia y mejoran el valor semántico. Ahora vamos a echar un vistazo más de cerca a los beneficios de HTML5.

1. Enriquecimiento semántico

El marcado semántico describe el marcado que está asociado con un significado específico en lugar de simplemente crear una salida visual particular. Por ejemplo, la etiqueta <h1> delimita claramente el título principal de la página web. Si bien se podría lograr el mismo resultado haciendo que el texto del título sea grande y en negrita usando las etiquetas de formato relevantes en lugar de la etiqueta <h1>, el significado semántico no se mantendría.

Las versiones anteriores de HTML también tenían marcado semántico, como etiquetas de encabezado, rel de enlace y metadatos de documentos. Sin embargo, los elementos estructurales comunes, como los menús de navegación, los encabezados de página y las secciones de contenido principal, no se diferenciaron semánticamente. En cambio, todos usaron la etiqueta <div>.

HTML5 aborda esto con una serie de nuevos elementos semánticos, como <header>, <main>, <section>, <nav>, <aside>, <article> y <footer>. Además, los nuevos elementos semánticos en línea, como <address> y <time>, ayudan a los servicios en línea, como los motores de búsqueda, a localizar rápidamente datos relevantes en una página. Las marcas en línea existentes, como negrita, cursiva y subrayado, también se han perfeccionado y ahora están asociadas con significados semánticos específicos.

2. Experiencias de medios enriquecidos sin complementos

Con velocidades de Internet cada vez más rápidas, los medios enriquecidos se han convertido en una parte central de la experiencia en línea. Si bien HTML sirvió originalmente como un lenguaje de marcas para documentos de hipertexto (y tal vez algunas imágenes), HTML5 es inherentemente compatible con medios enriquecidos a través de elementos como <video> y <audio>.

Además de ser funcional y conveniente para los desarrolladores, esta característica tiene otro beneficio: eliminar los complementos. Algunas desventajas de complementos como Java y Flash incluyen bajo rendimiento, menos opciones de usuario, fallas de seguridad y falta de visibilidad en los motores de búsqueda.

Además, HTML5 proporciona a los usuarios nuevos elementos de formulario y una integración superior con CSS y JavaScript, lo que simplifica la creación de aplicaciones web de medios enriquecidos a gran escala sin depender de complementos.

3. Compatibilidad XML

Gracias a la serialización XML de HTML5 (también conocido como XHTML5), el código se puede escribir utilizando la sintaxis XML "más estricta". Esto es útil para los desarrolladores que prefieren la pulcritud que ofrece XHTML bien formado, incluidos los valores de atributos entrecomillados, los nombres de los elementos en minúsculas y el cierre de todos los elementos. En los casos en que se espera que el código funcione con otras aplicaciones XML, los documentos HTML5 deben servirse como XML.

4. Diseño y separación de contenidos

Además de fomentar el marcado semántico, HTML5 desalienta el marcado sin sentido que solo pretende ayudar al navegador a visualizar cosas (piense en declaraciones de fuente, color de texto, alineación de texto, etc.). Este estándar ha desaprobado muchos elementos que permitían dicha visualización, y las pocas funciones admitidas muestran advertencias de "práctica no recomendada".

Separar el diseño y el contenido simplifica el mantenimiento y el rediseño del sitio web, ya que CSS maneja las declaraciones de estilo. Además, las decisiones de diseño que se ven bien en una plataforma (por ejemplo, una computadora de escritorio) no necesariamente se verán bien en otra (móvil). HTML5 aborda esto proporcionando contexto semántico y permitiendo la adaptación de contenido.

5. Accesibilidad y capacidad de respuesta del diseño

Las primeras iteraciones de HTML no eran perfectamente compatibles con los numerosos tamaños de pantalla y proporciones de aspecto de la tecnología moderna. Esto incluye teléfonos móviles, tabletas, lectores electrónicos, tecnologías de asistencia como convertidores de texto a voz, lectores de pantalla que suprimen el estilo y aumentan la ampliación y el contraste del texto, y los intérpretes de braille. Estas tecnologías se vieron obstaculizadas por el marcado que intentaba "codificar" el estilo y el diseño en el contenido de la página.

Sin embargo, gracias a las etiquetas semánticas y las aplicaciones ricas de Internet accesibles (ARIA), la creación de sitios web accesibles y receptivos es mucho más simple con HTML5. Por ejemplo, los lectores de pantalla pueden interpretar el contenido HTML5 más fácilmente, lo que facilita la navegación en línea para las personas con discapacidad visual.

6. Interfaces de programación de aplicaciones

Las especificaciones HTML anteriores solo documentaban los elementos, valores y atributos permitidos en el lenguaje. Esto funcionó para sitios de texto simples, pero no sirvió de mucho para ayudar a crear aplicaciones basadas en web que necesitaban programación y secuencias de comandos.

HTML5 ha dado un gran salto al definir numerosas API nuevas que simplifican la comunicación con las aplicaciones. Introduce API para la funcionalidad que antes necesitaba complementos o código personalizado, incluido el almacenamiento web, arrastrar y soltar, geolocalización y microdatos.

Esto ha ayudado a estandarizar mecánicas específicas, simplificando tareas de codificación que de otro modo serían complejas y permitiendo a los desarrolladores agregar funcionalidades que funcionan en navegadores en todas las plataformas sin problemas.

7. Almacenamiento local persistente

HTML5 admite el almacenamiento del navegador local que sirve como un híbrido entre las cookies y las bases de datos del cliente. Esta función permite que los navegadores admitan el almacenamiento en numerosas ventanas simultáneamente, lo que mejora la seguridad y el rendimiento y garantiza la persistencia de los datos incluso después de cerrar el navegador.

El almacenamiento local persistente permite operaciones fuera de línea y evita que la eliminación de cookies afecte negativamente las operaciones del navegador, ya que el almacenamiento de datos del lado del cliente con tecnología HTML5 ahora es compatible con la mayoría de los navegadores modernos. También permite que las aplicaciones que usan la funcionalidad HTML5 en lugar de complementos de terceros funcionen sin problemas.

8. Quitar

Las empresas pioneras en tecnología ya están haciendo la transición a HTML5, y pronto será el lenguaje de marcado elegido en todas las verticales. Ningún negocio en línea primero puede darse el lujo de ignorar este estándar si espera seguir siendo relevante. Elija HTML5 y aproveche sus capacidades de participación de vanguardia, su facilidad de uso y su accesibilidad.