References

Beginner-friendly references for web development, with live, editable examples.

The HTML dir attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML dir attribute sets the base text direction: ltr (left-to-right), rtl (right-to-left, for languages like Arabic and Hebrew), or auto (let the browser infer it from the content). It is a global attribute.

Overview

The dir attribute declares the base writing direction of an element's text. Left-to-right languages use ltr (the default), while right-to-left scripts such as Arabic, Hebrew and Persian use rtl, which flips the text flow and the alignment of punctuation and surrounding layout.

The auto value asks the browser to determine direction from the first strongly-typed character — ideal for user-generated content whose language you cannot predict. Set dir on <html> to establish the page direction and pair it with the lang attribute, which describes the language itself.

Syntax

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

<!-- Unknown direction (e.g. user content) -->
<bdi dir="auto">…</bdi>

Values

Value
ltr | rtl | auto

Example

Live example 
<p dir="rtl" lang="ar">مرحبا بالعالم</p>

Best practices

  • Set dir on <html> to match the page's primary language direction.
  • Use dir="auto" for user-generated content whose direction you cannot know in advance.
  • Pair dir with the lang attribute — they describe different things.
  • Prefer the dir attribute over the CSS direction property for semantic, content-driven direction.

Accessibility

Correct directionality is part of presenting content accurately to everyone. When right-to-left text is marked with dir="rtl", punctuation, mirrored layout and reading order line up as readers expect; without it, mixed-direction text can become jumbled and hard to follow.

Frequently asked questions

What does the dir attribute do?
It sets the base text direction of an element: left-to-right, right-to-left, or automatically detected.
When should I use dir="rtl"?
For content in right-to-left languages such as Arabic, Hebrew, Persian and Urdu.
What does dir="auto" do?
It lets the browser pick the direction from the content's first strong character — useful for user-generated text of unknown language.
Do I still need dir if I set lang?
Yes. lang describes the language; dir describes the writing direction. Set both for right-to-left content.
data (attr) draggable