<dir>

  • Revision slug: Web/HTML/Element/dir
  • Revision title: <dir>
  • Revision id: 402151
  • Created:
  • Creator: tregagnon
  • Is current revision? No
  • Comment

Revision Content

{{Obsolete_header()}}

Summary

The HTML directory element (<dir>) represents a directory, namely a collection of filenames.

Usage note: Do not use this element. Though present in the early HTML specification, it has been deprecated in HTML 4, then is obsolete in HTML5. Use the {{HTMLElement("ul")}} instead.

DOM Interface

This element implements the {[domxref("HTMLDirectoryElement")}} interface.

Attributes

Like all other HTML elements, this element supports the global attributes.

{{htmlattrdef("compact")}}
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.
Usage note: Do not use this attribute, as it has been deprecated: the {{HTMLElement("dir")}} element should be styled using CSS. To give a similar effect than the compact attribute, the CSS property {{cssxref("line-height")}} can be used with a value of 80%.

See also

  • Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}};
  • CSS properties that may be specially useful to style the <dir> element:
    • The {{cssxref('list-style')}} property, useful to choose the way the ordinal is displayed.
    • CSS counters, useful to handle complex nested lists.
    • The {{Cssxref('line-height')}} property, useful to simulate the deprecated {{htmlattrxref("compact", "dir")}} attribute.
    • The {{cssxref('margin')}} property, useful to control the indent of the list.
{{HTML:Element_Navigation()}}

Revision Source

<div>
  {{Obsolete_header()}}</div>
<h2 id="Summary">Summary</h2>
<p>The <em>HTML directory element</em> (<code>&lt;dir&gt;</code>) represents a directory, namely a collection of filenames.</p>
<div class="note">
  <strong>Usage note: </strong>Do not use this element. Though present in the early HTML specification, it has been deprecated in HTML 4, then is obsolete in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>. Use the {{HTMLElement("ul")}} instead.</div>
<h2 id="DOM_Interface">DOM Interface</h2>
<p>This element implements the {[domxref("HTMLDirectoryElement")}} interface.</p>
<h2 id="Attributes">Attributes</h2>
<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>
<dl>
  <dt>
    {{htmlattrdef("compact")}}</dt>
  <dd>
    This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.
    <div class="note">
      <strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("dir")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <code>compact</code> attribute, the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("line-height")}} can be used with a value of <code>80%</code>.</div>
  </dd>
</dl>
<h2 id="See_also">See also</h2>
<ul>
  <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}};</li>
  <li>CSS properties that may be specially useful to style the <code>&lt;dir&gt;</code> element:
    <ul>
      <li>The {{cssxref('list-style')}} property, useful to choose the way the ordinal is displayed.</li>
      <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS counters</a>, useful to handle complex nested lists.</li>
      <li>The {{Cssxref('line-height')}} property, useful to simulate the deprecated {{htmlattrxref("compact", "dir")}} attribute.</li>
      <li>The {{cssxref('margin')}} property, useful to control the indent of the list.</li>
    </ul>
  </li>
</ul>
<div>
  {{HTML:Element_Navigation()}}</div>
Revert to this revision