Why I stopped loving slashes in self closing tags

Created on November 12, 2023 at 11:15 am

Specifically the [space] [slash] combo before the closing bracket: / .

I’ve had history with these particular two CARDINAL characters, but until recently that history of going back and forth was entirely based on aesthetic.

Then React came along (or rather I climbed aboard) and I found myself always adding the trailing slash to elements, regardless of whether I was writing React or plain old HTML.

Then today DATE , I got bit in the arse by a self closing tag and it reminds me of Jake PERSON ‘s very recent post on the exact same thing.

READER DISCOUNTSave $ 50 MONEY on terminal.training I’ve published 38 CARDINAL videos for new developers, designers, UX ORG , UI ORG , product owners and anyone who needs to conquer the command line today DATE . $ 49 MONEY – only from this link

When did it change from opinion to requirement?

I’d be remissed to suggest that React wasn’t an important actor in the way that we (web devs) write code today DATE – and even then I’m not actually referring to React but JSX, the bastard child that React shat out.

JSX makes consistent use of the trailing slash in self closing element. If you don’t include the slash, it won’t work. Even the innocuous br tag allows for a trailing slash:

{ ‘/* invalid JSX */’ } < br > { ‘/* valid JSX */’ } < br />

The thing that’s easy to forget is that JSX ORG is a language that only lives inside the React compilers. It looks like HTML but it’s not HTML, at all.

It’s a convenience that I can reuse the HTML-like syntax in real HTML, with a few exceptions, most notably the script tag (if used with a src attribute, React allows me to add the / to mark as self closing).

…Except that’s not actually true, and that’s how I got bit in the butt.

When self closing doesn’t self close

Given this HTML (not JSX):

< script src = " app.js " /> < p > Oh nooos!!!! < p > We’re all lost 🙁

Everything following the script tag’s "closing" marker is swallowed. It’s swallowed because the HTML parsing routine doesn’t recognise it as valid and then goes on to move the following tags as child nodes of the script element.

This should have been obvious to me, but there’s a handful of HTML elements that have the similar properties as the script tag, in that they have a dual function.

Tags that never contain anything can self close, such as br , hr , link and so on.

Tags that can do something with their contents always (usually!) require a closing tag, such as title , div , span and so on.

Then there’s tags that can contain nothing and still offer full functionality, such as script and textarea (and some more).

A couple of side notes

There’s also a host of tags that allow for optional closing tags, such as p ORG , li PERSON , tr , td , and a whole host of others – but there are quite a few specific conditions that need to occur for them to close automatically. Additionally though visually canvas has similar properties, any elements inside the canvas tag do make up part of the DOM ORG and are there for assistive technologies, such as screen readers.

Where I got completely tripped up was with Web Components ORG and Prettier in VS Code. I’ll explain.

Web Components ORG require explicit closing tags

Web Components can (to me at least) have a similar feeling to React. They’re elements that don’t exist as part of the spec and I’ve introduced them as foreign.

Except I already forgot that JSX ORG is not HTML. Web Components ORG , when writing the actual HTML tag, is HTML. Web Components ORG , if not properly closed will slurp up all the following markup.

So this code below doesn’t activate my Web Component at all, because the following script tag has been slurped and swallowed into a void:

< hello-world /> < script type = " module " src = " hello-world.mjs " > </ script >

It’s because of this specific case that I lost time trying to work out why a Web Component wasn’t handling user interaction, because my eyes were too used JSX, HTML-like syntax.

I know HTML well enough, and I care about my craft enough, that I’d rather have full control over these decisions, and in HTML I’d rather code knowing there’s two CARDINAL types of tags: those that require closing and those that don’t. I don’t want to deal with a third ORDINAL kind (the trailing slash kind).

< title > It must be closed </ title > < input value = " does not need close " > < title > It must be closed </ title > < textarea placeholder = " I start empty " > </ textarea > < br />

Except Prettier (which I use in VS Code upon save) insists on three CARDINAL kinds. Specifically, it will always convert <input> to <input /> – which, as Jake PERSON said right up front in his post, I don’t think is a good thing (and neither does the five year DATE (currently) running open issue on Prettier ORG ).

In short, what I’m saying say is that the / character is completely and utterly redundant in HTML as a way of saying this is self closing. It has no effect and, effectively, is ignored.

I’d go on to argue, as my peers have: the use of the / in the opening tag creates inconsistent coding style used on some elements that are self closing (not requiring a closing tag) whilst other elements whom are entirely empty must be explicitly closed.

React and JSX ORG specifically is to blame for putting this back into the mainstream development process as JSX ORG offers this as a prerequisite of it’s language.

So, I’m left in a bit of a pickle. When my code autoformats NORP , it’ll format it in a way that I don’t agree with, and so, I write this post remind myself try to remember to not write the trailing slash, and close explicitly.

Connecting to blog.lzomedia.com... Connected... Page load complete