HTML Guides for text direction

The dir attribute on the <div> is set to an empty string. dir is an enumerated attribute that only accepts ltr, rtl, or auto, so an empty value is invalid.

The attribute sets the base text direction of an element's content: ltr for left-to-right scripts such as English, rtl for right-to-left scripts such as Arabic or Hebrew, and auto to let the browser decide from the first strongly typed character. An empty dir="" names none of these, so the browser has nothing to apply.

This normally comes from a template that prints dir="" when the variable feeding it is blank. If the element does not need an explicit direction, remove the attribute and it will inherit the direction of its parent. Otherwise, set one of the three valid values.

Invalid example

<div dir="">Welcome</div>

Valid example

Remove the attribute to inherit the direction from the parent:

<div>Welcome</div>

Or set a valid value. Use auto when the text comes from users and its direction is not known in advance:

<div dir="auto">مرحبا</div>

The dir attribute on an <input> element is set to an empty string, and dir only accepts ltr, rtl or auto.

dir sets the direction of the text inside the field. The HTML standard treats an empty or unknown value as if the attribute were missing, so the input takes its direction from its parent and dir="" changes nothing. A bare dir with no value counts as empty too, and gets the same error.

A template that fills dir from the page language can print it empty for left-to-right languages. If the field should follow the page direction, remove the attribute. If people may type in a right-to-left script such as Arabic or Hebrew, which is common in search boxes, use dir="auto" and the browser sets the direction from the first letter typed. Add dirname when the server needs that direction too. The form then submits it as an extra field, such as q.dir=rtl.

Invalid example

<form action="/search">

<input type="search" name="q" aria-label="Search" dir="">

</form>

Valid example

Remove the attribute so the field follows the page direction:

<form action="/search">

<input type="search" name="q" aria-label="Search">

</form>

Or let the field follow the text the user types:

<form action="/search">

<input type="search" name="q" aria-label="Search" dir="auto" dirname="q.dir">

</form>

The dir attribute on a <meta> element is set to an empty string, and dir only accepts ltr, rtl or auto.

dir is a global attribute, so <meta> may carry it. On a <meta> with human-readable content, such as a page description, it sets the direction of that text. An empty dir="" names no direction, so the validator rejects it. Remove the attribute if the text reads in the same direction as the page, or set rtl, ltr or auto if it doesn't.

Often nobody wrote that dir on purpose. A double quote inside the content value closes the attribute early, and the browser reads each word after it as a separate attribute with an empty value. If one of those words is "dir", you get this error, along with an "Attribute not allowed" error for each of the other words. A CMS or template that copies an excerpt into a description or og:description tag without escaping it produces exactly this. Write double quotes inside the value as ", or strip them before printing the tag.

Invalid example

<meta name="description" content="Opening hours and contact details" dir="">

Valid example

<meta name="description" content="Opening hours and contact details">

Invalid example with an unescaped quote

<meta name="description" content="How the "auto" value of the dir attribute picks a text direction">

Valid example with the quote escaped

<meta name="description" content="How the &quot;auto&quot; value of the dir attribute picks a text direction">

The dir attribute on <table> only accepts ltr, rtl or auto, so a value such as none is invalid.

dir sets the base direction of the table. It affects the text inside each cell and also the column order: with rtl the first column sits on the right edge of the table, with ltr on the left. auto lets the browser pick the direction from the first strongly directional character in the content.

HTML has no keyword that switches direction off. A table without dir inherits the direction of its parent, usually set on the <html> element, which is probably what none was meant to do. Remove the attribute, or set ltr or rtl when the table needs a different direction from the rest of the page. An empty dir="" is invalid for the same reason.

Invalid example

<table dir="none">

<tr>

<th>Size</th>

<th>Price</th>

</tr>

<tr>

<td>Small</td>

<td>4.50</td>

</tr>

</table>

Valid example

<table>

<tr>

<th>Size</th>

<th>Price</th>

</tr>

<tr>

<td>Small</td>

<td>4.50</td>

</tr>

</table>