Valid ID

Rule ID:

valid-id

Category:

HTML Syntax and concepts

Standards:

• HTML5

Requires the id attribute to be a valid identifier.

Strictly the HTML5 standard defines valid IDs as non-empty and without any whitespace but many other characters can be troublesome when used to create selectors as they require intricate escaping (e.g. id="123" becomes #\\31 23).

By default, this rule enforces that ID begins with a letter and that only letters, numbers, underscores and dashes are used but this can be disabled with the "relaxed" option to only validate the strict definition from the standard.

See also the related id-pattern rule which can be used for applying a consistent style to the codebase (by for instance requiring only dashes instead of underscores as separators)

Rule details

Examples of incorrect code for this rule:

<p id=""></p>
<p id="foo bar"></p>
<p id="123"></p>

error: element id must not be empty (valid-id) at inline:1:4:
> 1 | <p id=""></p>
    |    ^^^^^
  2 | <p id="foo bar"></p>
  3 | <p id="123"></p>


error: element id must not contain whitespace (valid-id) at inline:2:8:
  1 | <p id=""></p>
> 2 | <p id="foo bar"></p>
    |        ^^^^^^^
  3 | <p id="123"></p>


error: element id must begin with a letter (valid-id) at inline:3:8:
  1 | <p id=""></p>
  2 | <p id="foo bar"></p>
> 3 | <p id="123"></p>
    |        ^^^


3 errors found.

Examples of correct code for this rule:

<p id="foo-123"></p>

Options

This rule takes an optional object:

{
  "relaxed": false
}

relaxed

When set to true this rule only validates the ID is non-empty and contains no whitespace.

<p id="123"></p>
<p id="#foo[bar]"></p>