<dir>

Definition and Usage

The <dir> tag was used in older versions of HTML to define a directory list. It was intended to create a list of files or directories.

However, browsers never rendered <dir> differently from a standard unordered list (<ul>), making it redundant.

In HTML5, you should use <ul> for unordered lists or <nav> for navigation menus.

Old Usage (HTML 3.2)

In older HTML versions, the <dir> tag was used like this:

<!-- HTML 3.2 - DEPRECATED -->
<dir>
  <li>index.html</li>
  <li>about.html</li>
  <li>contact.html</li>
</dir>

Modern Alternatives

Use <ul> for Lists

Instead of <dir>, use the <ul> tag for unordered lists:

<!-- HTML5 - USE THIS -->
<ul>
  <li>index.html</li>
  <li>about.html</li>
  <li>contact.html</li>
</ul>

Use <nav> for Navigation

For navigation menus or directory structures, use the semantic <nav> element:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Directory Structure with Nested Lists

Create hierarchical directory structures with nested <ul> elements:

<h3>Project Directory</h3>
<ul>
  <li
    >src/
    <ul>
      <li>index.html</li>
      <li>style.css</li>
      <li>script.js</li>
    </ul>
  </li>
  <li
    >assets/
    <ul>
      <li>images/</li>
      <li>fonts/</li>
    </ul>
  </li>
  <li>README.md</li>
</ul>

Styled File List

Create a modern file directory with CSS styling:

<style>
  .file-list {
    list-style: none;
    padding-left: 0;
    font-family: monospace;
  }

  .file-list li {
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
  }

  .file-list li::before {
    content: "📄 ";
    margin-right: 8px;
  }

  .file-list .folder::before {
    content: "📁 ";
  }
</style>

<ul class="file-list">
  <li class="folder">documents</li>
  <li>index.html</li>
  <li>styles.css</li>
  <li class="folder">images</li>
  <li>README.md</li>
</ul>

Interactive File Browser

Build an interactive file browser with collapsible folders:

<nav>
  <h3>File Browser</h3>
  <ul>
    <li>
      <details>
        <summary>📁 src</summary>
        <ul>
          <li>📄 index.html</li>
          <li>📄 app.js</li>
          <li>📄 styles.css</li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>📁 assets</summary>
        <ul>
          <li>📄 logo.webp</li>
          <li>📄 banner.jpg</li>
        </ul>
      </details>
    </li>
    <li>📄 package.json</li>
    <li>📄 README.md</li>
  </ul>
</nav>

Why Was It Deprecated?

• No Visual Difference: Browsers always rendered <dir> identically to <ul>
• Redundancy: The tag provided no unique functionality or semantic value
• Limited Support: Even in early HTML versions, support and usage were minimal
• HTML5 Simplification: HTML5 removed redundant and rarely-used elements
• Better Alternatives: <ul> and <nav> provide clearer semantics

Migration Guide

<!-- BEFORE (Old HTML) -->
<dir>
  <li>file1.html</li>
  <li>file2.html</li>
  <li>file3.html</li>
</dir>

<!-- AFTER (Modern HTML5) -->
<ul>
  <li>file1.html</li>
  <li>file2.html</li>
  <li>file3.html</li>
</ul>

Comparison: Old vs Modern

Try it Yourself

Related Tags

• <ul>

  ✅ Use this instead for lists

• <nav>

  ✅ Use for navigation menus

• <ol>

  Defines an ordered list

• <li>

  Defines a list item