require-closing-tags

This rule enforces closing tag.

How to use

.eslintrc.js
module.exports = {
  rules: {
    "@html-eslint/require-closing-tags": "error",
  },
};

Rule Details

Examples of incorrect code for this rule:

<div>

Examples of correct code for this rule:

<div></div>

Options

This rule has an object option for Void Elements.

  1. "selfClosing": "never": (default) disallow using self closing tag on Void Elements.

  2. "selfClosing": "always": enforce using self closing tag on Void Elements.

  3. "allowSelfClosingCustom": false: (default) disallow self-closing for the custom tags.

  4. "allowSelfClosingCustom": true: allow self-closing for the custom tags.

selfClosing : "never"

Examples of incorrect code for the { "selfClosing": "never"} option:

<img />
<base />

Examples of correct code for the { "selfClosing": "never"} option:

<img>
<base>

selfClosing : "always"

Examples of incorrect code for the { "selfClosing": "always" } option:

<img>
<base>

Examples of correct code for the { "selfClosing": "always" } option:

<img />
<base />

"allowSelfClosingCustom": false

Examples of incorrect code for the { "allowSelfClosingCustom": false } option:

<custom-tag />

Examples of correct code for the { "allowSelfClosingCustom": false } option:

<custom-tag> </custom-tag>

"allowSelfClosingCustom": true

Examples of correct code for the { "allowSelfClosingCustom": true } option:

<!-- both allowed -->

<custom-tag> </custom-tag>
<custom-tag />

Further Reading

  1. Void Elements