elements go <br>
If it’s stupid, and it works…
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
This made my eye twitch
I’m sorry Timmy but you’re not allowed to have any dessert unless you close your tags like I taught you. Your grandmother was XMLish and you need to carry on our family tradition.
I thought you might do something like this so I got you a backup one from AO3.
🤓 ackshually that’s not the HTML spec. Void elements should not have trailing slashes.
https://developer.mozilla.org/en-US/docs/Glossary/Void_element
TIL. Funny thing, though, is that they give an example of how to use <br>
and have it with trailing slashes. And then explain that trailing or preceding slash will be ignored, anyway ¯\_(ツ)_/¯
> Clicks on <br>
> Example is <br />
The actual thing that matters is that the /
is ignored so (unlike with XML I believe) you can’t self-close a non-void element by adding a trailing /
. But “void elements should not have trailing slashes” is extrapolation on your part; the trailing slash improves readability and is kosher since it doesn’t act as a self-close.
An explanation of this problem can be found on the official W3C HTML validator wiki.
HTML parsers only allow this to stop pages breaking when developers make mistakes; see this Computerphile video. ‘Able to be parsed correctly’ is not the soul criterion for it a syntax being preferred, otherwise we would all leave our <p>
elements unclosed.
Yes, it is not “incorrect” to write <br/>
, but it is widely considered bad practice. For one, it makes it inconsistent with XML. Linters will often even “correct” this for you.
I personally find the official style (<br>
) to be more readable, but this is a matter of personal opinion. Oh, and I used to have the same stance as you, but I also used to think that Python’s whitespace-based syntax was superior…
At the end of the day, regardless of anyone’s opinion, we should come to SOME consensus…and considering that W3C already endorses <br>
, we should use this style.
It’s not extrapolation on my part, the HTML spec is pretty direct about it:
- Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/), which on foreign elements marks the start tag as self-closing. On void elements, it does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind. For such void elements, it should be used only with caution — especially since, if directly preceded by an unquoted attribute value, it becomes part of the attribute value rather than being discarded by the parser.
https://html.spec.whatwg.org/multipage/syntax.html#start-tags
I don’t think it’s an extrapolation to say that code which is “unnecessary and has no effect of any kind” should be omitted.
And yeah, I linked the MDN docs because they’re easier to read but if they disagree then obviously the spec is the correct one.
Trailing slash lets you do this though:
For example, in the case of
<div/>Some text
, browsers interpret this as<div>Some text</div>
, treating the slash as ignored and considering the div element to encapsulate the text that follows.
( ( laughs in old… ) )