HTML <dir> Tag
Last Updated :
20 Dec, 2023
The HTML <dir> tag is used to make a list of directory titles. It is not supported in HTML4 as in HTML5 <ul> or CSS are used instead of <dir> tag. The <dir> tag is deprecated & no longer supported in HTML5
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>GeeksforGeeks</h1>
<h2>
<dir> Tag
</h2 <p>List of all computer science subjects:</p>
<dir>
<li>Operating system</li>
<li>Data Structures</li>
<li>computer network</li>
<li>Dbms</li>
<li>Oops</li>
</dir>
</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>GeeksforGeeks</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;
}
.geeks {
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...