Etiqueta rp en HTML
¿Qué es la etiqueta <rp> en HTML?
La etiqueta HTML <rp> es una etiqueta de formato de texto que se utiliza junto con la etiqueta <ruby> para indicar texto que debe ser mostrado en navegadores que no soportan la etiqueta <ruby>.
La etiqueta <rp> define el contenido que se mostrará antes y después del contenido ruby, es decir, antes y después de la pronunciación o explicación de un texto en otro idioma.
La etiqueta <ruby> se utiliza para anotar texto con una pronunciación o explicación en otro idioma. La etiqueta <rp> se utiliza para indicar cómo debe ser mostrado el contenido ruby en navegadores que no soportan esta etiqueta.
Ejemplo de uso
El contenido de la etiqueta <rp> se mostrará antes y después del contenido ruby. Por ejemplo:
<ruby>日本語<rp>(</rp><rt>Nihongo</rt><rp>)</rp></ruby>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <ruby> indica que el texto “日本語” tiene una pronunciación o explicación en otro idioma, que se especifica con la etiqueta <rt>.
La etiqueta <rp> se utiliza para indicar cómo se mostrará el contenido ruby en navegadores que no soportan la etiqueta <ruby>, y en este caso se muestra con paréntesis.
Es importante tener en cuenta que la etiqueta <rp> no es necesaria si se utiliza la etiqueta <ruby> en navegadores que soportan esta etiqueta.
Atributos
La etiqueta HTML “rb” no tiene atributos específicos, ya que su función es simplemente indicar el carácter base del texto en el que se anotará.
Sin embargo, se pueden utilizar atributos universales como “class” y “id” para aplicar estilos CSS y para enlazar con scripts.
Es importante mencionar que las etiquetas “ruby” son diseñadas para mejorar la accesibilidad del texto para personas con discapacidad visual o discapacidad del habla, no tienen un propósito específico en términos de accesibilidad o SEO, pero su uso es recomendado para mejorar la accesibilidad del texto.
Más ejemplos
Aquí te presento tres ejemplos sencillos de cómo se puede utilizar la etiqueta <rp> en HTML5 en conjunto con las etiquetas de anotación ruby:
Ejemplo 1: Utilizando la etiqueta <rp> para especificar el texto de apoyo en un idioma asiático.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rp</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra japonesa "sakura": <ruby>桜<rp>(</rp><rt>さくら</rt><rp>)</rp></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto japonés.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo (la pronunciación de “sakura”) y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
El texto de apoyo se muestra entre paréntesis y se coloca antes del texto principal en este caso.
Ejemplo 2: Utilizando la etiqueta <rp> en conjunto con CSS para personalizar la apariencia de la anotación ruby.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rp con CSS</title>
<style>
rp {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra china "zhōngguó": <ruby>中国<rp>(</rp><rt>zhōng guó</rt><rp>)</rp></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto chino.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
Hemos aplicado estilos personalizados al texto de apoyo utilizando CSS en la regla CSS definida para la etiqueta <rp>.
Ejemplo 3: Utilizando la etiqueta <rp> para indicar el texto de apoyo en un idioma bidireccional.
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Ejemplo de etiqueta rp con texto bidireccional</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby en árabe: <ruby>الخَمِيس<rp>(</rp><rt>khamīs</rt><rp>)</rp></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en árabe.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
Hemos especificado la dirección del texto en el encabezado HTML utilizando el atributo “dir” con el valor “rtl”, lo que indica que el texto se escribe de derecha a izquierda.
Hemos utilizado la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby y se coloca después del texto principal en este caso.