Overview

The <dir> element is called the HTML Directory Element and is a tag that is used in versions of HTML prior to HTML5 to list out directories on a website. These directories can be lists of a variety of things since the <dir> element behaves similarly to the <ul> and <ol> elements by containing <li> elements that denote each entry in the directory. Typically, these entries would be file names for the <dir> element but even menu options are a possible use case for this element. However, since <dir> has been deprecated in HTML4, it is no longer advisable to use this element but either the <ul> or <ol> element in place of it.

Syntax

Let’s take a look at a simple example of how this HTML tag would be used and structured in an HTML document where it is valid (HTML4 and below):

<dir>
	<li>red_hat.jpg</li>
	<li>blue_hat.jpg</li>
	<li>green_hat.jpg</li>
</dir>

As you can see from the above example, we are simply listing 3 files that may exist in a given directory. We will look at a more complex example in a bit but for now this shows a typical use case for the <dir> element. Listing directories, that is. In addition, prior to the tag from being deprecated, this element could be used for creating navigational elements on a webpage. A typical horizontal navigation bar defined by using an <ul> element could created by using the <dir> tag in the same way. The only thing in such a use case that changes would be the text defined within the <li>` elements as shown below from files and folders to navigational text:

<dir>
	<li>Home</li>
	<li>About Us</li>
	<li>Contact Us</li>
</dir>

It should be fairly clear as to what the proper syntax of the <dir> tag is with these two simple examples so now lets move on to talk about the attributes of this tag.

Attributes

Besides the global attributes that exist on all HTML elements, the <dir> tag also accepts the compact Boolean attribute. This signals the browser to render the directory list in a more compact style (true) or not (false). Depending on which browser is rendering the HTML code, the effect of this attribute may differ. However, it is not recommended to use this attribute as this too is deprecated. To change the styling of the <dir> tag one would use CSS. Mimicking the compact=”true” attribute value on <dir> would be to use the CSS property line-height: 80% or any value you find appropriate to create a more compact look of the listing. Using CSS to style <dir> will also open up all of the other styling possibilities for the tag that you would normally find to be applicable for <ul> and <ol> tags. These could including list-style property definitions, margin indenting definitions etc.

Here is another, more complex example of the <dir> tag usage incorporating some of the styling suggestions from above:

See the Pen dir Styling Example by Brian Hernandez (@brianhernandez) on CodePen.

So, as shown above we are using the .directory class as a hook to style the different <li> elements found within the <dir> element. Also, like we have mentioned before, the <dir> tag acts a lot like the <ul> and <ol> tags, so we can nest them here as well showing a more complex directory listing than the previous example. And just to give some granular styling examples that come with using CSS to style <dir>, we have defined the line-height property to 90%on the entire .directory class and can even change the list-style bullets depending on which one we target using some CSS pseudo selectors.

Special Notes

So, the two special notes to remember about the <dir> tag is that not only is it deprecated and either the <ol> tag or the <ul> tags should be used instead of <dir> but if you happen to be working on legacy code containing <dir>, remember not to use the compact Boolean attribute. It will always be better to style the <dir> tag within CSS for greater flexibility and control and it will also allow you to avoid the rendering variability between how browsers implement the compact attribute.

Browser Compatibility

Since the <dir> tag is now deprecated in HTML5, it is not recommended to continue to use the element even though some web browsers are still rendering it correctly (as of this writing anyway). Using deprecated elements and properties may cause errors in your code in the future if a browser decides to no longer support them. So, it is much safer and goes a long way to future-proofing your code if you assume that browsers in the near future will no longer support these deprecated elements.