¿Cuántas etiquetas HTML usa realmente? La mayoría de los desarrolladores manejan un arsenal de aproximadamente una docena: div, p, a, img, span, encabezados y listas. Las más de 100 etiquetas restantes de la especificación permanecen inactivas, simplemente porque la gente las olvidó o nunca las conoció.

Eso es un error. Los navegadores han aprendido a entender la semántica más profundamente de lo que podría pensar. Los lectores de pantalla dependen de ello. Los motores de búsqueda analizan la estructura. La etiqueta correcta en el lugar correcto aporta accesibilidad, SEO y código legible sin una sola línea de JS.

Seleccionamos 18 etiquetas HTML que vale la pena añadir a su marcado cotidiano. No son nuevas en el sentido de «recién salidas del borrador», pero sí lo son para muchos desarrolladores porque han sido injustamente ignoradas. Algunas provienen de HTML5, otras siempre han estado en la especificación. Cada una incluye un ejemplo funcional y una explicación de dónde resulta realmente útil.

💡 Resumen rápido:

• Qué etiquetas resuelven problemas de accesibilidad y semántica sin JavaScript
• Dónde resultan útiles sub/sup, dfn, var y time para el marcado de texto
• Cómo <q>, <blockquote> y <cite> formatean correctamente las citas
• Por qué <video>, <picture> y <figure> organizan el contenido multimedia
• Qué aportan del/ins, meter, dialog y menu a las interfaces

1. Marcado semántico de texto: sub, sup, dfn, var, time, kbd

Cinco etiquetas que convierten el texto plano en una estructura comprensible tanto para máquinas como para humanos. Sin JS, solo HTML nativo.

<sub>** y **<sup>: subíndice y superíndice. Fórmulas químicas, exponentes matemáticos, notas al pie. CSS puede bajar o subir texto visualmente con vertical-align, pero no transmitirá la semántica. Y eso importa: un lector de pantalla anunciará «H dos O» en lugar de leer «H dos O» como texto normal. No las use con fines puramente decorativos; para eso existen los estilos.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: un término que se está definiendo. Cuando introduzca un concepto nuevo y proporcione su definición, envuelva el término en esta etiqueta. El navegador no hace nada visual con ella, pero los motores de búsqueda y las extensiones de diccionario usan <dfn> para construir un glosario de la página. El atributo id le permite crear referencias cruzadas cuando mencione el término de nuevo.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: una variable. En documentación técnica, tutoriales, descripciones de fórmulas. Los navegadores la muestran en cursiva por defecto. Para expresiones matemáticas completas es mejor MathML, pero <var> resulta conveniente cuando la variable forma parte de una oración.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: una fecha u hora. A las máquinas les cuesta interpretar «2 de abril» en medio de un párrafo. La etiqueta <time> aísla la fecha y proporciona un formato legible por máquina mediante el atributo datetime. Calendarios, motores de búsqueda, analizadores de eventos: todos se lo agradecerán.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: entrada de teclado. Instrucciones, atajos de teclado, comandos. Se muestra visualmente con una fuente monoespaciada, separando semánticamente los nombres de las teclas del texto circundante. Puede anidarlas para combinaciones.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Citas y referencias a fuentes: q, blockquote, cite

Tres etiquetas que cubren todos los escenarios de citación, desde una frase en línea hasta un extracto extenso de un libro.

<q>: una cita en línea dentro de un párrafo. El navegador envuelve automáticamente el contenido con las comillas que corresponden al idioma de la página. El atributo opcional cite especifica la URL de origen. El usuario no lo ve, pero las máquinas sí.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: una cita en bloque. Para extractos extensos: un párrafo de un artículo, una reseña, un pasaje de una especificación. También admite cite. El navegador añade una sangría por defecto y usted puede estilizarlo como desee.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: el título de la obra citada. Solo el título: un libro, artículo, película, videojuego. No el nombre del autor, no la fecha, solo el título. Los navegadores lo muestran en cursiva por defecto. A menudo se confunde con el atributo cite de <q>/<blockquote>, pero son cosas distintas: el atributo almacena una URL, mientras que la etiqueta <cite> muestra el título al usuario.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Estructura del documento: address y dl/dt/dd

<address>: información de contacto. No es la dirección postal de una empresa (eso lo manejan los microdatos de Schema), sino los datos de contacto del autor de la página o del artículo. Cuando se coloca dentro de <article>, se refiere al autor del artículo; cuando está en <body>, al propietario del sitio. Los motores de búsqueda usan este bloque para construir el Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: una lista de descripción. No es solo un «glosario de términos», sino cualquier estructura de tipo «clave/valor»: especificaciones de producto, metadatos, preguntas frecuentes. Un término (<dt>) puede tener múltiples descripciones (<dd>), y viceversa. El orden importa: el término va primero, luego su descripción.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Contenido multimedia: video, picture y figure/figcaption

Tres herramientas potentes para trabajar con contenido visual y multimedia. Cada una cubre su propio rango de tareas.

<video>: video incrustado sin reproductores de terceros. Puede especificar un único src o múltiples elementos <source>; el navegador elige el primer formato compatible. Un detalle útil: el atributo autopictureinpicture reduce automáticamente el video a una ventana flotante al cambiar de pestaña, mientras que disablepictureinpicture lo impide. De manera similar, disableremoteplayback controla la transmisión a Chromecast y Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: imágenes responsivas con control total. A diferencia de srcset en <img>, donde el navegador elige la fuente, <picture> le permite especificar media queries estrictas. Distintos formatos (WebP para Chromium, JPEG para otros), diferentes recortes para móvil, una versión oscura para el modo oscuro, todo sin una sola línea de JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** y **<figcaption>: contenido autónomo con una leyenda. Una ilustración, un diagrama, un listado de código, una tabla, cualquier cosa que pueda extraerse del flujo principal sin perder significado. <figcaption> vincula semánticamente la leyenda al contenido: un lector de pantalla los lee juntos, no como elementos separados. Si el contenido solo tiene una relación tangencial con el texto (por ejemplo, una cita en una barra lateral), use <aside> en su lugar.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Mapas de navegación: map y area

Antiguos pero no obsoletos. Los mapas de imagen convierten regiones individuales de una imagen en enlaces cliqueables. Donde el texto se queda corto (un mapa interactivo del metro, un plano de un edificio, un diagrama anatómico), <map> con <area> funciona sin JS.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

El atributo shape acepta circle, rect, poly y default. Las coordenadas se expresan en píxeles desde la esquina superior izquierda. Para contornos complejos, use poly con una lista de puntos. A pesar de su antigüedad (la etiqueta tiene bastante más de veinte años), goza de soporte estable en todos los navegadores.

6. Edición de texto: del e ins

Cuando muestra ediciones, cambios en documentos, actualizaciones de artículos o diferencias legislativas, <del> e <ins> ofrecen una representación semánticamente correcta. <del> marca el contenido eliminado (los navegadores lo tachan), <ins> marca el contenido añadido (los navegadores lo subrayan).

Ambos admiten cite (por qué se cambió) y datetime (cuándo). Los motores de búsqueda ven el historial de revisión de la página, no solo el texto sobrescrito.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

No use <del> e <ins> para un tachado meramente decorativo; para eso existe text-decoration: line-through. Estas etiquetas tratan específicamente del versionado de contenido.

7. Campos de entrada de nueva generación

El elemento <input> ha evolucionado mucho más allá de las cadenas de texto. Los navegadores modernos admiten docenas de tipos, cada uno con validación incorporada, un teclado específico para móviles y widgets nativos sin una sola línea de JavaScript.

Tipos clave que muchos proyectos aún ignoran:

• type="color": una paleta de colores. Un selector nativo sin necesidad de arrastrar una librería de espectro.
• type="range": un deslizador entre min y max. Volumen, precio, puntuación, todo sin programar un slider.
• type="date": un calendario localizado. El navegador muestra un selector de fecha con formato ajustado a la región del usuario.
• type="datetime-local": fecha y hora sin zona horaria. Para reservas, plazos, planificadores.

El atributo pattern acepta una expresión regular: el valor no superará la validación hasta que coincida con el patrón.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Indicadores numéricos

No lo confunda con <progress>: <meter> es para un valor estático dentro de un rango conocido (uso de disco, puntuación, valoración), mientras que <progress> es para el progreso de finalización de una tarea (descarga, proceso paso a paso).

El navegador colorea automáticamente <meter> según la posición del valor respecto a low, high y optimum. Zona verde: valor cercano al óptimo; amarillo: tolerable; rojo: fuera del rango normal. La lógica de color se puede personalizar mediante CSS, pero la semántica básica funciona sin configuración adicional.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Elementos interactivos: dialog y menu

Dos etiquetas para interacciones que antes requerían librerías JS o construirlas desde cero.

<dialog>: una ventana modal nativa. El elemento está oculto por sí mismo. Añada el atributo open y el navegador lo muestra sobre la página en la top layer. El método JavaScript showModal() proporciona además el pseudoelemento ::backdrop para oscurecer el fondo. Ventana emergente, confirmación de acciones, alerta, todo sin una sola línea de posicionamiento CSS.

Soporte: Chrome, Edge, Firefox, Safari (desde 2022). Para navegadores más antiguos, el diálogo simplemente se representa como un contenedor de bloque normal; existen polyfills disponibles.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: una lista de acciones interactivas. No es para navegación (use <nav> para eso), sino específicamente una barra de herramientas: pinceles en un editor gráfico, botones de formato, acciones sobre objetos. El equivalente semántico de <ul>, pero para botones y comandos. No tiene estilo predeterminado, solo significado.

El atributo type="toolbar" (el único que permanece en la especificación) establece explícitamente el rol de barra de herramientas. El tipo context se ha eliminado del estándar, por lo que <menu> hoy es exclusivamente para conjuntos visibles de acciones en pantalla.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Si el marcado HTML es nuevo para usted, aquí tiene una excelente introducción de Traversy; Traversy Media es uno de los mejores canales de frontend en YouTube:

⁉️🤔 Preguntas frecuentes

¿Por qué usar etiquetas semánticas si puede construir todo con <div> y <span>?

Los lectores de pantalla dependen de las etiquetas para construir la estructura de la página para usuarios ciegos; div es invisible para ellos. Los motores de búsqueda extraen semántica para fragmentos enriquecidos: valoraciones de <meter>, preguntas frecuentes de <dl>, contactos de <address>. Además, el código se documenta solo: <article> dice inmediatamente «esto es un artículo», mientras que <div class="article"> no lo hace.

¿Qué etiquetas de la lista ya son seguras para usar en producción?

Las dieciocho. <dialog> obtuvo soporte entre navegadores con Safari 15.4 (2022), <menu> funciona de facto como envoltorio semántico en todas partes. <picture> y <video> con <source> son maduros desde 2016. <meter>, <time>, <kbd>, <dfn> provienen del legado profundo de HTML con soporte universal. La única salvedad: <input type="date"> y type="color" pueden renderizarse de forma diferente según el sistema operativo, pero eso no rompe la funcionalidad.

¿Han muerto <b> y <i>?

No, pero su función ha cambiado. <b> ahora sirve para llamar la atención sin transmitir importancia (palabras clave en un currículum), <i> es para expresiones idiomáticas, términos en otro idioma, nombres de barcos. Para enfatizar importancia, use <strong>; para énfasis de entonación, <em>. La negrita y cursiva estilísticas son solo CSS.

¿Puedo usar <meter> para una barra de progreso de carga?

No. <meter> es para un valor estático dentro de un rango conocido (uso de disco, puntuación, valoración). Para progreso a lo largo del tiempo, use <progress> exclusivamente. Los navegadores animan <progress> cuando value cambia, mientras que <meter> permanece estático. Se confunden constantemente, pero la semántica difiere y los lectores de pantalla los anuncian de manera diferente.

¿Qué debo hacer si un navegador no soporta <dialog>?

El elemento simplemente se renderiza como un contenedor de bloque y no se romperá. Añada un polyfill: dialog-polyfill del equipo de Google Chrome (400 líneas, sin dependencias) cubre showModal(), close() y ::backdrop para navegadores antiguos.

¿Qué etiqueta debería adoptar primero?

{iframe} y <picture> son dos etiquetas que ofrecen el máximo beneficio con el mínimo esfuerzo. {iframe} reemplazará cualquier reproductor de video de terceros con una ventana nativa que incluye imagen dentro de imagen. <picture> elimina el cambio manual de formato WebP/AVIF; el navegador elige lo que entienda.

A partir de ahí, escale: <input> con tipos modernos (color, date, range) le ahorrará kilobytes de widgets en JS. <dialog> elimina la dependencia de librerías de modales. <del>/<ins> pone orden en el versionado de contenido.

No tiene que implementar las 18 en un solo sprint. Empiece con una etiqueta por semana. En seis meses, su marcado será semánticamente rico y su código se autodocumentará, sin una sola línea de JavaScript donde no sea necesaria.

Si no sabe por dónde empezar, abra su proyecto actual, encuentre el <div class="..."> más cercano sin semántica clara y sustitúyalo por una etiqueta adecuada de la lista. La diferencia en legibilidad del código se notará de inmediato.