Skip to content
Related Articles

Related Articles

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

What is dir Attribute in HTML ?

Improve Article
Save Article
Like Article
  • 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.

  1. ltr: It is the default value. This value represents the text in the left-to-right text direction.
  2. rtl: This value represents the text in the right-to-left text direction.
  3. 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>

Output:

In this example we will set the dir value ltr.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!