mozilla

Revision 81470 of <dir>

  • Revision slug: HTML/Element/dir
  • Revision title: dir
  • Revision id: 81470
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment page created, 221 words added

Revision Content

{{ Obsolete_header() }}The HTML directory element (<ul>) 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 3.2 and HTML 4, then is obsolete in HTML 5. Use the {{ HTMLElement("ul") }} instead.

DOM Interface

This element implements the 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 line-height can be used with a value of 80%.

See also

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

{{ HTML:Element_Navigation() }}

Revision Source

<p>{{ Obsolete_header() }}The <em>HTML directory element</em> (<span style="font-family: Courier New;">&lt;ul&gt;</span>) 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 3.2 and HTML 4, then is obsolete in HTML 5. Use the {{ HTMLElement("ul") }} instead.</div>
<h3>DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/HTMLDirectoryElement" title="en/DOM/HTMLDirectoryElement">HTMLDirectoryElement</a></code> interface.</p>
<h3>Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/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/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">compact</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> can be used with a value of <span style="font-family: Courier New;">80%</span>.</div> </dd>
</dl>
<p>See also</p>
<ul> <li>Other list-related HTML Elements: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }};</li> <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;">&lt;dir&gt;</span> element:  <ul> <li>the <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> property, useful to choose the way the ordinal is displayed,</li> <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, useful to handle complex nested lists,</li> <li>the <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> property, useful to simulate the deprecated {{ htmlattrxref("compact", "dir") }} attribute,</li> <li>the <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> property, useful to control the indent of the list.</li> </ul> </li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
Revert to this revision