The web is built on a mountain of tech debt.

13:17 "How many people are actually writing an html file?" **Looks at my personal website which uses plain html with no frameworks** Uhhhhh probably some people

Hello Will always look like an error for me.

I handwrite HTML for work. Also, my personal website doesn't use any framework, just handwritten HTML, CSS, and a tiny bit of JS.

As someone building it’s 100% the fault of the framework creator. If you’re building a language wrapper it’s YOUR job to fully understand the details, especially the fine ones, of the language that you’re wrapping. It’ll be like building a C++ framework with a pointer object that is actually a reference under the hood.

Enters HTML, the programming language

If only we had a tool to show the browser what language version we’re using so it could parse accordingly… you know, like doctype and head meta tags 🙃

Something about an issue being "Library does the thing it's meant to do completely wrong" is really amusing to me

Hey, when I started writing HTML we used , so that doesn't look so bad now, does it?

I went to MDN to see the list of self-closing (which they call Void Elements) and they indicate that the /> is invalid HTML. I clicked on embed, one of these elements and the example had the invalid />. 😂

"If a comment could change what the code does"... May I remind you of Internet Explorer's conditional comments?

@5:20 - a-TRI'-bute is a verb; A'-tri-bute is a noun.

We should not be requiring tooling. The power of the web is that you can get started without anything other than an editor.

I still handwrite html manually, what's wrong with that?

Retrocompatibility is the best worst thing that happen in software development, that's why we have new tools each week.

Just to clear up a bit of confusion with the terminology used in the article referenced in this video. There is no such thing as a "self-closing" tag in HTML (i.e SGML). They don't exist: they only exist in XML. What's being referred to in the case of e.g in HTML is not a "self closing" tag but a "standalone" tag - something completely different to a self closing tag in XML (and doesn't exist in XML). That's partly the reason for the confusion, and it's why is just as much a syntax error (in HTML, if you didn't know) as .

i feel like we should not call a self closing tag but a short closing tag because is a self closing tag, the tag _closes itself_ without you needing to do anything, meanwhile divs need end tags, which you can _shorten_ in some tools to idk this is just a random brain spew but i feel like if we make a clear distinction it could make future discussions easier

You keep saying "attribute" with the verb pronunciation (emphasis on the second syllable) when you mean the noun (pronunciation should have emphasis on the first syllable). Just a heads up because it trips me up every time. Sorry to be "that guy" but I'd want someone to let me know, just like if I had something in my teeth and didn't know. Great videos!

it comes from the old XHTML standard that was based on XML, we've mostly abandoned it, but it is valid XHTML to do and expect it to render properly

I was one of the XHTML proponents. But it had one huge problem on every browser that even supported it (at least it did back in the day): a single syntax error made the browser shit itself and refuse to render anything. But in my opinion they threw the baby out with the bathwater. They could have made HTML5 xml-like and xml compatible while also making it fault tolerant like it is today.

Theo's "Just never write html" argument misses the point.

As for YAML, it only became a superset of JSON with version 1.2, YAML 1.1 has some minor incompatibilities. What doesn't help is that there are tons of libraries that still only support 1.1, and the fact that many YAML libraries do not adhere 100% to the spec anyway. As for mistaken self-closed tags, I'd expect most mistakes involve textarea, as it's often empty.

"If the guy who made the HTML ++ framework thought that this is how it worked, that's a fault of the language, not a fault of the individual." Ummm, no? It's really incumbent on the individual to know how the language works.

This video just makes me feel old since I knew this 😂

I don't like self-closing tags because it is less clear than explicitly closing.

I feel like you missed the obvious interpretation of br... br isn't an element it's an in-stream text formatting tool, it should be a character like a   perhaps.... &lnbk; (instead xml spec of 
 
)

I was a big fan of XHTML at the time. I wanted HTML parsing to be predictable and for browsers to print warnings in the console for invalid XHTML. Obviously I was on the losing side. Pragmatic concerns kept the technical debt of all this stupid HTML parsing.

"Almost no languages support using Emojis" What is he talking about? Javascript is very much able to use them for variable names. Just not JSX...

4:30 showing zero appreciation of what was done with pre-ANSI C++ in a semi-green field environment. The web needed a decent front-end so users could actually see the value of the internet and use it. Netscape was also in competition with Microsoft, so they had to make choices and execute. Mistakes were made, but the biggest mistake was probably the rewrite. Context matters.

Self closing tags was a thing in XHTML, which many of us jumped to from atrocious HTML3 syntax that different browsers interpreted differently. Then HTML4 comes out, XHTML gets phased out, and we still close tags like out of habit. I'm surprised people forgot this

I do not like writing /> in HTML. HTML and XML are and always were 2 different languages. HTML was built on top of SGML, not XML. And XHTML is practically dead (and probably a bad idea to start with). HTML is a language to write hypertext, and tags are called tags not as a coincidence, but because they are things you add in a text to structure it, it was not designed to structure data. If you see like them, it make perfectly sense that some elements are self-closing and some other are not, like in LaTeX (for example), the principle is very similar (you have tags that produce an immediate effect, and others that affect what is next, and these you can wrap in brackets to have them apply to more stuff). Closing tags are confusing to the user, why the user shall write something like ? It makes no sense. It also creates confusion, because the user then discovers that is not a valid syntax. Better avoid confusion, and treat XML and HTML as two separate languages, with they own rules. Beside that, it's just faster to avoid typing one useless character, and you transmit 1 byte less on the network (that multiplied for all the in your page, for all the requests made to load a document, can add up to several traffic saved.

Another proof that React devs don't know js, html, css and in general how browser works :D

In HTML 6 you'd be able to write to force self close without breaking compatibility

18:43 Fun fact: emojis are valid characters in selector names and variable names in CSS. 👀

What, one can't use emoji in JS ? Even with all those transpiling layers

I may be missing something, but as I started waaaay back when html started, I know the , , etc is a single tag and not an open/close set of tags * I learned that some tags were single, some had open/close * when came out I never assumed any thing other than a single tag that represented itself as a single tag for human reference (xml aside) * Seeing does not make me thing it means , it makes me thing its a single tag and not an open/close tag

that's because when the parser checks the content the img, video, , etc are pointers to resources and not the resource itself. while div, p, etc are not pointers but wrappers for the content. When you write the text in a you will have the resource shipped with the bundle... if was self-closing means that the text was coming from a text file located elsewhere and not with the .html

I used to serve XHTML with application/xhtml+xml, except when the user agent was IE7 or lower, cause it would just render the XML as text file.

HTML5 specs are like 20 years old now and since day one of it's "official" release I never used etc. syntax again. Never understood why anyone would still do that. Funny that many people got confused about self closing tags just because some folks couldn't stop that habit :-)

With every video I realise Theo knows React, but not frontend. Backend devs raised on JSX are just now learning the basics.

I still do it out of habit because of those XHTML days.. Self-closing the the and and it's dang hard to undo that bit of muscle memory 😭

Fault-tolerance is a foundational design principle of the web - everything from network protocols to CSS and HTML parsing and parts of JavaScript. BSOD on an HTML syntax error is what the web would have got with Microsoft-style thinking. Thank you to every early web pioneer who pushed hard for an open and fault-tolerant platform!

Btw. Swift supports emoji characters in variable, function, and class names

An ideal opportunity to dump JS too. So rendering outside the or for fun?

So I just need to wrap everything in for it to work as expected? I've made web documentation with xml for content with appropriate ddt for it, xslt with formatting and design and css, so self-closing tags is a given...

Theo is really brand new

When writing html, sometimes I omit my close tags for and just to annoy jsx-enthusiasts.

I think code indentation is a good analogy for self-closing tags. In some languages, indentation matters. In others, it's completely cosmetic. In languages where it's cosmetic, it's possible to indent incorrectly and confuse yourself. But that doesn't mean it's not useful to have. Also, I don't want emojis in my code, because the emoji picker in Windows doesn't work right when I'm in an RDP session.

Bro, are u using Batik? your shirt (what it called in your place?)

Good video, I would add that self closing tags can be dangerous doors for threat actors. I like closing my tags cause I like a sense of symmetry to it for security and aesthetics.

I like to do `` because the first div is passing the baton to the closing tag, and look you can see the closing tag got it Edit: I read the issue posted by Rich and his main concern is about copy and pasting Svelte into HTML and not HTML into Svelte, people consistently miunderstood him. While Svelte adds language features, if you delete the Svelte parts you should be able to paste it into HTML and be the same. In that case it makes sense. They seem to be leaning towards warning people against self closing tags for tags that don't self close, and then later making it error. I think it seems reasonable, and that the disagreement comes from people misunderstanding the direction of code. Nobody is actually writing `` in HTML to cause a problem in Svelte, but people are using `` in Svelte to cause a problem in HTML. While I don't see it being a realistic error, and that it would be better for browsers to fix it, it's fair enough to be consistent with the older format.

I don't care what Svelte is, but means , because the point is I'm NOT writing HTML. I'm writing a non-HTML something that only looks like HTML will eventually _become_ HTML and I expect the framework to handle it correctly to generate the HTML I expect, NOT the incorrect HTML it thinks is compliant with my non-HTML thing. If I wanted Hello. I would NOT write Hello. Because that's just stupid. I would read that and understand it to be Hello. Who wouldn't? The fact that it would be interpreted _IN_ HTML as Hello is **IRRELEVANT**. Because I'm NOT writing HTML. I'm writing a non-HTML something that will eventually become HTML. And I expect my non-HTML to do what I think it does, not what someone else think it does. Why is this even a debate? It's stupidly obvious.

The amount of lavaflows in the web is definitely annoying as fsck. I would prefer to adopt some kind of XML standard which uses the old XHTML "strict"/"transitional" or "relaxed" DTDs to deal with webpages that would otherwise generate parsing errors. This is just another reason why I hate coding crap for the web. All the hidden "gotcha" side effects that even the "experts" / "creators" don't know about themselves. Ugh.

Is there a language that bundles and minifies to HTML? Like how typescript get built as javascript min?

Self-closing only applies to inline tags without an explicit closing tag (like img and br). For blocks, everything after the tag is included inside it until it runs into the next opening block-style tag.

Personally, I think we should be embracing xHTML more. Browsers didn't abandon it. It's still works. It's web developers that abandoned it, because they didn't want to risk displaying parsing errors when their buggy templating systems rendered the page wrong.

In 12:39 in my opinion the prettier formatter should follow the html parser when formatting html, self closing tags in list turn from opening tags and closing tags to self closing, and other tags turn into auto closed, with the exception of foreign elements hierarchies like embedded svg and MathMl.

I think I encountered something like this where I was using and it didn't work. After hours of trying to debug it, someone said you need to explicitely close it. I never understood why, but it worked. I probably had the same misunderstanding as the one in this video.

So what you're saying is that there's no end to ?

Self-closing tags are a construct coming from XML / XHTML. In HTML 5, many tags either don't need a closing tag depending on their placement, or simply don't *HAVE* a closing tag (and adding one would be an error), like , ... EDIT: posted that at the start of the video, glad the video got it right too. "self-closing tags" are not a HTML syntax, but it's a fine syntax to have for superset language which parse your markup and support it, such as jsx / angular / w/e. EDIT 2: The point about "faster to parse" is valid, and the counter-argument itself is invalid. An XML parser simply have no notion of "some elements are self-closing". The XML parser know that an element is closed specifically due to either the "/" at the end of the tag, or when reaching a closing tag. Not having a notion of "self-closing elements", it never try to find if the element name is inside a list of self-closing elements; it doesn't have to care at all about the name of the element, no matter what it is, for parsing purposes (although it obviously need to do so when validating against the schema, but you don't have to necessarily validate against the schema when you parse the document)

There are no self-closing tags in HTML, so I never used them. Good for you, the svelte guy and all the people finding out about this.

To be fair, when I was a teen a long time ago, having the browser be so forgiving actually helped me learn HTML. Hey guess what, that move led me into my career. So there is a point for it to be more forgiving in the past. Also, I guess it's easier to parse when tags themselves defined if they were self closing or not. Could very well be an "at that time, it was a fair idea" thing.

Sorry, no. When I write Hello, I don't want it to suddenly become Hello. If Prettier is going to do something, it should make it Hello, because that's my expectation. And if it is not, then I can correct that by actually moving Hello inside.

Btw, with Vue templates, starting from: I'm rendered outside after rendering I'm rendered outside input We get: I'm rendered outside after rendering I'm rendered outside input Thumbs up for rendered as IMHO thumbs up for forbidding non-self-closing , ...

you can define variables and stuff as emojis in python and swift (maybe others but idk)

The only reason why I’d use this, would be in some kind of: And self closing would mean for me that it is the beginning and the end of this object. It has no innerHTML.

I once copied some JSX to HTML, only to have the strangest error. I spent sooo long debugging nested div issues because of this.

1:00 The issue’s status at that time is “Open” but why is it red? I was confused for a while 😅

the first few seconds hurt me physically

Regarding its faster, that depends on implementation. I could see an alternative approach: Sees BR - Identifies it as a BR tag. Sees /> - closes tag. Moves on. Vs Sees BR - Identifies it as a BR tag. See / - Ignores it. See > - Closes tag. Checks if it is in the list of elements that can't have children and because of that self-closes. The article seems to just ignore this possibility and think the only way it could do it is if it ignores the slash and then checks anyway, but that is not the only case.

But then i had a very good idea. I closed my tags myself. See, closing my tags myself gave me a whole new perspective in coding and i was able to see skills that i couldve not see before.

when i was still in college the first programming language i learned was c, then c++, then c# i think of semicolon as the period in a phrase or a sentence which indicates the end of a line which is logical. every start should have and end that's for me. even with javascript even if it's a javascript one-liner i still put semicolon at the end of each line of code. it's a preference but my rule of thumb is to treat each line of code like a phrase or a sentence which should have a period at the end.

I stumbled upon this github discussion myself a few days ago. It wasn't Rich who reported this btw, but a good that it's being discussed...

I did not know people didn't know divs can't be self closing. I actually specifically test that in frameworks I am using (at the time of when I could use it) just to know how it is handled

With a lot of browsers converged on webkit it seems like it would be pretty easy to fix this now. Maybe just log an error to the console about it to start then progress to full blown errors a year or two down the line?

emojis aren't a single character code, is usually multiplebyte character codes which when joined add up and make the emoji.

I feel like your video is trying to convince me to just get rid of all the self-closing tags, I've been doing for years. :-)

The issue really lies in why would you write hello. I assume your intention in that scenario would be using the div purely for css styling and no content. In which case I'd argue that you'd want a different tag that can style a section with no content, rather than how tags that expect content being used purely to style with no content.

18:52 - you might like ruby, then. ;) Here's an actual session log from an irb ("interactive ruby" -- ruby's way of getting a REPL) session I just did, just for fun: irb(main):001:0> « = 3 => 3 irb(main):002:0> » = 5 => 5 irb(main):003:0> «+» => 8 Perhaps it would have been better to use emoji than those symbols, but, I know how to type those, and somehow thought it created an amusing final expression.

I've been around long enough to have watched the whole thing play out. And while I understand your position, I'm angry at our industry for causing the problem in the first place. The idea of didn't come out of a misunderstanding of HTML. It was deliberately pushed in tutorials as a way of "preparing" everyone for XHTML. Except that XHTML never came and a whole generation of developers has no idea why what they're doing is wrong.

Just in time for my F5

React bug brains are a hell of a drug 😉

I'm sorry, what lie? You mean misconception?

laughed so hard when you say its been so old since html5 ... i feel the same ... haha

You didn't get the memo about XHTML going out of fashion?

How about "Hello" The struggle seems to be with how Prettier handles these cases: "Hello" -> "Hello" "Hello" -> "Hello" "Hello" -> Error: Unexpected closing tag "body" The first case reproduces what a browser does, it injects a closing tag where it should be. The third case does what browsers can't do, it throws an error But shouldn't these all be handled the same way? And out of the 3 options, the second case doesn't make any sense to me. It's leaving the HTML invalid. Changing it to "Hello" would be expected imo. It keeps the author's intent (assuming the author is familiar with jsx or xml) while making it valid. It's also minimal work to figure out. Changing it to "Hello" or throwing an error would both be acceptable too but all the scenarios should do the same thing.

If you think of that slash as a simple command passed while parsing, it doesn’t make sense that it gets ignored if it isn’t suddenly in a new tag. I also don’t understand why it’s imperative to repeat the name of the tag when you close it. should be acceptable. It has to be a tree anyway.

WOW! I didn't know that a simple is such a naughty little bugger! It does different things, depending if it is inside of (it works in "foreign content" mode) -> produces empty div. Not inside of -> it produces div with the children, that are right next to the !

Biggest pain in the ass is conditionally self-closing tags like

Awesome! So happy you acknowledge that HTML exists! 🎉

In HTML 4 and 4.01 (which were strictly based on SGML), it was actually valid to write '

Thank goodness I came across this video before I discovered self closing tags

Weird you mention pure html, where I still code sometimes. IMHO I don't mind self closing tag but the spec or how it is treated should be different to prevent errors. Like A.) If you use self closing tag like this ... this should give you an error or warning B.) If you make a not self closing tag close like this this should turn to a locked tag. Locked tag because you cannot add children to it. C.) In relation to B all React component should be allowed to be a locked tag too. So this should be allowed but treated as locked tag. You can also use this .... but treated as open Because sometimes you want to lock the component, sometimes you don't. That's my opinion.

Never touched JSX before, so I was pretty aware of the weird conventions that XHTML left behind. Very interesting how this affects front end frameworks. I personally agree with Rich Harris -- it's better to be simple than to be convenient. Edit: Replaced 2nd "JSX" with "front end frameworks"

It just is so mind boggling that we had a bunch of browsers and no html parser spec for years

I ran into a lot of these things in the late 90s. At which point I learned that HTML and XML are kissing cousins in that they both derive from SGML - the grammar says so. And then committees took over and we ended up with the web version of some of the math conventions we have learned to live with. +1 for the kudos to the browser vendors making the web fault tolerant and self-healing. Even though some of the design decisions leave us scratching our heads. -1 for the slam on Netscape. For many years they were the only game in town. Not only browser, but server - which was arguably more important. The first web server (with promptly added support for Java Servlets / Applets - yeah, they were bad but innovative) with enterprise support. The first commercial web server I worked with was Netscape's on HP/UX circa 1998. The web would not have grown as fast without Netscape the company - full stop. The question in my mind, is if we could re-invent the browser today; what would it look like? And what tech do we need? Think mobile, Web Assembly, etc. None of those things were even thought of back then

In 2000 till 2010 i read a lot of w3c, see the rise and fall of xhtml, people that like xhtml was strict, but also other people that like html5 wasnt strict. For me it was a period where i learn s lot about the markup languages. I build a lot from scratch and without frameworks, and all my site are valid markup. I think a lot of frontend developers have hard times to build without a framework, just with html and css. I like to build without frameworks.

I don't know how anyone who knows html wouldn't know this. I'm not usually the guy to say that, but...

I have never self-closed a div because I always thought it was invalid.

Well, didn't know that this "" was a thing, in my mind a self-closing tag WITH CONTENT must have the content in an attribute like value="content" or src="/path/to/img" otherwise is completely odd, or maybe I misunderstood the video because I don't use self-closing tags in any other way than the one I mentioned.