🙅🏼‍♂️ A closing slash on void HTML elements?

[adam]

According to the HTML5 spec, there are a handful of tags that must not have contents. Those are area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

It seems like it's left up to us how we format those. We can leave it 'open' like <img src="cat.gif">, <br> or 'close' them like <img src="cat.gif" />, <br />.

I sway towards closing them with a forward slash at the end, I think it's more readable. Do you have a preference or a good reason for either way?

Opinion on this seems to have shifted quite a bit through different versions of HTML.

• HTML5: the slash is optional.
• HTML4: the slash is technically invalid. However, it's accepted by W3C's HTML validator.
• XHTML: The slash is REQUIRED.

 

[Gummibeer]

I've learned it that way, I will stick to it!
So for sure with slash. 😅

It also has the benefit that I know that this element is closed there.
I know that HTML5 can interpret them without, but for me it's the same like with semicolon in JS. I will always write them to finish a line and flag end of statement. If my minifier, Babel, webpack whatever tool removes isn't important for me. I only care about what I have to work with - source code.

 

[LividJay]

I use Visual Studio and it automatically adds them, so I leave them. Otherwise I'd probably not put them in myself. Not going to vote since the only two options don't cover my scenario.

 

[adam]

I use Visual Studio and it automatically adds them, so I leave them. Otherwise I'd probably not put them in myself. Not going to vote since the only two options don't cover my scenario.

That’s interesting VS adds it! I guess that gives it some credence to being the more standard way.

 

[Gummibeer]

That’s interesting VS adds it! I guess that gives it some credence to being the more standard way.

Phpstorm doesn't by default. So it depends on the IDE/audience or that phpstorm sticks to the standard by default and VScode to that what the developers use most.

 

[LividJay]

That’s interesting VS adds it! I guess that gives it some credence to being the more standard way.

I honestly just think they haven't updated the HTML 5 config for it yet.