Texto semántico en HTML: mark, abbr, kbd, del/ins, dfn, dl, progress y meter

Domina etiquetas de texto menos conocidas para escribir contenido más claro, accesible y profesional.

📘 Teoría

Etiquetas de texto con intención real

Si todo se escribe con `span`, pierdes significado y contexto. ✍️

`mark` destaca relevancia contextual (por ejemplo, resultados de búsqueda), mientras que `strong` señala importancia semántica.

`abbr` con `title` aclara siglas, `kbd` representa teclas, y `del`/`ins` documentan cambios de contenido con mayor precisión editorial.

mark

Resaltado contextual de relevancia.

abbr + title

Expansión de abreviaturas accesible.

kbd

Representa teclas o atajos de teclado.

del / ins

Muestra eliminaciones e inserciones de forma explícita.

Definiciones y métricas: dfn, dl, progress y meter

Cuatro etiquetas útiles para contenido técnico y paneles de estado.

Usa `dfn` en la primera definición de un término y `dl` cuando tengas pares concepto-descripción.

`progress` expresa una tarea en curso (subida 65%), mientras `meter` muestra una magnitud en un rango (batería, calidad, riesgo).

Bloque semántico mixto

<p>El término <dfn title="Document Object Model">DOM</dfn> aparece en todo frontend moderno.</p>

<dl>
  <dt>HTML</dt><dd>Estructura de contenido</dd>
  <dt>CSS</dt><dd>Presentación visual</dd>
</dl>

<p>Progreso del curso:</p>
<progress value="72" max="100">72%</progress>

<p>Nivel de batería:</p>
<meter value="0.45" min="0" max="1" low="0.2" high="0.6" optimum="1">45%</meter>

1 Etiquetas de texto con intención real 2 Definiciones y métricas: dfn, dl, progress y meter

🧪 Aprende probando

Ejemplo Demo interactiva: markup de texto semántico en contexto Recorre casos reales con `mark`, `abbr`, `kbd`, `del/ins`, `dfn`, `dl`, `progress` y `meter`.

⌄

🏁 Retos

Reto Reto: distinguir `progress` de `meter` Construye un bloque con una barra de avance y una medición de estado.

⌄

🧰 Recursos

Enlaces útiles

MDN - Elementos de texto en HTML MDN - progress MDN - meter

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 04

Encabezados (h1 a h6) y párrafos (p)

Lección 06

Listas y enlaces: estructura navegable y contenido útil

›