HTML - Why use, or not use, " /> " to close tags without content?

Question

I noticed that it is common to see some tag elements of the type Void with the closing />

Ex:

<br />
<hr/>
<meta name="twitter:domain" content="pt.stackoverflow.com"/> 

And right here in the Stackoverflow source I found <input> with and without tag closure...

Ex:

<input id="author" name="author" type="text">
<input type="submit" id="pin-site-btn" value="Adicionar" disabled="disabled"/>

From what I saw, it seems that in HTML5 the Browser ignores this / in tags that do not need to be closed like the above. (Different from Div for example that should be closed <div>...</div>)

So if the browser ignores this, and if the use is not mandatory, why is it so common to see void-Elements closed in this way / > for no apparent reason?

NOTE: In Materialize, in HTML Configuration, you have <link> with and without / > http://materializecss.com/getting-started.html

Reference W3C Void Elements: https://www.w3.org/TR/html5/syntax.html#void-Elements

Answer 1

The idea of closing the tags without children comes from XML, in a proposal to unify the two languages by creating XHTML. However, as far as I know this has not gone forward - nor has this requirement been adopted in HTML5.

Thus, closing these tags is not mandatory, but is optional if you want to do it. I always do, by "aesthetic" even, but it is not necessary.

(Remember that if the tag is not listed as "no kids", not closing is a mistake - even if the browsers "turn around" to interpret the content for you. But in this case, the closure should be given by a distinct closing tag)

Excerpt from our colleague: mgibsonbr here from Stackoverflow

Answer 2

Closing tags comes from HTML5, so if you’re developing a site using HTML5, it’s important to close tags. It is important to develop already with the HTML5 standard because browsers may stop supporting older versions of HTML, thus making it mandatory to use tag closure.