Linter Rule: Disallow self-closing tag syntax for void elements

Rule: html-no-self-closing

Description

Disallow self-closing syntax (<tag />) in HTML for all elements.

In HTML5, the trailing slash in a start tag is obsolete and has no effect. Non-void elements require explicit end tags, and void elements are self-contained without the slash.

Rationale

Self-closing syntax is an XHTML artifact. In HTML:

On non-void elements, it’s a parse error and produces invalid markup (<div /> is invalid).
On void elements, the slash is ignored and unnecessary (<input /> is equivalent to <input>).

Removing the slash ensures HTML5-compliant, cleaner markup and avoids mixing XHTML and HTML styles.

Examples

✅ Good

html

<span></span>
<div></div>
<section></section>
<custom-element></custom-element>

<img src="/logo.png" alt="Logo">
<input type="text">
<br>
<hr>

🚫 Bad

html

<span />Self-closing syntax `<span />` is not allowed in HTML. Use `<span></span>` instead. (html-no-self-closing)

<div />Self-closing syntax `<div />` is not allowed in HTML. Use `<div></div>` instead. (html-no-self-closing)

<section />Self-closing syntax `<section />` is not allowed in HTML. Use `<section></section>` instead. (html-no-self-closing)

<custom-element />Self-closing syntax `<custom-element />` is not allowed in HTML. Use `<custom-element></custom-element>` instead. (html-no-self-closing)

<img src="/logo.png" alt="Logo" />Self-closing syntax `<img />` is not allowed in HTML. Use `<img>` instead. (html-no-self-closing)

<input type="text" />Self-closing syntax `<input />` is not allowed in HTML. Use `<input>` instead. (html-no-self-closing)

<br />Self-closing syntax `<br />` is not allowed in HTML. Use `<br>` instead. (html-no-self-closing)

<hr />Self-closing syntax `<hr />` is not allowed in HTML. Use `<hr>` instead. (html-no-self-closing)

Linter Rule: Disallow self-closing tag syntax for void elements ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​