Yep. It’s one of a handful of void elements along with <img> and <br>.
Also using a slash to self close a tag is not part of the html spec and it never has been part of the spec. The browser doesn’t know what that means on any tag. If you write <div /> the browser ignores the slash and thinks you still haven’t closed your Div.
I'm adding context to this because you're only telling part of the story:
self-closing tags are necessary for void elements in XML and XHTML, both technologies that are still supported on the Web. Since XHTML processes HTML as XML, it forces it to be well-formed. Unlike HTML, which has all sorts of tag-soup and quirks modes and other things, because it's lax in its syntax.
Void elements lacking the need for a closing tag or closing slash is one of the weird edge cases in HTML. While it's not in the HTML spec, it may still be seen in the wild in XML and XHTML documents and is not universally bad or unsupported.
You can view HTML as a weird, quirky version of XHTML if you want. But XHTML lost the war. Browsers are HTML5 engines, not XHTML engines.
And if you're writing HTML, the browser considers <br/> to just be a weird way to write <br>. The slash is non-significant. So confusingly <script /> is not equivalent to <script></script>.
The problem I have with self-closing tags is that I've met so many web developers throughout my career who think that browsers understand self closing tags. I used to be one of them! And that will almost always, but not always work out fine:
- React / JSX supports self closing tags. So do a lot of other web frameworks.
- Void elements ignore the /. (And you don't need to close void tags anyway). So you can write input, img, br, etc tags however you want.
- HTML5 will auto-insert missing closing tags when it needs them. Eg, <div><span /></div> will render as you expect because the browser will automatically close the span when you close the div. (!)
But it'll confuse you in weird ways. Like <script src="..." /> - which the browser dangerously interprets as an open script tag. Subsequent text is interpreted as javascript!
I think its good practice to be clear in all source files whether you're writing XHTML (eg in .jsx) or writing real, god fearing HTML. And then never use self closing tags in HTML. Sooner or later, someone will think they matter and you'll get bugs.
XHTML may not be mainstream with people authoring web pages, but it is a thing within publishing pipelines that generate XHTML from other XML-based sources like JATS or DocBook. It's also a thing at least in ePub 1 and 2 content (I can't recall if they relaxed it to HTML for ePub 3 or later).
I can't disagree with making sure you're using them when they matter and avoiding them when they don't.
There was no real 'war', XHTML 5 is still a thing. Browsers are HTML engines because people who write HTML don't want to be forced into well-formed markup. They want the browser to guess what they meant and run with it.
There's also the whole "we need to be compatible with almost every HTML file dating back to the early 90s" conundrum that makes clean breaks in behavior, like XHTML, hard to pull off without pissing people off.
It should be clear which one is writing based on the DOCTYPE element. IIRC XHTML still requires a DTD to ensure its schema can be validated, while HTML 5 did away with it altogether and now just uses <!DOCTYPE html>
There was definitely a debate over how web browsers should interpret web pages - as XHTML or "quirks mode". HTML5 (with infinite backwards compatibility) was the outcome. Every major web browser implements HTML5 - complete with its super quirky and complex, but fully specified and consistent parsing rules.
> XHTML 5 is still a thing.
Is it though? On the web? I just tried, with this html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<div>
<div style="background-color: hotpink;" />
yo
</div>
</body></html>
Q: What do you expect the background-color of "yo" to be?
If this was an XHTML page, tags should be able to self-close. And in that case it should be black on white. But try it. Its not. The browser ignores the self-closing part of the tag, so "yo" is inside the inner div and it shows up in hot-pink. The outer div is then not closed correctly. (2 divs open, 1 div closes). If the page were processed as strict XHTML we'd also expect a warning or error, but the browser doesn't care. Neither firefox nor chrome emitted anything in the console about any of this.
As far as I can tell, the XHTML doctype has no effect here. The page is interpreted - as all webpages are - by the browser using HTML5's parsing rules. Not XHTML's.
There are contexts in which XHTML still exists. Like JSX. But the browser is not an XHTML renderer. Rail against HTML5 if you want, but people need to stop pretending that the browser supports self closing tags. They are not part of HTML5. Pretending they are causes bugs.
You need to serve it with the right mime time (application/xhtml+xml) or in case of local files use .xhtml extension. Then it's processed as XHTML and rendered as expected.
Also you need namespace declaration otherwise it will be rendered as unstyled xml.
I'm going to let this link to a simple XHTML document speak for itself. I've configured it to work on lighttpd via the `mime-types.conf` file, and even have a commented-out meta tag you can use to fake it in cases where you can't manipulate a server.
> Eg, <div><span /></div> will render as you expect because the browser will automatically close the span when you close the div. (!)
span is a bad example. indeed it will close - but then it will reopen (!) when the next text node occurs. <p> is a better example, and it will also auto close when you try opening a new <p>, which can be rather convenient when trying to write concise html.
https://html.spec.whatwg.org/dev/embedded-content.html#the-i...