Skip to content

Linter Rule: Always quote attribute values

Rule: html-attribute-values-require-quotes

Description

Always wrap HTML attribute values in quotes, even when they are technically optional according to the HTML specification.

Rationale

While some attribute values can be written without quotes if they don't contain spaces or special characters, omitting quotes makes the code harder to read, more error-prone, and inconsistent. Always quoting attribute values ensures:

  • consistent appearance across all attributes,
  • fewer surprises when attribute values contain special characters,
  • easier editing and maintenance.

Additionally, always quoting is the common convention in most HTML formatters, linters, and developer tools.

Examples

✅ Good

html
<div id="hello"></div>

<input type="text">

<a href="/profile">Profile</a>

🚫 Bad

html
<div id=hello></div>

<input type=text>

<a href=/profile></a>
Unexpected Token. Expected: `TOKEN_IDENTIFIER, TOKEN_QUOTE, TOKEN_ERB_START`, found: `TOKEN_SLASH`. (`UNEXPECTED_ERROR`) (parser-no-errors)
Unexpected Token. Expected: `TOKEN_IDENTIFIER, TOKEN_AT, TOKEN_ERB_START,TOKEN_WHITESPACE, or TOKEN_NEWLINE`, found: `TOKEN_SLASH`. (`UNEXPECTED_ERROR`) (parser-no-errors)

References

Released under the MIT License.