Lang and dir
Build bidirectional and multilingual structures with lang and dir.
The lang and dir attributes
You already declare the page language with <html lang="en">. This lesson adds dir: it sets the text direction. It takes two core values: ltr (left to right) and rtl (right to left).
The browser uses dir to lay out text flow, punctuation and table column order. Arabic, Hebrew and Persian are written right to left, so they need dir="rtl". English and Turkish default to ltr, so you do not have to write it.
Which languages are rtl?
Arabic, Hebrew, Persian, Urdu and Pashto are written right to left. For a page in these languages you write <html lang="ar" dir="rtl">.
Left-to-right languages (English, Turkish, German, French) default to dir="ltr", so you do not have to add it. But you can still set dir on a section to override the page direction when needed.
Exercise Arabic page skeleton
Write the <html> tag for an Arabic page. Add lang="ar" and dir="rtl". Inside it put a <head> and a <body>. In the head add <meta charset="utf-8">. In the body add an <h1> with the text Marhaba.
Show example solution
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<title>Marhaba</title>
</head>
<body>
<h1>Marhaba</h1>
</body>
</html>Test yourself
-
What should dir be for an Arabic page?
- ltr
- rtl
- auto
- inherit
Show answer
rtl — Correct. Arabic is written right to left, so dir="rtl".
-
Complete the Arabic html tag
<html lang="ar" ____> <head></head> <body></body> </html>Show answer
<html lang="ar" dir="rtl"> <head></head> <body></body> </html> -
Match direction and language values
- ltr
- Left to right
- rtl
- Right to left
- auto
- Browser decides
- lang="ar"
- Arabic language code