In normal HTML elements, we put content between the start and end tag. But in case of some elements, it does not make sense for them to have any content. For example, let’s take a look at
<br> element - this element produces a line break… and that’s it. It’s really hard to imagine how content inside the line break could be rendered, right?
Another example -
<hr> element - this element represents a paragraph-level thematic break which is usually visually represented in the form of a horizontal line (like the one below this paragraph). And again, it simply does not make any sense for this element to have any content.
And the same goes for
<input> element. What could be the content of this element? Ok, it got value, but the value is based on the input from the user so it belongs to the attribute, it’s not really content.
In HTML5 elements that can’t have any content are known as Void elements, there are only a few void elements: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.
Void elements only have a start tag; end tags must not be specified for void elements. Sometimes you can find code that looks like this:
<input type="text" value="hello" name="hello" />
/> is sometimes referred to as a self-closing tag, but this is incorrect.
/ does not mean anything in HTML5 (except for foreign elements, which are rather uncommon) and does not change anything, it can be omitted.