require-content

This rule enforces that elements which must convey meaning contain actual content (text or child elements), or declare an accessible name via ARIA attributes.

How to use

.eslintrc.js

module.exports = {
  rules: {
    "@html-eslint/require-content": "error",
  },
};

Rule Details

Empty elements that are expected to carry meaning are flagged. The following elements are checked: h1–h6, p, a, button, li, dt, dd, option, label.

Examples of incorrect code for this rule:

<p></p>
<button></button>
<a href="/home"></a>
<h1>   </h1>
<label></label>

Examples of correct code for this rule:

<p>Welcome to the site.</p>
<button>Submit</button>
<a href="/home">Home</a>
<h1>Page title</h1>
<label>Name</label>

<!-- ARIA accessible name — visible content is optional -->
<button aria-label="Close dialog"></button>
<a href="/home" aria-labelledby="nav-home"></a>

<!-- Hidden elements are exempt -->
<p hidden></p>
<button aria-hidden="true"></button>

<!-- Child elements count as content -->
<button><img src="icon.svg" alt="Submit" /></button>

Exemptions

The rule does not flag an element when any of the following are true:

1. aria-label or aria-labelledby is present — the element has an accessible name via ARIA.
2. hidden attribute is present — the element is hidden from the accessibility tree.
3. aria-hidden="true" is present — the element is hidden from assistive technology.