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.