<a> tags cannot be self-closing

[Rich-Harris]

Just encountered an interesting bug. The Svelte SSR compiler uses self-closing tags for elements without children:

<div/> <!-- equivalent to <div></div> -->

But that doesn't work with some elements:

<a href='https://whatever.com'/>
<p>this will be included in the link!</p>

It needs to be <a ...></a> instead. Empty anchor tags is a bit of an edge case, but it should still be handled. Am wondering which other elements can't use self-closing tags though. A quick Google doesn't yield anything interesting – does anyone out there know the answer? Or should we just always use closing tags for non-void elements?

[Ryuno-Ki]

According to http://stackoverflow.com/a/3558200 the answer is “it depends”.

Maybe you should take a look at the HTML5 spec ;-)

[Rich-Harris]

The spec suggests that all elements except void elements and foreign elements (i.e. SVG) need a closing tag. But browsers definitely parse things like <div/> just fine, so [shruggie]

[Ryuno-Ki]

Switch to XHTML if you want crashed in the renderer hides

Jokes aside, would it be an option to omit the closing slash in a tag? AFAIK browser can deal with that better (have a look at <img> or <input> in your browser's Inspector).

[Rich-Harris]

Closing slashes are omitted for void elements, this is about 'normal' elements

[Ryuno-Ki]

In HTML5, the meaning of depends on the type of element.
[…]
On other HTML elements, it is an error, but error recovery will cause browsers to treat it as a start tag. This will usually end up with a missing end tag putting subsequent elements as children of it.

(highlighting mine)

Can't you omit it on those normal elements as well?

[Rich-Harris]

Where is that pasted from?

[Ryuno-Ki]

The StackOverflow question I've linked above.