Etiqueta HTML `<ruby>`

La etiqueta <ruby> define una anotación ruby. Se utiliza en japonés y en lenguas del este de Asia. Una anotación ruby es un pequeño texto adicional vinculado al texto principal para indicar el significado o la pronunciación de los caracteres equivalentes. Los paréntesis de respaldo se colocan en la etiqueta <rp>. La anotación se muestra en letra pequeña sobre los caracteres.

La etiqueta <ruby> es uno de los elementos HTML5.

Puedes utilizar la etiqueta <ruby> junto con las etiquetas <rp> y/o <rt>. La etiqueta <ruby> consta de uno o más caracteres que necesitan pronunciación o explicación. La etiqueta <rt> proporciona esa información, y la etiqueta <rp> define un texto alternativo, que se muestra en los navegadores que no admiten la etiqueta <ruby>.

Sintaxis

La etiqueta <ruby> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<ruby>) y cierre (</ruby>).

Ejemplo de la etiqueta HTML `<ruby>`:

Etiqueta HTML <ruby>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Try it Yourself »

Resultado

ruby tag example

Atributos

La etiqueta <ruby> admite los Atributos globales y los Atributos de eventos.

Cómo dar estilo a una etiqueta HTML <ruby>

css

ruby {
  color: blue;
}
rt {
  color: red;
}

Práctica

¿Cuál es el propósito de la etiqueta HTML <ruby>?

Se utiliza para incrustar un video.Se utiliza para crear secciones en un documento.Se utiliza para agregar una anotación ruby al texto.Se utiliza para representar breves fragmentos de texto junto al texto base, típicamente utilizado en la tipografía del este de Asia para indicar la pronunciación o proporcionar una breve anotación.Se utiliza para insertar una imagen.

Etiqueta HTML <ruby> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <ruby>: ​

Resultado ​