Why does Firefox display empty elements with closing tags in its web inspector?

Question

As HTML5 is not an XML-based language, we can forget the self closing tags. That's great. So when I want to insert a new horizontal line, I just write <hr> and not <hr />.

But when I inspect the <hr> element in Firefox, it renders as <hr></hr>. It does not happen in any other browser.

Why does this happen? Is this some compatibility issue with Firefox?

Answer 1

That is just a quirky behaviour of the Firefox browser.

EDIT: Sorry, but I could not comment directly due to my SO reputation.

Answer 2

Self closing tags can be dangerous because there is some browser specific behavior to them, so it is always better to write the longer form. It seems that Firefox is actually trying to help by expanding it so you will not experience some issues.

For example you can experience problems with JS frameworks using them as in this case:

https://github.com/angular/angular.js/issues/1953