What is dir Attribute in HTML ?

Last Updated : 14 Jan, 2022

This is an HTML attribute that is used to specify the text direction of the element content. HTML dir attribute is a global attribute that means it can be applied on any HTML tags for the direction of the element.

Syntax:

<element dir = "ltr | rtl | auto">

Attribute Value: This attribute contains three values which are listed below.

ltr: It is the default value. This value represents the text in the left-to-right text direction.
rtl: This value represents the text in the right-to-left text direction.
auto: let the browser figure out the text direction, based on the content.

Example 1: In this example, we will set the dir value rtl. The below example illustrates the dir attribute in HTML.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            h1 { 
                color:green; 
            } 
            h1, h2 { 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>HTML dir attribute</h2> 
        <p dir="rtl">GeeksforGeeks: A 
        computer science portal for geeks</p> 
  
    </body> 
</html>

Output:

In this example we will set the dir value rtl.

Example 2: The dir attribute is set to “ltr” in the following example.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            h1 { 
                color:green; 
            } 
            h1, h2 { 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>HTML dir attribute</h2> 
        <p dir="ltr">GeeksforGeeks: A 
        computer science portal for geeks</p> 
  
  
    </body> 
</html>