Linter Rule: Require valid characters in attribute names

Rule: html-attribute-name-valid-characters

Description

Warn when an HTML attribute name contains characters other than letters, digits, and hyphens, or does not start with a letter. A single colon is allowed as a namespace separator, as in xlink:href or xml:lang.

Rationale

The HTML tokenizer accepts almost any character in an attribute name, so a browser turns <div >, <div (click)="go()">, or a stray , between attributes into real attributes without complaint. None of them are attributes the HTML specification defines, so a conformance checker rejects them, and they usually mean a template from another language leaked into ERB or a typo split one attribute into two.

Some JavaScript frameworks give meaning to attribute names with these characters, such as @click and :class in Alpine.js and Vue, x-on:keydown.enter in Alpine.js, or [value] and (click) in Angular. Those names are not conforming HTML either. Disable this rule in projects that use such a framework.

Underscores are left to html-no-underscores-in-attribute-names.

Examples

✅ Good

<div class="card" data-user-id="1" aria-label="Close"></div>

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#icon"></use>
</svg>

<div data-<%= key %>="value"></div>
Avoid ERB output in attribute names. Use static attribute names with dynamic values instead. (erb-no-output-in-attribute-name)

🚫 Bad

<div {{element_hidden}}></div>
Attribute `{{element_hidden}}` should not contain underscores. Use hyphens (-) instead. (html-no-underscores-in-attribute-names)
Attribute name `{{element_hidden}}` contains `{` and `}`, which are not valid in an HTML attribute name. Use letters, digits, and hyphens. (html-attribute-name-valid-characters)

<div class="a", id="b"></div>
Missing whitespace between attributes at (1:14). `,` is parsed as the start of a new attribute. (`MISSING_WHITESPACE_BETWEEN_ATTRIBUTES_ERROR`) (parser-no-errors)

<div [value]="name" (click)="save()"></div>
Attribute name `(click)` contains `(` and `)`, which are not valid in an HTML attribute name. Use letters, digits, and hyphens. (html-attribute-name-valid-characters)
Attribute name `[value]` contains `[` and `]`, which are not valid in an HTML attribute name. Use letters, digits, and hyphens. (html-attribute-name-valid-characters)

<div :class="{ active: isActive }" @click="toggle"></div>
Attribute name `@click` contains `@`, which is not valid in an HTML attribute name. Use letters, digits, and hyphens. (html-attribute-name-valid-characters)
Attribute name `:class` contains `:`, which is not valid in an HTML attribute name. Use letters, digits, and hyphens. (html-attribute-name-valid-characters)

Configuration

Disable the rule in projects that use a framework with its own attribute syntax:

linter:
  rules:
    html-attribute-name-valid-characters:
      enabled: false

References

• HTML Standard: Attribute name state
• HTML Standard: Attributes