Bad value X for attribute “dir” on element “Y”.

The dir attribute accepts only ltr, rtl or auto on every element, so an empty value or any other word is invalid.

dir sets the base direction of an element's text: 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 pick the direction from the first strongly directional character in the content. The keywords are case-insensitive, so RTL passes. The validator rejects everything else: dir="", a bare dir with no value, a keyword with a stray space such as "rtl ", and made-up values such as none or right.

Browsers treat an invalid value as if the attribute were missing, so in most cases the element takes its parent's direction. HTML has no keyword for "inherit" or "no direction": leaving dir out already does that. So remove dir="none" or dir="" rather than looking for a value to put there.

The empty value usually comes from a template, CMS or rich text editor that prints dir="" when nobody picked a direction, which is why the error can repeat on every paragraph of a page. Change the template so it writes dir only when it has a real value. For text whose direction you can't know in advance, such as user comments, use dir="auto".

A few elements behave differently:

• On <table>, dir also sets the column order. With rtl, the first column sits on the right edge of the table.
• On <input> and <textarea>, it sets the direction of the text in the field. Fields where people may type in a right-to-left script, such as search boxes, work best with dir="auto". Add dirname if the server needs that direction too: the form then submits it as an extra field, such as q.dir=rtl.
• On <meta>, it's allowed because dir is a global attribute, and on a <meta name> it sets the direction of the content text. Often nobody wrote it on purpose, though. A double quote inside content ends the value early, and each word after it becomes an attribute with an empty value. If one of those words is "dir", you get this error next to an "Attribute not allowed" error for the other words. Write double quotes inside the value as ".
• On <bdo>, dir is required and must be ltr or rtl. Using auto there triggers a different error.

Invalid example

<p dir="">Opening hours are Monday to Friday, 9:00 to 17:00.</p>

<table dir="none">
  <tr>
    <th>Size</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Small</td>
    <td>4.50</td>
  </tr>
</table>

<form action="/search">
  <input type="search" name="q" aria-label="Search" dir="rtl ">
</form>

An unescaped quote in a page description turns the word "dir" into an empty attribute:

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

Valid example

Remove the attribute where the element should follow the page, and use a valid keyword where it shouldn't:

<p>Opening hours are Monday to Friday, 9:00 to 17:00.</p>

<p lang="ar" dir="rtl">ساعات العمل من الاثنين إلى الجمعة</p>

<table>
  <tr>
    <th>Size</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Small</td>
    <td>4.50</td>
  </tr>
</table>

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

Escape the quotes inside content:

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

Learn more:

MDN Reference

MDN - the dir attribute

→

WHATWG Spec

HTML Standard - the dir attribute

→

W3C Reference

W3C - Structural markup and right-to-left text in HTML

→