HTML Guide
Void elements, like area
, base
, br
, col
, embed
, hr
, img
, input
, link
, meta
, source
, track
, and wbr
are self-closing and don’t need a trailing slash /
, which should be avoided as that can interfere with unquoted attribute values.
These void elements can optionally have a trailing slash and some people prefer to include it as it may look clearer. Some HTML formatters integrated in code editors automatically add a trailing slash to void elements.
So for example, both <hr>
and <hr/>
are valid self-closing void elements. However, when combined with unquoted values for attributes, the trailing slash can be problematic.
In this example, the img
element takes http://example.com/logo.svg
as the value its src
attribute.
<img alt=SVG src=http://example.com/logo.svg>
But in the following example with a trailing slash, the img
element takes http://example.com/logo.svg/
as the value its src
attribute. That is, the trailing slash has been parsed as part of the value for the src
attribute, which breaks the display of the image.
<img alt=SVG src=http://example.com/logo.svg/>
In short, this HTML warning makes you aware of this problem. When possible, it’s recommended to avoid trailing slashes in void elements.
Learn more: