Linter Rule: Attributes must not have empty values

Rule: html-no-empty-attributes

Description

Warn when certain restricted attributes are present but have an empty string as their value. These attributes are required to have meaningful values to function properly, and leaving them empty is typically either a mistake or unnecessary.

In most cases, if the value is not available, it's better to omit the attribute entirely.

Restricted attributes

id
class
name
for
src
href
title
data
role
data-*
aria-*

Rationale

Many HTML attributes are only useful when they carry a value. Leaving these attributes empty can:

Produce confusing or misleading markup (e.g., id="", class="")
Create inaccessible or invalid HTML
Interfere with CSS or JS selectors expecting meaningful values
Indicate unused or unfinished logic in ERB

This rule helps ensure that required attributes are only added when they are populated.

Examples

✅ Good

erb

<div id="header"></div>
<img src="/logo.png" alt="Company logo">
<input type="text" name="email">

<!-- Dynamic attributes with meaningful values -->
<div data-<%= key %>="<%= value %>" aria-<%= prop %>="<%= description %>">
  Dynamic content
</div>

<!-- if no class should be set, omit it completely -->
<div>Plain div</div>

🚫 Bad

erb

<div id=""></div>Attribute `id` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)
<img src="">Attribute `src` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)
Missing required `alt` attribute on `<img>` tag. Add `alt=""` for decorative images or `alt="description"` for informative images. (html-img-require-alt)
<input name="">Attribute `name` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)

<div data-config="">Content</div>Data attribute `data-config` should not have an empty value. Either provide a meaningful value or use `data-config` instead of `data-config=""`. (html-no-empty-attributes)
<button aria-label="">×</button>Attribute `aria-label` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)

<div class="">Plain div</div>Attribute `class` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)

<!-- Dynamic attribute names with empty static values -->
<div data-<%= key %>="" aria-<%= prop %>="   ">Attribute `aria-<%= prop %>` must not be empty. Either provide a meaningful value or remove the attribute entirely. (html-no-empty-attributes)
Data attribute `data-<%= key %>` should not have an empty value. Either provide a meaningful value or use `data-<%= key %>` instead of `data-<%= key %>=""`. (html-no-empty-attributes)
  Problematic dynamic attributes
</div>

Linter Rule: Attributes must not have empty values ​

Description ​

Restricted attributes ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​