HTML <dir> Tag
Syntax
<dir> Lists... </dir>
Values
Values |
Descriptions |
ltr |
Used for languages that read from left to right, like English. |
rtl |
Used for languages that read from right to left, such as Arabic. |
auto |
Let the browser decide the text direction based on the content’s characters, applying the dominant direction to the whole element. |
Note: The compact attribute is not supported by any browser.
Example 1: Below example illustrates the <dir> tag in HTML.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 > < dir > Tag </ h2 <p>List of all computer science subjects:</ p > <!-- dir tag starts here--> < dir > < li >Operating system</ li > < li >Data Structures</ li > < li >computer network</ li > < li >Dbms</ li > < li >Oops</ li > </ dir > <!-- dir tag ends here--> </ body > </ html > |
Output:
Example 2: In this example we will see how to use dir tag with its values.
HTML
<!DOCTYPE html> < html > < head > < title >Text Direction Example</ title > </ head > < body > < h1 >w3wiki</ h1 > < p dir = "ltr" >I am Javascript</ p > < p dir = "rtl" > I am ReactJs but from right-to-left direction </ p > < p dir = "auto" > I am mixed directions: javascript (ltr) and react (rtl) </ p > </ body > </ html > |
Output:
Optional Attributes
This tag contains single attributes Compact which is optional. It is used to specify the list size render smaller than normal by reducing the space between list items. It is a boolean attribute.
Example: In this example, we will see the implementation of optional attribute.
HTML
<!DOCTYPE html> < html > < head > < title >dir tag</ title > < style > .gfg { font-size: 40px; font-weight: bold; color: green; } .Beginner { font-size: 25px; font-weight: bold; } </ style > </ head > < body > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" > < dir > Tag </ div > < p >List of all computer science subjects:</ p > < dir compact> < li >Operating system</ li > < li >Data Structures</ li > < li >computer network</ li > < li >Dbms</ li > < li >Oops</ li > </ dir > </ body > </ html > |
Output:
Supported Browsers
- Google Chrome
- Firefox
- Opera
- Safari
Contact Us