acerca de HTML

Referencia de etiquetas

Etiqueta rt en HTML: texto de una anotación ruby

Dentro de <ruby>, la etiqueta <rt> contiene el texto de la anotación. Por ejemplo, permite añadir la lectura de una palabra japonesa escrita con kanji y mostrarla junto a la escritura original.

Ejemplo mínimo de rt

<ruby lang="ja">漢字<rt>かんじ</rt></ruby>

La base es 漢字 y el contenido de <rt>, かんじ, indica cómo se lee esa palabra: kanji. En la presentación habitual del navegador, la lectura aparece más pequeña, normalmente encima de la base. No es un texto independiente ni el texto principal. Esta lectura puede contrastarse en el material de japonés de la Fundación Japón.

Puedes probar el fragmento dentro de un párrafo en el documento completo de la sección práctica.

Sintaxis y contexto válido

Escribe <rt>anotación</rt> como hijo de <ruby>, después del texto al que corresponde. Su contenido permitido es contenido de frase, como texto o un <span>; un párrafo <p> o una sección <section> no pertenecen a ese modelo.

Aunque los ejemplos muestran </rt>, HTML permite omitir ese cierre si inmediatamente después viene otro <rt> o un <rp>, o si no queda más contenido en el padre. Mantener el cierre explícito facilita ver dónde termina cada lectura. Si después de <rt> escribes otra base, como en el ejemplo por caracteres, necesitas cerrarlo para que esa base no forme parte de la anotación. Consulta las reglas del HTML Living Standard para <rt>.

No coloques <rt> directamente en un párrafo, fuera de <ruby>. Que el navegador consiga mostrar su texto no convierte ese contexto en válido.

Caso práctico: palabra completa y lectura por caracteres

Una ficha para aprender vocabulario puede presentar 日本語, que significa «idioma japonés». Su lectura es にほんご (nihongo), como muestra el curso Irodori de la Fundación Japón.

Guarda este documento como lecturas-rt.html en UTF-8 y ábrelo en el navegador. Incluye todo el HTML y CSS necesario, sin fuentes externas ni scripts.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dos maneras de anotar una palabra</title>
    <style>
      body {
        font-family: sans-serif;
        line-height: 2;
        overflow-wrap: anywhere;
        max-width: 36rem;
        margin: 2rem auto;
        padding: 0 1rem;
      }

      .ficha {
        font-size: 1.4rem;
      }

      .ficha rt {
        font-size: 0.65em;
      }
    </style>
  </head>
  <body>
    <h1>Una palabra, dos anotaciones</h1>
    <p class="ficha">Palabra completa:
      <ruby lang="ja">日本語<rt>にほんご</rt></ruby>.
    </p>
    <p class="ficha">Por caracteres:
      <ruby lang="ja">日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>.
    </p>
    <p>Lectura escrita: <span lang="ja">にほんご</span> (nihongo).
      Significa «idioma japonés».
    </p>
  </body>
</html>

En la primera línea, un único <rt> anota toda la base 日本語. En la segunda, cada anotación corresponde al carácter que la precede: 日 → に, 本 → ほん y 語 → ご. Son partes de la lectura de esta palabra: no asumas que esos caracteres se leen así en cualquier otra combinación. Las etiquetas no deciden la segmentación lingüística; debes comprobarla antes de escribirla.

La presentación por caracteres permite identificar cada asociación, mientras que la de palabra completa evita dividir una lectura que quieras tratar como una unidad. Los espacios y saltos del documento rodean al <ruby>; dentro del ejemplo por caracteres, cada base y su anotación permanecen contiguas.

Comprueba estas modificaciones una a una y restaura el documento antes de la siguiente:

  1. Cambia にほんご del primer <rt> por nihongo. Verás la nueva anotación sobre la misma base; declara lang="ja-Latn" en ese <rt> para identificar la transliteración en alfabeto latino.
  2. Elimina ese <rt> completo, incluido su contenido. Quedará 日本語 sin la lectura. Si solo retiras las etiquetas y conservas にほんご, ese texto deja de ser una anotación y pasa a formar parte de la base.
  3. Retira el bloque <style>. Se conserva la relación entre base y anotación, con el tamaño y la distribución predeterminados del navegador.

Prueba también una ventana estrecha y el zoom: la lectura debe seguir siendo legible y disponer de espacio entre líneas.

Diferencia entre rt y rp

<rt> contiene la anotación. <rp> contiene delimitadores alternativos, normalmente paréntesis, que separan esa anotación cuando no se usa la presentación ruby:

<ruby lang="ja">漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

Con ruby, los paréntesis normalmente se ocultan y la lectura se presenta junto a la base. En una presentación lineal sin ruby, la secuencia prevista es 漢字(かんじ). Quitar los dos <rp> no elimina la lectura; quitar <rt> con su contenido sí la elimina. Poner la pronunciación en <rp> puede ocultarla, porque ese elemento no ocupa el lugar de <rt>. La guía de <rp> explica cómo simular y comprobar esta alternativa.

Atributos, presentación y accesibilidad

<rt> no tiene atributos específicos. Admite los globales: lang identifica el idioma, class permite seleccionar el elemento desde CSS e id le da un identificador. lang="ja" en el <ruby> del ejemplo se hereda en la anotación; si esta usa otro idioma o sistema de escritura, decláralo en <rt>.

Ajusta font-size y line-height en CSS si la lectura resulta demasiado pequeña o se acerca a la línea anterior. Sigue siendo una anotación aunque cambies su tamaño.

Los lectores de pantalla pueden tratar la base y la anotación de formas distintas. El atributo lang aporta contexto lingüístico, sin garantizar una pronunciación idéntica entre productos. Cuando la lectura sea esencial, ofrece además una explicación textual, como la última línea de la ficha, y comprueba la combinación de navegador y lector utilizada por tu audiencia. Los mapeos de accesibilidad de HTML para <rt> distinguen esa exposición de su presentación visual.

Errores frecuentes y preguntas

¿Rt se puede usar sola? No. Su contexto válido es <ruby>; para un texto pequeño corriente, usa un elemento adecuado a su significado y CSS.

¿Rt contiene el texto principal? No. La base se escribe fuera de <rt>, dentro de <ruby>. Si inviertes ambos textos, también inviertes qué contenido estás anotando.

¿Por qué la lectura se mezcla con la palabra? Comprueba el padre <ruby>, los cierres antes de la siguiente base y que el texto esté dentro de <rt>. Revisa después si tus estilos cambian display, ocultan <rt> o reducen demasiado su tamaño.

<ruby> reúne la base y sus anotaciones; <rt> escribe cada anotación y <rp> aporta su delimitación alternativa. Usa texto corriente entre paréntesis si quieres que una lectura se vea siempre en línea, como explicación adicional.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <rt> como ampliamente disponible. El soporte del elemento no garantiza una distribución tipográfica o una lectura asistida idéntica en todos los entornos. Los estilos del caso práctico solo ajustan tamaño y espacio entre líneas.

Consulta la definición normativa de <rt> en WHATWG para significado, contexto, contenido y cierres, y la referencia de MDN sobre <rt> para explicación y compatibilidad.