best-practices-self-closing-void-elements

#Why

Void elements (<br>, <img>, <input>, ...) never have content or a closing tag. HTML5 permits both <br> and <br /> and treats them identically. The trailing slash carries no meaning. This rule enforces one style consistently.

#Options

Choose the void-element style required by the project.

never is the default because the HTML spec treats the slash as meaningless and Laravel's own scaffolding writes <meta charset="utf-8"> without it.

<?php

'rules' => [
    // Enforce the XHTML/JSX style instead.
    'best-practices-self-closing-void-elements' => ['warning', ['style' => 'always']],
],

#Examples

#Bad

<br />
<hr />
<img src="photo.jpg" alt="Photo" />
<input type="text" name="email" />
<meta charset="utf-8" />

#Good

<br>
<hr>
<img src="photo.jpg" alt="Photo">
<input type="text" name="email">
<meta charset="utf-8">

With 'style' => 'always', the two blocks above swap places.

#Void Elements

The style applies to these HTML void elements:

area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

#Auto-fix

Under the default never style the fixer removes the trailing slash:

<!-- Before -->
<img src="photo.jpg" alt="Photo" />

<!-- After -->
<img src="photo.jpg" alt="Photo">

Under the always style it adds one, keeping any existing trailing whitespace before the slash and the slash itself immediately adjacent to >, so <br > becomes <br />.

Either direction is safe on Blade attribute values that contain >, such as <img src="{{ $post->image }}"> or <input @checked($on)>.

#Notes

• HTML5 allows both styles; this rule only enforces consistency
• JSX requires the trailing slash, so 'style' => 'always' suits teams sharing markup with JSX
• Components are not void elements and are unaffected. See the related rule below

#References

• HTML Spec: Void Elements - Definition of void elements
• MDN: Void Elements - Reference for empty elements

#Related Rules

• blade-component-self-closing - Empty components should self-close