HTML dir Attribute Tutorial

In this section, we will learn what the dir attribute is and how to use it in HTML.

HTML dir Attribute Definition and Usage

The dir attribute stands for direction and is used to set the direction of the content of an element.

By default, text content of an element like <p> is set to “ltr” which means content should be displayed from left to right direction.

But, with the help of dir attribute we can change this default behavior to “rtl” which means content should be display from right to left instead.

HTML dir Attribute Syntax

<element dir = “ltr | rtl | auto”>

HTML dir Attribute Values

There are three values that could be used for the dir attribute:

  • “ltr”: this is the default value and it stands for Left to Right.
    That means the content should be displayed from left to right
    direction.

  • “rtl”: this value stands for Right to Left and we use it to
    display content from Right to Left direction.

  • auto: using this value we mean browsers should decide
    automatically on what direction the content should be
    displayed.

Example: dir ltr and dir rtl

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
</head>
<body >
<p dir="rtl"> The direction of this content is from Right to Left </p>
<p dir="ltr"> The direction of this content is from Left to Right </p>
<p dir="auto"> The direction of this content is automatically set</p>
</body>
</html>