Seis niveles de encabezados jerárquicos. Reglas clave: un solo h1 por página (título principal), no saltar niveles (h1→h3 rompe el outline), no usarlos por tamaño visual sino por jerarquía semántica. Los lectores de pantalla navegan entre encabezados con una tecla.

Elemento de bloque que representa un párrafo de texto. El navegador añade automáticamente un margen superior e inferior (generalmente 1em) para separar párrafos visualmente. Es el contenedor de texto más común del documento y no puede contener otros elementos de bloque como <div>, <h1> o <ul>.

No uses <p></p> vacíos para añadir espacio vertical — usa margin en CSS. Los lectores de pantalla anuncian párrafos vacíos de forma confusa.

Importancia semántica alta. Los lectores de pantalla pueden enfatizarla vocalmente. Úsalo para advertencias, términos clave o información crítica. <b> solo aplica estilo visual sin connotación semántica (nombres de productos, palabras clave en resultados de búsqueda).

Énfasis lingüístico que puede cambiar el significado de la oración ("no quiero ir" ≠ "no quiero ir"). Anidados, aumentan el énfasis. <i> se usa para términos técnicos, frases en otro idioma o voz de personaje — sin cambio de entonación.

Aplica negrita sin connotación semántica especial. La especificación HTML5 lo define para texto que merece atención visual sin implicar importancia extra: nombres de productos en una reseña, palabras clave en un resumen, el primer uso de un término. A diferencia de <strong>, no cambia el tono vocal de los lectores de pantalla.

Usa <b> para destacar nombres propios o términos técnicos la primera vez que aparecen, y reserva <strong> para advertencias o información verdaderamente crítica.

Aplica cursiva sin énfasis semántico. HTML5 lo reserva para texto en "voz alternativa": términos técnicos o científicos (Homo sapiens), frases en otro idioma (lorem ipsum), pensamientos de personajes en narrativa, nombres de barcos o aeronaves, y clasificaciones taxonómicas. A diferencia de <em>, no indica cambio de entonación.

Añade el atributo lang cuando el texto en cursiva esté en un idioma diferente al del documento: <i lang="la">lorem ipsum</i>. Esto mejora la pronunciación en lectores de pantalla.

Marca texto con una anotación no textual estilizada como subrayado. Según la especificación HTML5, sus usos correctos son: nombres propios en chino (rubí ortográfico), marcar errores ortográficos (text-decoration: red wavy underline) y anotaciones especiales en tipografía académica. El subrayado azul sigue siendo sinónimo de enlace en la web, por lo que <u> puede confundir a los usuarios si no se personaliza.

Evita usar <u> en texto general para subrayar visualmente — los usuarios lo confundirán con un hipervínculo. Si necesitas subrayado decorativo, usa CSS: text-decoration: underline.

Marca contenido que ya no es relevante o preciso, representado visualmente con tachado. Casos de uso típicos: precios originales junto a ofertas, tareas completadas en una lista visual, información desactualizada que se mantiene por contexto. No se debe confundir con <del>, que indica texto eliminado de un documento con historial de ediciones (como un changelog o diff).

Los lectores de pantalla no anuncian <s> de forma especial. Si la información tachada es importante (como un precio original), añade texto oculto visualmente con CSS para el contexto auditivo.

Resaltado contextual: texto relevante en el contexto actual (como un término buscado). No usar como sinónimo de <strong>. El color amarillo es del navegador — personalizable con CSS: mark { background: hotpink; color: black; }.

Representa texto de tamaño reducido para contenido secundario o legal: letra pequeña en contratos, derechos de autor, advertencias, notas al pie y descargos de responsabilidad. El navegador lo renderiza a un tamaño menor (típicamente 0.8em). En HTML5 perdió su carácter puramente presentacional — sí tiene valor semántico como "nota menor".

No uses <small> para reducir el tamaño de fuente en elementos decorativos — usa CSS. Está semánticamente reservado para contenido que el usuario no necesita leer con igual atención que el texto principal.

<sub> crea subíndices (texto bajado y reducido) y <sup> crea superíndices (texto elevado y reducido). Ambos tienen valor semántico y deben usarse únicamente cuando la posición del texto es parte del significado, no por razones puramente visuales. Sus usos principales: fórmulas matemáticas (x²), fórmulas químicas (H₂O), referencias a notas al pie (nota¹) y notación de unidades.

No uses <sub>/<sup> solo para efectos tipográficos decorativos. Si el texto elevado no cambia el significado, usa CSS con vertical-align y font-size en lugar de estos elementos.

Marca abreviaturas y acrónimos. El atributo title expone la expansión al pasar el cursor y la anuncia en lectores de pantalla. Pauta: define la expansión la primera vez que aparece en el texto. El navegador aplica un subrayado punteado para indicar que hay más información.

Marca el título de una obra creativa: libros, películas, canciones, pinturas, programas de TV, juegos, artículos de investigación, poemas, esculturas. El navegador lo renderiza en cursiva por defecto. Importante: <cite> es para títulos de obras, no para citar el nombre de una persona. Para citas de texto, combínalo con <blockquote> o <q>.

Puedes envolver <cite> en un <a> para enlazar directamente a la fuente: <cite><a href="...">El título</a></cite>.

Cita corta en línea. El navegador añade automáticamente comillas tipográficas adecuadas al idioma del documento («» en español, "" en inglés). El atributo cite acepta una URL para indicar la fuente original — no se muestra visualmente pero es accesible para herramientas de búsqueda. Para citas largas que requieran su propio bloque, usa <blockquote>.

Las comillas automáticas del navegador dependen del atributo lang del documento o del elemento. Si necesitas comillas específicas, personalízalas con CSS: q { quotes: "«" "»" "‹" "›"; }

Cita larga de otra fuente. El atributo cite acepta una URL para indicar la fuente (no visible, pero útil para motores de búsqueda). Combina con <footer> + <cite> para la atribución visible. No uses <blockquote> para sangrías visuales — eso es solo CSS.

Marca un fragmento de código de computadora — nombre de variable, función, comando, expresión o fragmento de programa. El navegador lo renderiza en fuente monoespaciada (monospace). Para código de múltiples líneas que preserve indentación y saltos de línea, siempre combínalo con <pre>: el patrón correcto es <pre><code>...</code></pre>. Solo <code> solo es para fragmentos en línea dentro del texto.

Las librerías de resaltado de sintaxis como Prism.js o highlight.js buscan <code> dentro de <pre>. Añade la clase del lenguaje: <code class="language-js">.

Preserva espacios y saltos de línea exactos del HTML. Ideal para código y arte ASCII. Atención: el contenido desborda si hay líneas muy largas — añade overflow-x: auto en el CSS. Combina con <code> dentro: <pre><code>…</code></pre>.

function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

Representa entrada del usuario a través del teclado, voz u otro mecanismo. Se usa principalmente en documentación técnica para mostrar atajos de teclado y comandos. El navegador lo muestra en fuente monoespaciada. Para combinaciones de teclas, anida múltiples <kbd>: <kbd>Ctrl</kbd> + <kbd>S</kbd>. También puede indicar entrada de menú anidando <kbd> dentro de otro.

CSS personalizado hace que <kbd> parezca una tecla física: kbd { border: 1px solid #ccc; border-radius: 3px; padding: 1px 6px; box-shadow: 0 2px 0 #999; }

Marca la salida de un programa o sistema informático: mensajes de error de terminal, respuestas de una API mostradas textualmente, salida de la consola del navegador. Se renderiza en fuente monoespaciada. Junto con <kbd>, <code> y <var> forma el conjunto semántico para documentación técnica, cada uno con su rol diferenciado: entrada, código fuente, variable y salida.

En documentación interactiva, <samp> puede combinarse con <kbd>: muestra el comando con <kbd> y la respuesta del sistema con <samp> para máxima claridad.

Marca una variable en el contexto de programación o matemáticas: nombres de variables en código (x, count), incógnitas matemáticas (n), parámetros de funciones y constantes simbólicas. El navegador lo renderiza en cursiva por defecto. Aporta semántica precisa en documentación técnica donde la distinción entre código literal y variables es importante.

En contexto matemático, considera usar MathML (<math>) para expresiones complejas. <var> es útil solo para referencias simples a variables dentro del texto prosa.

Dato temporal legible por máquinas. El atributo datetime usa formatos ISO 8601: 2024-12-25 (fecha), 18:30 (hora), 2024-12-25T18:30 (fecha+hora), 2024-W04 (semana), P1D (duración). Esencial para calendarios, Google Rich Results y lectores de pantalla.

Vincula contenido textual legible por humanos con un valor estructurado legible por máquinas mediante el atributo value. Es el equivalente de <time> pero para datos arbitrarios no temporales: códigos de producto (SKU), identificadores internos, valores numéricos normalizados. El texto visible puede ser cualquier representación amigable, mientras que value expone el valor técnico a scripts y motores de búsqueda.

Útil con JavaScript: el.value devuelve el valor del atributo directamente, permitiendo lógica de negocio sin tocar el texto que ve el usuario.

<data value="398">Manzanas</data>

Proporciona información de contacto del autor del <article> o <body> más cercano. Su contenido puede incluir dirección física, email, teléfono, redes sociales o cualquier método de contacto. El navegador lo renderiza en cursiva. Si está dentro de un <article>, es el contacto del autor de ese artículo; si está directamente en <body> o <footer>, es el contacto de la organización completa.

No uses <address> para direcciones postales genéricas que no sean de contacto del documento (como una dirección en un mapa o en un perfil). Para eso usa simplemente <p> con el texto.

Marca el término que está siendo definido en ese preciso momento. Su texto es el término en sí, no la definición. El párrafo o sección que lo contiene actúa como la definición. Puede combinarse con title para mostrar la forma expandida al hacer hover, o con id para que otros puntos del documento puedan enlazarlo con <a href="#def-html">. Se usa convenientemente en glosarios y documentación técnica.

Combina <dfn id="def-termino"> con <a href="#def-termino"> en el resto del documento para crear referencias cruzadas semánticamente correctas dentro de un glosario.

<ins> marca texto insertado y <del> texto eliminado. Ambos aceptan datetime (cuándo ocurrió el cambio) y cite (URL que justifica el cambio). Ideales para changelogs, precios actualizados y documentos con historial de ediciones.

Indica una oportunidad de salto de línea: el navegador solo rompe la palabra en ese punto si necesita hacerlo por falta de espacio. Es un elemento vacío (sin cierre). Ideal para URLs largas, palabras compuestas técnicas, nombres de archivos y cadenas sin espacios que deben mostrarse en contenedores estrechos. A diferencia de un guión (-), no añade ningún carácter visible al romper.

Alternativa CSS: word-break: break-all rompe en cualquier punto, mientras que overflow-wrap: break-word rompe solo cuando hay desbordamiento. <wbr> te da control preciso sobre los puntos de ruptura.

<bdo> (Bi-Directional Override) anula el algoritmo bidireccional del navegador para forzar la dirección del texto. Requiere el atributo dir con valor ltr o rtl. <bdi> (Bi-Directional Isolation) aísla un fragmento de texto cuya dirección se desconoce o puede variar — útil cuando se mezclan nombres de usuario u otro contenido dinámico que podría ser árabe, hebreo u otro idioma RTL con texto LTR.

En aplicaciones con contenido generado por usuarios (UGC) de distintos idiomas, usa siempre <bdi> o el atributo dir="auto" para evitar que texto árabe o hebreo rompa el layout de la página.

Implementa anotaciones ruby: pequeño texto sobre o al lado de caracteres base para indicar la pronunciación. Originario del este asiático (kanji japonés, caracteres chinos), también se usa para texto en lenguas antiguas o textos de aprendizaje de idiomas. <rt> contiene la anotación de pronunciación. <rp> es un fallback para navegadores sin soporte: su contenido (típicamente paréntesis) se muestra en su lugar cuando ruby no está soportado.

El soporte de <ruby> es universal en navegadores modernos. <rp> sigue siendo útil como fallback accesible — los paréntesis en texto normal son aceptables en lectores de pantalla sin soporte ruby.

<br> es un salto de línea semánticamente significativo, no solo presentacional: poesía, direcciones postales, letras de canciones — contextos donde la división de líneas forma parte del contenido. <hr> representa una ruptura temática o transición de escena dentro de una sección — no es una línea decorativa sino un separador de contenido con significado. Ambos son elementos vacíos (no necesitan cierre en HTML5).

No uses <br><br> para crear espacio entre párrafos — usa <p> con margin en CSS. Y no uses <hr> solo para dibujar una línea horizontal decorativa; para eso, usa CSS con border-top en un <div>.