DO NOT USE HTML Self Closing Tags | Prime Reacts | ThePrimeTime YouTube Video Summary
ThePrimeagen discusses HTML self-closing tags in the video. He reacts to an article against using HTML self-closing tags, and provides his views about it. HTML can't decide if self-closing tags are helpful or useless. He looks at how JSX and HTML are different, as well.
Detailed Summary:
The Case Against HTML Self-Closing Tags
ThePrimeagen analyzes an article titled "The Case Against HTML Self-Closing Tags in HTML" by Jake Archibald, from July 6th, 2023. He dives into some of the facts and logic about this topic.
What is XHTML?
Back in the late 90's and early 2000's, The W3C had a real thing for XML. At this time, there was no HTML parsing spec, so non-trivial things would end up with 4 browser engines interpreting the same HTML document in 4 different ways. However, XML has a fully defined parser. But it would have been a huge change to do this all at once, so in 2000 XHTML 1.0 became a recommendation and proposed writing HTML in a way that was compatible with existing HTML parsers, and XML parsers.
Double Quotes and the HTML Parser
Because in XML, attribute require values, and they must be quoted with double quotes. In XML, tags have to explicitly close, and XML has a short-hand for self closing tags. ThePrimeagen claims "selected-equals-selected is really funny", but wonders "Can we be real here?"
Browsers Didn't Care
In XML, it would generally be formatted but Netscape Navigator 4 couldn't cope with, without the space before the /, where the / immediately followed an attribute, so the spec recommended a space before the /. "Browsers didn't care", states ThePrimeagen, and explains his reasoning.
HTML 5
HTML5 entered the scene in 2008 and one of the major things it introduced was parsing spec. Unlike the XML parsing spec, it detailed what browsers should do when they encountered weird and invalid markup. It did away with all of the XML requirements introduced in XHTML and leaned into the looseness of HTML parsers that existed at the time. It does handle slash specifically, but only to specifically ignore it.
SVG-in-HTML
In the early 2010's, the ability to include in HTML was spec'd and started appearing in browsers. For example:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
Although SVG is an XML format, when it's embedded in an HTML document it's parsed by the HTML parser. If the HTML parser is within an SVG tag, it switches to "foreign content" mode, where / is actually meaningful.