Disallow invalid element names

Rule ID:
element-name
Category:
HTML Syntax and concepts
Standards:
  • HTML5

HTML defines what content is considered a valid (custom) element name, essentially:

Elements with xml namespaces is ignored by this rule.

Rule details

Examples of incorrect code for this rule:

<foobar></foobar>
error: <foobar> is not a valid element name (element-name) at inline:1:2:
> 1 | <foobar></foobar>
    |  ^^^^^^


1 error found.

Examples of correct code for this rule:

<div></div>
<foo-bar></foo-bar>

Options

This rule takes an optional object:

{
  "pattern": "[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
  "whitelist": [],
  "blacklist": []
}

Pattern

A regular expression for matching valid names. If changed you should ensure it still fulfills the original HTML specification, in particular requiring a -.

Whitelist

Elements in the whitelist will never trigger this rule even if it would not match the pattern.

Blacklist

Elements in the blacklist will always trigger this rule.