HTML dir Tag: Step-by-Step Guide with Examples & Best Practices
What is the dir Tag?
The <dir>
tag in HTML was originally used to create a directory listβa simple list of items typically displayed in a multi-column layout. Itβs similar to the <ul>
tag (unordered list), but with a focus on directories.
β οΈ Note: The
<dir>
tag is deprecated in HTML4 and obsolete in HTML5. Modern HTML uses<ul>
and<ol>
instead.
Step-by-Step Guide to Using dir
πΉ Step 1: Basic Syntax
<dir>
<li>Documents</li>
<li>Images</li>
<li>Videos</li>
</dir>
This creates a list of items as if you were listing folders or directory contents.
πΉ Step 2: Add Styling with CSS (Optional)
Though rarely used today, you can still style <dir>
if needed:
<dir style="font-family: Arial; color: darkblue;">
<li>Project Files</li>
<li>Designs</li>
<li>Notes</li>
</dir>
πΉ Step 3: Replace with Modern HTML
Instead of using <dir>
, use the semantic <ul>
tag:
<ul>
<li>Documents</li>
<li>Images</li>
<li>Videos</li>
</ul>
π Examples: <dir>
vs <ul>
β Deprecated (Not Recommended):
<dir>
<li>Folder 1</li>
<li>Folder 2</li>
</dir>
β Recommended:
<ul>
<li>Folder 1</li>
<li>Folder 2</li>
</ul>
Why You Should Avoid dir
β Deprecated in HTML4
β Removed in HTML5
β Not supported in modern screen readers or browsers
β
Use <ul>
or <ol>
for accessibility and SEO
Best Practices
Always use <ul>
or <ol>
for lists.
Use <li>
for each list item, even in modern alternatives.
Keep your HTML semantic to improve SEO and accessibility.
Validate your HTML using W3C Validator.
Avoid deprecated tags unless you’re working with legacy code.