HTML <dir> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand the obsolete <dir> element and the modern replacements you should use instead.

What Was the <dir> Tag?

The <dir> element (short for “directory”) was an HTML list container for displaying file and folder names. It worked like a compact bullet list, similar to the also-obsolete <menu> element. Early HTML used it before <ul> became the standard list element.

HTML5 consolidated list markup under ul. Learn <dir> to read legacy HTML, but use semantic unordered lists in all new work.

<ul>
  <li>Documents</li>
  <li>Pictures</li>
  <li>Music</li>
</ul>

📝 Syntax (Historical)

Legacy markup wrapped li items inside dir:

<dir>
  <li>Documents</li>
  <li>Pictures</li>
  <li>Music</li>
</dir>

• <dir> held <li> list items—like ul and menu.
• The obsolete compact attribute reduced spacing—use CSS instead.
• Do not confuse the dir element with the dir attribute.
• Browsers may still render old dir markup for backward compatibility only.

⚖️ <dir> Element vs dir Attribute

These share a name but serve completely different purposes:

Examples Gallery

Historical <dir> patterns plus modern ul replacements. Legacy examples are for learning only—do not use in new code.

<dir>
  <li>Documents</li>
  <li>Pictures</li>
  <li>Music</li>
</dir>

<ul class="directory-list">
  <li>Documents</li>
  <li>Pictures</li>
  <li>Music</li>
</ul>

<ul>
  <li>File 1</li>
  <li>File 2</li>
  <li>Folder 1
    <ul>
      <li>Subfile 1</li>
      <li>Subfile 2</li>
    </ul>
  </li>
</ul>

<p dir="ltr">Left-to-right: Hello, welcome.</p>
<p dir="rtl">Right-to-left: مرحبًا بكم.</p>

♿ Accessibility

Use semantic list markup and the correct direction tools:

• Use ul for lists — screen readers announce list length and item position.
• Use dir attribute for RTL — set dir="rtl" on content in Arabic, Hebrew, etc.
• Do not use the dir element — it is obsolete and lacks modern semantic meaning.
• Nest ul for hierarchy — nested lists convey folder structure to assistive tech.

💡 Best Practices