Skip to main content
Validación HTML

Este documento parece estar escrito en árabe. Considera añadir “dir=”rtl”” a la etiqueta de inicio “html”.

Acerca de este problema HTML

El atributo dir especifica la dirección base del texto para el contenido de un elemento. Cuando un documento está escrito en un idioma de derecha a izquierda como árabe, hebreo, persa (farsi) o urdu, el navegador necesita saber que el texto debe fluir de derecha a izquierda. Sin este atributo, los navegadores por defecto renderizan de izquierda a derecha (ltr), lo que puede causar una variedad de problemas: la alineación del texto puede ser incorrecta, la puntuación puede aparecer en el lugar equivocado, y el diseño general de la página puede verse roto o confuso para los lectores nativos.

Esto importa por varias razones importantes:

  • Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia dependen del atributo dir para anunciar y navegar correctamente el contenido. Sin él, la experiencia de lectura para usuarios que dependen de estas herramientas puede ser desorientadora o incorrecta.
  • Corrección visual: Elementos como listas, tablas, etiquetas de formulario y menús de navegación reflejarán su diseño en modo RTL. Sin dir="rtl", estos elementos por defecto usan posicionamiento LTR, que se siente antinatural para los hablantes de idiomas RTL.
  • Manejo de texto bidireccional: Los documentos a menudo contienen contenido de dirección mixta (ej., texto árabe con palabras en inglés incrustadas, números o nombres de marca). El Algoritmo Bidireccional Unicode (BiDi) usa la dirección base establecida por dir para resolver correctamente el orden de estas secuencias mixtas de texto.
  • Cumplimiento de estándares: El Estándar HTML Living de WHATWG recomienda que los autores establezcan el atributo dir para coincidir con el idioma del documento, y las guías de Internacionalización de W3C lo alientan fuertemente para idiomas RTL.

Cómo solucionarlo

Añade dir="rtl" a tu etiqueta de inicio <html>. Si aún no lo has hecho, también incluye el atributo lang apropiado para el idioma específico que estás usando.

Para árabe:

<html dir="rtl" lang="ar">

Para hebreo:

<html dir="rtl" lang="he">

Para persa:

<html dir="rtl" lang="fa">

Ejemplos

❌ Atributo dir faltante en un documento árabe

<!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="utf-8">
    <title>مرحبا بالعالم</title>
  </head>
  <body>
    <h1>مرحبا بالعالم</h1>
    <p>هذه صفحة تجريبية باللغة العربية.</p>
  </body>
</html>

El navegador renderizará esta página con una dirección base de izquierda a derecha. El texto del encabezado y párrafo puede aparecer alineado a la izquierda, y cualquier contenido de dirección mixta (como números incrustados o palabras en inglés) puede ser ordenado incorrectamente.

✅ Correcto: dir="rtl" añadido a la etiqueta <html>

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8">
    <title>مرحبا بالعالم</title>
  </head>
  <body>
    <h1>مرحبا بالعالم</h1>
    <p>هذه صفحة تجريبية باللغة العربية.</p>
  </body>
</html>

Ahora el navegador sabe que debe renderizar la página de derecha a izquierda. El texto se alineará a la derecha por defecto, las barras de desplazamiento aparecerán a la izquierda, y el diseño general se sentirá natural para los lectores árabes.

Manejo de contenido de dirección mixta dentro de una página

Si tu documento RTL contiene secciones en un idioma de izquierda a derecha, usa el atributo dir en elementos individuales para anular la dirección base localmente:

<p>قام المستخدم بزيارة <span dir="ltr">www.example.com</span> اليوم.</p>

Esto asegura que la URL se renderice en el orden correcto de izquierda a derecha mientras el texto árabe circundante fluye de derecha a izquierda. Establecer dir="rtl" en el elemento <html> establece el valor por defecto correcto, y solo necesitas anulaciones por elemento para contenido LTR incrustado.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.