HtmlConceptBeginner · 3 min read

What is dir Attribute in HTML: Definition and Usage

The dir attribute in HTML specifies the text direction for the content inside an element. It can be set to ltr for left-to-right text, rtl for right-to-left text, or auto to let the browser decide based on the content.

⚙️

How It Works

The dir attribute tells the browser which direction to display the text inside an HTML element. Think of it like choosing whether you read a book from left to right or right to left. For example, English is read left to right, while Arabic is read right to left.

When you set dir="ltr", the text flows from left to right. When you set dir="rtl", the text flows from right to left. If you use dir="auto", the browser looks at the first strong character in the text and decides the direction automatically. This helps when you have mixed languages or dynamic content.

Using dir is like telling your webpage how to arrange the words so they look natural and easy to read for different languages.

💻

Example

This example shows three paragraphs with different dir values to demonstrate text direction.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dir Attribute Example</title>
</head>
<body>
  <p dir="ltr">This text flows from left to right (English).</p>
  <p dir="rtl">هذا النص يتدفق من اليمين إلى اليسار (Arabic).</p>
  <p dir="auto">12345 This text direction is chosen automatically.</p>
</body>
</html>

Output

This text flows from left to right (English). هذا النص يتدفق من اليمين إلى اليسار (Arabic). 12345 This text direction is chosen automatically.

🎯

When to Use

Use the dir attribute when your webpage contains text in languages that read right to left, like Arabic, Hebrew, or Persian. It ensures the text appears correctly and is easy to read.

It's also helpful when you have mixed content or user-generated text where the direction might change. Setting dir="auto" lets the browser pick the right direction without you needing to guess.

For example, if you build a chat app or a multilingual website, using dir helps keep the text aligned properly and improves user experience.

✅

Key Points

The dir attribute controls text direction in HTML elements.
Values: ltr (left-to-right), rtl (right-to-left), and auto (automatic).
Important for languages that read right to left.
Helps browsers display text naturally and improves readability.
Use dir="auto" for mixed or unknown language content.

✅

Key Takeaways

The dir attribute sets text direction to left-to-right, right-to-left, or automatic.

Use dir to display languages like Arabic or Hebrew correctly on your webpage.

Setting dir="auto" lets the browser decide text direction based on content.

Proper text direction improves readability and user experience for multilingual sites.

Always include dir when working with right-to-left languages or mixed content.