HTML Free Codes<dir>
Deprecated in HTML5 specifications. Use <ul> instead.
⚠️ DEPRECATEDDefinition and Usage
The
<dir> tag is not supported in HTML5. Use the <ul> tag instead for directory lists.
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.
Browser Support
The <dir> tag is NOT supported in HTML5:
Old Usage (HTML 3.2)
In older HTML versions, the <dir> tag was used like this:
Old HTML 3.2 Example (Don't Use)
<!-- 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:
Correct HTML5 Way - Using <ul>
<!-- 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:
Modern Navigation with <nav>
<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:
Example
<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:
Example
<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:
Example
<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.png</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
- Find all instances of
<dir>in your HTML files - Replace
<dir>with<ul> - Replace
</dir>with</ul> - Keep the
<li>elements unchanged - Consider using
<nav>if it's a navigation menu - Add CSS styling if needed for visual presentation
Before and After
<!-- 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
| Feature | <dir> (Deprecated) | <ul> (Modern) | <nav> (Semantic) |
|---|---|---|---|
| HTML5 Support | No | Yes | Yes |
| Purpose | Directory lists (obsolete) | Unordered lists | Navigation sections |
| Semantic Value | None | Generic list | Navigation landmark |
| Accessibility | Poor | Good | Excellent |
| Use Case | None (don't use) | Any unordered list | Navigation menus |
Try it Yourself
Interactive Example
Use <ul> instead of the deprecated <dir> tag:
Project Files
- index.html
- about.html
- contact.html
- style.css
- script.js