or

The Biggest Lie In HTML? 👺

I just came by Theo’s kinda clickbaity video “The Biggest Lie In HTML”.

I recommend watching the video, but here is a TLDW:
HTML standard is “broken”, and Svelte and React treat self-closing tags differently. For more details, there is an awesome article by Jake Archibald The case against self-closing tags in HTML

There is no such thing as self-closing ⚠️

First of all, self-closing tags do not exist in HTML. We only have Void elements!

A void element is an element in HTML that cannot have any child nodes (i.e., nested elements or text nodes). Void elements only have a start tag; end tags must not be specified for void elements.

Source: https://developer.mozilla.org/en-US/docs/Glossary/Void_element

My thoughts 💭

I’m okay with void elements, mostly because they greatly help readability! For me <br></br> or <img></img> would be strange. So I think the real question is what elements can have children nodes and what not.

Watching the video, I immediately remembered one of the first mistakes I made when learning HTML. At the time, I only had one PHP book and no access to sites like w3School or MDN.

I think we can argue why <input type=”text”>value</input> is treated as invalid. I understand the textareas are multi-line, so we need a children text node inside them to have line breaks. But why are inputs – and I mainly talk about text inputs – so different? After all, they also need a way to represent their values!

We could say that input fields are meant to be filled out by the end user, so why would we need to “hardcode” their value into the markup language? But thinking about it, isn’t it the same with textareas?

Inputs are quite strange in general. Why did we jazz up a single element instead of having multiple purposes built?
Speaking of which, why <input type=”multi-line”/> is not a thing? I think it would make validation easier, wouldn’t it?

Anyway, what do you think?