Referencia de Elementos HTML5 - Aprender HTML

HTML5 es un conjunto de tecnologías para construir sitios web y aplicaciones más diversos y potentes, que admiten multimedia, interactúan con interfaces de software, estructuran documentos, etc.

Esta página es una referencia rápida de los elementos que HTML5 agregó (o estandarizó formalmente). Cada entrada enlaza a un capítulo dedicado con atributos, compatibilidad con navegadores y ejemplos ejecutables.

Por qué HTML5 añadió elementos semánticos

Antes de HTML5, la estructura de las páginas se construía casi en su totalidad con contenedores genéricos <div> y <span>, distinguidos únicamente por nombres de class o id que tenían significado para el autor pero no para la máquina. HTML5 introdujo los elementos semánticos — etiquetas cuyos nombres describen el significado del contenido que encierran (<header>, <nav>, <article>, <footer>, …) en lugar de simplemente su apariencia. Esto importa por tres razones concretas:

Accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia exponen puntos de referencia como "main", "navigation" y "complementary" para que los usuarios puedan saltar directamente a la parte que desean. Un <nav> se anuncia como navegación; un <div class="nav"> no.
SEO y legibilidad por máquinas. Los motores de búsqueda y otros rastreadores utilizan la estructura para comprender de qué trata una página y cuál es el contenido principal, en lugar de deducirlo a partir de nombres de clases.
Mantenibilidad. El marcado semántico se lee como un esquema de la página, por lo que el siguiente desarrollador (o tú en el futuro) entiende la estructura sin necesidad de descifrar los hooks de CSS.

Para un recorrido más completo sobre cómo estructurar una página de forma semántica, consulta Elementos Semánticos en HTML5.

Nota: Algunos elementos listados a continuación — como <embed> y <wbr> — existían en los navegadores mucho antes de HTML5 y simplemente fueron estandarizados (especificados formalmente) en él, en lugar de ser completamente nuevos.

Nuevos Elementos Estructurales/Semánticos

Elementos	Descripción
`<article>`	Define un contenido independiente y autocontenido.
`<aside>`	Define una sección con información adicional relacionada con el contenido que rodea al elemento aside.
`<details>`	Contiene detalles adicionales que el usuario puede abrir y ver.
`<dialog>`	Especifica un cuadro de diálogo o ventana.
`<figcaption>`	Agrega un pie de foto o explicación al contenido de la etiqueta `<figure>`.
`<figure>`	Especifica un contenido autocontenido.
`<footer>`	Define el pie de página de una página web o sección.
`<header>`	Define el encabezado de una página o sección.
`<main>`	Especifica el contenido principal de un documento.
`<nav>`	Define un bloque de enlaces de navegación, ya sea dentro del documento actual o hacia otros documentos.
`<section>`	Crea secciones independientes dentro de una página web que contienen contenido relacionado lógicamente.
`<summary>`	Define el encabezado visible para el elemento `<details>`.

Elementos Tipográficos y de Internacionalización (i18n)

Estos elementos describen el significado a nivel de texto, anotaciones y el manejo de escrituras con dirección mixta o escrituras del este asiático.

Elementos	Descripción
`<bdi>`	Aísla texto bidireccional (cuando un idioma con dirección de escritura de derecha a izquierda, como el árabe o el hebreo, se usa junto a idiomas de izquierda a derecha).
`<data>`	Vincula el contenido visible a un `value` legible por máquina (añadido en HTML 5.1).
`<mark>`	Marca una parte del texto que tiene relevancia.
`<rp>`	Define texto alternativo que se muestra en navegadores que no admiten la etiqueta `<ruby>`.
`<rt>`	Agrega el texto de pronunciación/anotación que se muestra encima (o al lado) del texto base dentro de un elemento `<ruby>`.
`<ruby>`	Define una anotación ruby (furigana) — guías fonéticas utilizadas con el japonés y otros idiomas del este asiático.
`<time>`	Define una hora legible por humanos en un reloj de 24 horas o una fecha precisa en el calendario gregoriano.
`<wbr>`	Marca una posición donde el navegador puede agregar un salto de línea si es necesario (una "oportunidad de salto de palabra").

Nuevos Elementos de Formulario

Elementos	Descripción
`<datalist>`	Crea una lista de opciones de entrada predefinidas por la etiqueta `<input>`.
`<output>`	Define un lugar para representar el resultado de un cálculo realizado por un script o la interacción del usuario con un elemento de formulario (etiqueta `<form>`).

Nuevos Elementos de Medios y Gráficos

Elementos	Descripción
`<audio>`	Incorpora contenido de audio en un documento HTML.
`<canvas>`	Define un área en la página web donde podemos dibujar objetos, imágenes, animaciones y composiciones fotográficas mediante scripts.
`<embed>`	Actúa como contenedor para aplicaciones externas y contenido interactivo (estandarizado en HTML5).
`<picture>`	Proporciona múltiples fuentes de imagen para que el navegador pueda elegir la más adecuada según el viewport o formato.
`<source>`	Define múltiples recursos de medios en diferentes formatos para `<audio>`, `<video>` o `<picture>`.
`<svg>`	Dibuja gráficos vectoriales escalables (véase SVG en HTML5).
`<track>`	Especifica pistas de texto (subtítulos, leyendas) para elementos multimedia.
`<video>`	Incorpora video en un documento HTML.

Otros Elementos Nuevos

Elementos	Descripción
`<meter>`	Define una medida escalar dentro de un rango conocido (por ejemplo, uso del disco).
`<progress>`	Muestra el progreso de finalización de una tarea (una barra de progreso).
`<template>`	Contiene HTML inerte que no se renderiza al cargar, pero que puede ser clonado e insertado mediante un script.

Eliminados / Obsoletos en HTML5

Estos elementos formaron parte de la especificación en algún momento, pero desde entonces han sido eliminados. Los navegadores ya no los admiten de forma fiable y no deberías usarlos en código nuevo.

Elementos	Descripción
`<keygen>`	Generaba un par de claves pública/privada al enviar el formulario. Eliminado del estándar — utiliza en su lugar la Web Crypto API.
`<menuitem>`	Definía un comando en un menú contextual. Eliminado del estándar; nunca tuvo soporte generalizado.

Un ejemplo semántico rápido

El fragmento a continuación muestra cómo encajan los elementos estructurales para describir una disposición de página típica — nótese que se lee como un esquema incluso sin ningún CSS:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>Semantic tags describe meaning, not just appearance.</p>
      <figure>
        <img src="diagram.png" alt="Page structure diagram" />
        <figcaption>A semantic page outline.</figcaption>
      </figure>
    </article>

    <aside>
      <h2>Related</h2>
      <p>Links to other posts.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>

Práctica

¿Cuáles de los siguientes son elementos HTML5 válidos?