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

Next lesson: Hreflang strategy

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies