Language and Text Direction: lang, dir and bdi

The lang and dir attributes tell browsers which language your HTML is in and which way the text flows. Learn how to use lang, dir="rtl", dir="auto", bdi and bdo correctly.

How to set the page language with lang

You have used <html lang="en"> since your first page. The lang attribute says which human language the content is written in. It uses short language codes:

• en for English, es for Spanish, fr for French, ar for Arabic, ur for Urdu, zh for Chinese.
• You can add a region after a dash: en-GB (British English), en-US (American English), pt-BR (Brazilian Portuguese).

Set lang once on the <html> element for the main language. Then, if part of the page is in a different language, add lang just to that part.

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <title>Our Spanish Cooking Class</title>
</head>
<body>
  <h1>Learn to cook paella</h1>
  <p>Our teacher always starts by saying <span lang="es">"¡Buen provecho!"</span>, which means "enjoy your meal".</p>
  <blockquote lang="fr">
    <p>La cuisine, c'est l'art de rendre heureux.</p>
  </blockquote>
  <p>That French quote means "cooking is the art of making people happy".</p>
</body>
</html>

The page looks the same as without the attributes. The difference is in what tools understand: the page is British English, the greeting is Spanish, and the quote is French.

Why the lang attribute matters

• Screen reader pronunciation: a screen reader switches its voice to the right language. Without lang="es", "¡Buen provecho!" would be read with English sounds and be hard to understand.
• Translation: browsers use lang to decide whether to offer translation, and translation tools know which parts are already in another language.
• Hyphenation: the CSS rule hyphens: auto splits long words at the end of a line, but only when the browser knows the language. It needs the right lang to know where words can break.
• Fonts and quotes: some languages, like Chinese and Japanese, share characters but are drawn differently. lang helps the browser pick the right font shapes.
• Spell checking: spellcheck in forms uses the language of the page.

Common mistake: Using the wrong code, like lang="english" or lang="uk". uk is the code for Ukrainian! British English is en-GB.

Right-to-left text: dir="rtl" for Arabic, Hebrew and Urdu

Some languages, such as Arabic, Hebrew, Persian and Urdu, are written from right to left. The dir attribute sets the text direction:

• dir="ltr": left to right (the default).
• dir="rtl": right to left.
• dir="auto": let the browser guess from the first strong letter in the text.

For a whole page in Arabic, set both lang and dir on <html>. The browser then lines up text on the right, puts list bullets on the right, and even moves table columns and the scrollbar side to match.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>مقهى الورقة الخضراء</title>
</head>
<body>
  <h1>مرحبا بكم في مقهى الورقة الخضراء</h1>
  <p>نقدم القهوة الطازجة والكعك كل يوم.</p>
  <p dir="ltr" lang="en">Opening hours: 8 am to 6 pm</p>
</body>
</html>

The Arabic heading and paragraph line up on the right side of the screen. The English line has its own dir="ltr" and lang="en", so it reads left to right.

Tip: Always use the dir attribute in HTML for text direction, not only the CSS direction property. Direction is part of the content's meaning, so it belongs in the HTML, and it still works if the CSS fails to load.

dir="auto", bdi and bdo for mixed text

On many sites, you don't know which language users will write in: comments, usernames, search boxes. Use dir="auto" there, so each piece of text gets the right direction.

<label for="comment">Your comment</label>
<textarea id="comment" name="comment" dir="auto"></textarea>

<ul>
  <li><bdi>Sam</bdi>: 12 posts</li>
  <li><bdi>إيمان</bdi>: 8 posts</li>
  <li><bdi>David</bdi>: 3 posts</li>
</ul>

<p>The code is written backwards here: <bdo dir="rtl">HELLO</bdo></p>

If someone types Arabic into the textarea, it switches to right to left by itself. In the list, <bdi> (bidirectional isolation) keeps each username separate from the text around it. Without it, an Arabic name can "pull" the following ": 8" into its right-to-left flow, and the number may jump to the wrong side. With <bdi>, every line reads correctly.

<bdo> (bidirectional override) is different: it forces a direction, even for letters that normally go the other way. The example shows "OLLEH". You will rarely need it; <bdi> and dir="auto" solve most real problems.

Multi-language websites and hreflang

lang describes the language of the content on this page. If you have separate pages for each language, for example /en/ and /es/, you also use <link rel="alternate" hreflang="..."> in the head, so search engines show the right version to each visitor. You will learn about it in the SEO module. You can also read more on MDN: the lang attribute.

Practice exercise

Make a "Welcome" page in English with a list of greetings from around the world: Spanish, French, Arabic and Hebrew. Put each greeting in a <span> with the correct lang, and add dir="rtl" to the Arabic and Hebrew ones. Then add a guest book list where each name is wrapped in <bdi>.

Hint: "hello" is "Hola" (es), "Bonjour" (fr), "مرحبا" (ar) and "שלום" (he).

Key takeaways

• Set lang on <html>, and on any part written in another language.
• lang helps screen reader pronunciation, translation, hyphenation and fonts.
• Use dir="rtl" with lang for Arabic, Hebrew, Persian and Urdu pages.
• Use dir="auto" for user text and <bdi> around names or words that might be in any language.
• <bdo> forces a direction and is rarely needed; hreflang links different language versions.