Language and Text Direction

What Is It?

The lang attribute tells the browser what language the text uses. The dir attribute sets text direction.

What the Tags Mean

• lang="en": English.
• lang="hi": Hindi.
• dir="rtl": right-to-left text.
• bdi: keeps mixed-direction text from disturbing nearby text.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Language and Text Direction</title>
 
</head>
<body>
<p lang="en">Hello!</p>
<p lang="hi">नमस्ते!</p>
</body>
</html>

What you see: You see two greetings. The language attributes help tools such as screen readers read them.

Example 2: Another Use

Use right-to-left direction for text written that way.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Language and Text Direction</title>
 
</head>
<body>
<p lang="ar" dir="rtl">مرحبا</p>
</body>
</html>

Simple Tip

Set the main language on the html element, then mark smaller parts that use another language.

Try It Yourself

Add a sentence in another language and set its lang attribute.