<!-- Deprecated: -->
<dir>
  <li>file1.txt</li>
  <li>file2.txt</li>
</dir>
<!-- Modern equivalent: -->
<ul>
  <li>file1.txt</li>
  <li>file2.txt</li>
</ul>

Deep Dive Course

**`<dir>`** dates back to early HTML as a way to mark up a list of filenames, typically rendered in a compact, multi-column style by very old browsers. It never had any functionality that a plain `<ul>` couldn't also provide, and HTML5 formally deprecated it — modern browsers render `<dir>` exactly like an unstyled `<ul>`, with no special multi-column file-listing behavior at all.

1Understanding <dir>

`<dir>` dates back to early HTML as a way to mark up a list of filenames, typically rendered in a compact, multi-column style by very old browsers. It never had any functionality that a plain <ul> couldn't also provide, and HTML5 formally deprecated it — modern browsers render <dir> exactly like an unstyled <ul>, with no special multi-column file-listing behavior at all.

💡

If you find <dir> in legacy code, it's always safe to replace it directly with <ul> — there's no behavioral difference to account for in modern browsers.

editor.html

<!-- Old, deprecated markup -->
<dir>
  <li>report.pdf</li>
  <li>notes.txt</li>
</dir>

localhost:3000

2Practical Example

Here is a real-world application of <dir> showing how it is used in production HTML.

editor.html

<!-- Correct modern replacement -->
<ul>
  <li>report.pdf</li>
  <li>notes.txt</li>
</ul>

localhost:3000

3Best Practices

Follow these guidelines when working with <dir>:

1. Never use <dir> in new code — it's obsolete

2. Replace any legacy <dir> usage with <ul>

3. Use CSS (like columns or flexbox/grid) if you specifically need a multi-column list layout

⚠️

Tip: If you find <dir> in legacy code, it's always safe to replace it directly with <ul> — there's no behavioral difference to account for in modern browsers.

editor.html

<!-- Old, deprecated markup -->
<dir>
  <li>report.pdf</li>
  <li>notes.txt</li>
</dir>

localhost:3000

Examples

Example 01Basic Usage

<!-- Old, deprecated markup -->
<dir>
  <li>report.pdf</li>
  <li>notes.txt</li>
</dir>

Example 02Advanced Example

<!-- Correct modern replacement -->
<ul>
  <li>report.pdf</li>
  <li>notes.txt</li>
</ul>

Best Practices

Never use in new code — it's obsolete
Replace any legacy
usage with
- Use CSS (like columns or flexbox/grid) if you specifically need a multi-column list layout

Interview Question

Is there any functional reason to use <dir> instead of <ul> in a modern browser?▼

Hint: Think about whether <dir>'s original 'multi-column file listing' behavior still exists anywhere.

No — modern browsers render <dir> identically to a plain, unstyled <ul>, with none of the old multi-column file-listing presentation it originally had. Since there's no remaining functional difference and <dir> is formally deprecated in the HTML5 spec, there's no reason to use it over <ul> in any current code.

Exercises

EasyPractice using <dir> in a real scenario.

View Solution

<!-- Old, deprecated markup -->
<dir>
  <li>report.pdf</li>
  <li>notes.txt</li>
</dir>

Frequently Asked Questions

Is there any functional reason to use <dir> instead of <ul> in a modern browser?▼

No — modern browsers render

identically to a plain, unstyled

is formally deprecated in the HTML5 spec, there's no reason to use it over

Related Functions

ul-tagmenu-tag