Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Void elements — such as area, base, br, col, embed, hr, img, input, link, meta, source, track, and wbr — cannot have child content or a closing tag. They are inherently self-closing. In XHTML, a trailing slash (<br />) was required to make the document well-formed XML, but in HTML5 (the current standard), the slash is entirely optional and has no effect on how the element is parsed.

While the trailing slash is technically permitted, it creates a real risk when used alongside unquoted attribute values. The HTML parser does not treat the slash as a special self-closing token in the way you might expect. Instead, if the last attribute’s value is unquoted, the slash becomes part of that value. This can silently break your page — the browser won’t report an error, but the attribute value will be wrong.

Beyond this parsing hazard, removing trailing slashes keeps your markup cleaner and avoids ambiguity. The W3C validator raises this as a warning to help you catch potential issues before they cause hard-to-debug problems.

Why this matters

• Silent bugs: When a trailing slash is absorbed into an unquoted attribute value, it changes the value without any visible error. For example, a URL ending in / instead of the intended value can cause broken images, failed resource loads, or incorrect behavior.
• Standards compliance: The WHATWG HTML Living Standard specifies that the trailing slash on void elements is allowed but has no effect. The validator warns about it because of the interaction with unquoted attributes.
• Code clarity: Removing trailing slashes makes it clear that you’re writing HTML, not XHTML, and avoids confusing developers who may not be aware of the parsing nuance.

How to fix it

1. Remove trailing slashes from all void elements. Write <br> instead of <br/>, <img src="photo.jpg" alt="Photo"> instead of <img src="photo.jpg" alt="Photo"/>, and so on.
2. If you prefer to keep trailing slashes, always quote your attribute values. Quoted values prevent the parser from absorbing the slash into the attribute.
3. Configure your editor or formatter — some tools (e.g., Prettier) have options to add or remove trailing slashes. Check your formatter’s settings and disable automatic trailing slash insertion for HTML files.

Examples

Trailing slash absorbed into an unquoted attribute value

In this example, the parser interprets the trailing slash as part of the src value, resulting in http://example.com/logo.svg/ instead of the intended http://example.com/logo.svg:

<!-- ❌ Wrong: the slash becomes part of the src value -->

<img alt=SVG src=http://example.com/logo.svg/>

Fix by removing the trailing slash

The simplest and recommended fix — just drop the slash:

<!-- ✅ Correct: no trailing slash -->

<img alt=SVG src=http://example.com/logo.svg>

Fix by quoting attribute values

If you want to keep the trailing slash for stylistic reasons, quoting the attribute values prevents the slash from being absorbed:

<!-- ✅ Correct: quoted attributes prevent the parsing issue -->

<img alt="SVG" src="http://example.com/logo.svg" />

Common void elements with unnecessary trailing slashes

<!-- ❌ Trailing slashes have no effect -->

<br/>
<hr/>
<input type="text" name="query"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>

<!-- ✅ Preferred: clean void elements without trailing slashes -->

<br>
<hr>
<input type="text" name="query">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

A subtle real-world bug

Consider a meta tag with an unquoted content value:

<!-- ❌ The slash is parsed as part of the content value -->

<meta name=theme-color content=#ffffff/>

The browser reads the content value as #ffffff/ instead of #ffffff, which is not a valid color and will be ignored. The fix:

<!-- ✅ No trailing slash -->

<meta name="theme-color" content="#ffffff">

Learn more:

GitHub Repository

W3C Validator - void elements

→