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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-dir-on-element-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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 `&quot;`.
- On `<bdo>`, `dir` is required and must be `ltr` or `rtl`. Using `auto` there triggers a different error.

## Invalid example

```html
<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:

```html
<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:

```html
<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`:

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