HTML <dir> Tag
The <dir> tag is used to list directory titles. The tag is obsolete in HTML5. See what to use instead.
The <dir> tag is obsolete. It is a deprecated HTML tag that was removed from the standard and is not supported in HTML5. Do not use it in new pages. Use the <ul> tag together with the CSS list-style property instead — see the modern replacement below.
The <dir> tag was historically used to define a list of directory titles — short file or folder names. The items inside the list were defined with the <li> tag, exactly like an unordered list, and were rendered with bullets by default.
Why <dir> was deprecated
<dir> was dropped from the standard for several reasons:
- It overlapped completely with
<ul>. Browsers rendered<dir>the same way as a bulleted<ul>list, so it added no behaviour of its own. - It carried no real semantic value. "A list of directory titles" is not a meaningful distinction in modern HTML. A plain unordered list already communicates "a list of items," so a separate element was redundant.
- Its implementation was inconsistent. The
compactattribute, meant to render the list more tightly, was handled differently across browsers (and often ignored entirely), making the element unreliable.
Because it duplicated <ul> while offering nothing extra, the HTML specification deprecated <dir> and now defines <ul> as the correct element for any flat list of items.
The modern replacement: <ul>
Replace <dir> with a standard unordered list. You get identical markup — <li> items inside a parent — but with full HTML5 support and complete control over the bullets through the CSS list-style property.
The default bullet for a <ul> is disc (a filled circle), so the most useful thing CSS gives you is the ability to change it. The list-style-type values below are the common alternatives:
none— removes the bullets entirely (used for navigation menus and custom-styled lists).square— a filled square.circle— a hollow (outlined) circle.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.none { list-style-type: none; }
.square { list-style-type: square; }
.circle { list-style-type: circle; }
</style>
</head>
<body>
<ul class="none">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
<ul class="square">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
<ul class="circle">
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
</ul>
</body>
</html>To learn more about building and styling lists, see the HTML lists overview, the <ul> and <ol> tags, and the CSS list-style property.
Syntax (legacy)
For reference only — the <dir> tag came in pairs, with its <li> items written between the opening (<dir>) and closing (</dir>) tags.
<dir>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>PHP Tutorial</li>
</dir>Attributes
| Attribute | Value | Description |
|---|---|---|
| compact | compact | Specifies that the list should render smaller than normal. Not supported in HTML5. |
The <dir> tag also supports the Global Attributes and the Event Attributes.