Magic tricks with the HTML parser | HTTP 203

Jake and NEW GUEST (for the next few episodes) Bramus chat about strange behaviors in the HTML parser. Should it be more strict? And, how you can get access to the streaming parser with JavaScript, to speed up your pages.
Simon Pieters book, "Idiosyncrasies of the HTML parser" → goo.gle/3PUPKGg
The HTML parsing spec → goo.gle/3AY8Cjr
[p] is one of the many tags whose end tag can be omitted in certain situations → goo.gle/3KLlBbH
Formatting elements that carry over if not closed → goo.gle/3CHrjZS
The adoption agency algorithm → goo.gle/3qevd5j
A valid XHTML document → goo.gle/3pWgFqG
An invalid XHTML document → goo.gle/3cuAJxl
The CSS parsing spec → goo.gle/3RDdKPF
Should severe HTML parsing issues be highlighted in DevTools? The DevTools teams says "no" → goo.gle/3Ri02kX
Prettier discussion on self-closing tags → goo.gle/3CK9nhu
Creating a detached HTML document → goo.gle/3Rq7Np3
Streaming a response with fetch() → goo.gle/3cuOKLr
Creating a streaming HTML parser in JavaScript → goo.gle/3RgokLW
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP20...
#HTTP203 #ChromeDeveloper #WebDev

[@jakearchibald]

In case anyone's wondering what the "Time to learn tech" hat is all about: kzbin.info/www/bejne/jKvPeWSFgqpqoMU

[@jakearchibald]

I think me and Bramus are friends now

[@WhirlpoolBrewer]

Excellent episode as always! I do wonder if you're slowly poking at Github to fix their links so you can work from the airport better :)

[@JimishFotariya97]

Surma is watching from behind 😂

[@joseperez-ig5yu]

Happy to hear that Jake!😊

[@bramus]

\ (•◡•) /

[@ChromeDevs]

Subscribe for more HTTP 203 → goo.gle/ChromeDevs

[@dbroche]

This episode alias should be called - Do The Write Thing

[@sonyariantokurniawan6288]

I feel the wow moment on this video when reach the createHTMLDocument, great job explaining something Jake

[@Jespertheend2]

This might be the best http 203 intro yet

[@DavidsKanal]

YO I remember your Minecraft maps man

[@cassieevans8790]

No time for cutesy chit-chat!

[@DavidsKanal]

@@cassieevans8790 There's always time for cutesy chitchatting

[@boiimcfacto2364]

@@cassieevans8790 IDK why I didn't expect you'd be watching other HTTP203 videos XD. Will we get to see you in another video soon?

[@yousoumar]

Theses episodes are really interesting. Tanks guys ! One day, when I’m done with college, I’m gonna watch all of them.

[@kubre]

This is one of the most interesting web content on the entire platform

[@HolgerNestmann]

This is excellent. With this one can also simulate some of the loading states and see when the browsers starts rendering things. I am just unhappy about youtube taking three days to suggest me this

[@dandcodes]

I love that Surma's photo is in a frame on the shelf in the background. Nice tip of the hat to your previous co-host!

[@avilde]

Jake's socks represent so much web knowledge )

[@AlexanderCerutti]

"World is inside the paragraph or is it just inside the body?" - "Yes" 😂😂😂 Great video, Jake! I really loved it. I'm deep diving in these weeks into tags/tokens parsing for VTT, so this is really interesting

[@nguyenhien-ql6vx]

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

[@nguyenhien-ql6vx]

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

[@nguyenhien-ql6vx]

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

[@nguyenhien-ql6vx]

1Uj7UWSlNYTO3pU5elBMhx8U36L9cil4x

[@Scio_]

Impeccable bringer right there. Glorious performance.

[@microcolonel]

What I would like to see is tooling to generate fewer closing tags. Guess that's a project for the weekend, a new hiccup mode.

[@thomasmaclean7919]

Zalig @bramus! 👏

[@Uv9riebdieu2]

Http203 is amazing please upload more vids. I love it!

[@boomshakalaka656]

Greatest intro of all time

[@bobyrevvladislav]

Не понимаю половины слов) но контекст понятен. Надеюсь нас много самоучек, спасибо ребятам.

[@MrFlashAccount]

Продолжай слушать, со временем будешь понимать больше и больше ✊

[@colin-vandervoort]

Props for the informative content :)

[@Kaldrax]

Awesome episode! Immediately gave my colleague the timestamp on self closing tags because I’m so annoyed seeing in our codebase 🤣

[@offroaders123]

For some reason, saw that as "lol, HTML go " 😂

[@mayankthakur1198]

I like the way you show , the new features 🤩🤩🤩

[@chinmayk8004]

The first part of the video convinced me that I am not an introvert.

[@Laura69]

The last trick with 'doc.write' was great, never thought you could get an element during the writing process of the document and append it to another.

[@FunctionGermany]

cool episode!

[@terrible_-]

JAKE HAS MORE F1 MERCH! SICK! pity about danny ricc 😞

[@jakearchibald]

Yeah, sad to see him go. Hope he gets a decent drive somewhere. Although, Piastri was good in F2.

[@roguetrufflepig]

Went on a deep dive into GML/SGML. Hilarious 😂 This channel is amazing 💯

[@LeeSmith-cf1vo]

Can you actually address those weird nested ems with css and queryselector? (not for a moment suggesting that anyone should actually do that!) I didn't realise that xhtml was still a thing tbh, I thought it was xhtml _or_ html5, but not both. I think it would be interesting to use that strict mode during dev but then have it be non-strict in the deployed version. Presumably we can easily do this by changing the content-type

[@jakearchibald]

If it's in the DOM (the right hand view), then yeah they're addressable with CSS and JS.

[@stephenJpollei]

I could have sworn that html5 defines an xml set of rules and a tag-soup set of rules.

[@jakearchibald]

@@stephenJpollei if you serve your page using the XHTML content-type, it triggers the strict XML parser.

[@egorkloos]

I still place a space and forward slash on the end of self closing tags. Even though I remember the bug being solved. Maybe it's time to move on. 😂

[@edstercw]

6:10 "GML... is a group of lads names... how do you feel about that?". AWK-ward. That's how

[@WafflesASAP]

EDIT: At 20:07 you show the Github example using `document.body.append(div)` and I basically put my palm through my face. I've used `body.append()` and know damned well that whatever I'm appending is nested within the `` tag. I have no idea why I thought the below would be any different at first glance, lol. WHOOPS. OP: At 17:50 I assumed that the `.append()` would actually move `div.summary` _outside_ of ``, but I didn't think it'd nest the div _inside_ the `h1` - I thought you'd end up with: Page title

[@jakearchibald]

Haha don't worry about it! Things like ::after in CSS make this stuff really confusing

[@WafflesASAP]

@@jakearchibald I actually just Googled the proper definition of "append" and was surprised that the word "after" wasn't used at all. It's defined as: "add (something) as an attachment or supplement." For whatever reason, I've always assumed that "prepend" meant to add something _before_ something else, whereas "append" meant to add something _after_ something else. Today I learned! Thanks Jake!

[@jakearchibald]

@@WafflesASAP it kinda does what you say. "append" is a relatively new method. The older method is "appendChild". It's appending (or prepending) and item to the child list of the element.

[@KGello]

I love the reaveal at the end, I don't even feel it deserves to be called a hack. @18:54 why does the div(&co) go into the heading? I don't think this behaviour is explained by the open elements stack.

[@jakearchibald]

It isn't the parser that puts the div into the heading, the JS does that

[@aredrih6723]

Welp, I finally have an answer to why doesn't work. Kinda weird but makes sense.

[@MogohViol]

So I tried xhtml. It went a bit as expected. My page didn't render, so I started fixing compatibility errors until I got to the point, where the "errors" are part of the framework. Then I gave up. Question: Is it possible to express all new HTML features in xhtml? Are they that backwards compatible?

[@jakearchibald]

Which errors were impossible to fix?

[@MogohViol]

@@jakearchibald Oh, no, the errors were not impossible to fix. It was just, that those were part of the framework and I thought, that it's not worth my time to “fix” the framework. So my question is, has the HTML standard evolved that much, that it became impossible to write everything in pure XHTML, or should it (in theory) still be possible to write everything in plain old XHTML?

[@mattwilcoxuk]

I remember doing a lot of XHTML Transitional and a fair bit of Strict.

[@jakearchibald]

Even with the Content-Type?

[@ucanozen]

I don't get it! So good browsers will automatically correct your mistakes but they are not always right. So your page might not look the way you intended but it is OK! Because, it creates competition between the browsers? And who is pushing a code which is giving an error on the production? Just have strict rules so when it fails when I am developing it so I can correct it. Am I missing something?

[@jakearchibald]

It doesn't create competition between browsers, since there's one spec for all browsers to follow. I agree that DevTools could do more to highlight parse errors, but in the meantime there are plenty of validators and linters.

[@jordanclark223]

I enjoy the videos, but can the audio guy please do a better job? Sometimes i can barely hear them talk, and i turn up the volume, then they say one really loud word or the music comes on blaring... i just want one solid dB level plz

[@jakearchibald]

Yeah, we had a bit of an audio issue with this episode that wasn't recoverable. Hopefully it'll be better for the next one.

[@jordanclark223]

@@jakearchibald All good, thanks for the confirmation! And thanks for taking the time to make these, we really enjoy the topics, especially since they are coming from you guys

[@ALbertoDoriguzzi]

oh me too! The volume is pretty low 😅 …anyway thanks guys, love your videos!

[@GuillaumeRossolini]

17:02: Doesn't the browser execute the appended script element? And did you crash your browser

[@jakearchibald]

No, it only executes it once.

[@jakearchibald]

In the spec, it's the "already started" state that tracks this html.spec.whatwg.org/multipage/scripting.html#already-started

[@atikenny]

Welcome to another episode of questions that nobody asked

[@jakearchibald]

😁 More of that coming up in future episodes!

[@atikenny]

Just to be clear, I loved it, and Keep them coming!!!

[@LeeSmith-cf1vo]

What is the reason that script requires a separate close tag even when it has a src attribute? I lost count of how many times that one has caught me

[@jakearchibald]

In HTML, tags either need closing tags, or they don't. It never depended on attributes.

[@LeeSmith-cf1vo]

@@jakearchibald well I was thinking more that self-closing should be allowed when the attribute is present. But now that you mention it, I can't think of any other example of such a thing. Shame

[@jakearchibald]

@@LeeSmith-cf1vo self-closing tags weren't a thing when arrived in HTML, and it wouldn't have been compatible to add it later 😞

[@stephenJpollei]

Pretty sure that not depending on attributes is because that's not something you could specify in SGML schema.

[@SimonBuchanNz]

@@jakearchibald I just wish there was a warning for that happening: at the moment you get absolutely nothing! If it's at the end of the page (because you don't know about defer, I guess?) you don't even have the content after it disappearing.

[@truvc]

Is streaming HTML a good idea though? Is it faster or a better UX to do that with fetched HTML really?

[@jakearchibald]

Yep, that's why _every_ browser does it by default

[@SimonBuchanNz]

It can take seconds to read the bytes off a server in many cases even after the first response byte, and further many servers can send the header and part of the page before it needs eg database data.

[@HoffmannPeter]

I so much would love to see parsing errors (let's call them challanges) in the developer console. C&P to a validator ist so pre-2000 and esp. for generated HTML still necessary.

[@jakearchibald]

Yeah, I filed that with our devtools team (see the link in the description) but it doesn't look like they're interested.

[@HoffmannPeter]

@@jakearchibald I read that Issue, but it's already closed, just thought to at least give a statement of support. I don't think it's about performance but human readability and your case of the missing dom-branch that got transfomed away.

[@SimonBuchanNz]

Surely there's an extension?

[@Serpsss]

Would having a strict mode in html potentially cause pages to fail if a browser addon prevents script loading or otherwise alters it or the html in some way? Would it only affect inline JS or not at all?

[@jakearchibald]

Good question! I don't think add-ons interact with the parser directly, so I don't think they would cause parsing failures.

[@MundoFinky]

@@jakearchibald Couldn't a browser extension execute document.write("") ?

[@MundoFinky]

Wow, XHTML documents don't support document.write and innerHTML checks validity before taking effect. So I guess it's impossible for an extension to make the parsing fail.

[@jakearchibald]

@@MundoFinky unless they can transform the stream from the server. I don't know much about extensions, so I don't know if that's possible.

[@MikeOfNight]

Wait for it...

[@Steve-Richter]

Please explain the difference between a graph and a tree in terms of parser output.

[@jakearchibald]

In a tree, a node only has a single parent. In the graph system IE used, that wasn't enforced, and wasn't always true.

[@TheChooseAName123]

As a German with some Knowledges about Latin I'd say: "Bra" like "bra", with emphasis and "mus" like "moose", but short and without emphasis But the name might be from a completely different language...

[@MrQuickLine]

You specifically said you wouldn't have any more friends unless an old one died. Bramus, you'll have to kill someone.

[@jakearchibald]

I'll get them to fight to the death in the next episode

[@cassieevans8790]

@@jakearchibald *cracks knuckles*

[@bramus]

😅

[@technikhil314]

does jake remind of sheldon in initial still?

[@MafiosiBob]

Wouldn't all those issues be solved by just... Closing your tags

[@dmytroportianka3842]

Where is the other guy? is he ok?

[@Undef1Gned]

I’ve used a lot of things Jeff recommended but I’m sure as hell not purchasing copilot

[@jakearchibald]

What?

[@alystair]

What about trailing slashes in HTML... inside an SVG?

[@jakearchibald]

They work! (There's an example in the episode)

[@chris-eg]

great streaming tip, could you achieve this with an aswell? let = document.createElement(''); .setAttribute('sandbox','allow-same-origin'); let doc = .contentDocument; doc.write(''); document.body.append(doc.body.firstElement); ... using an will probably be more resource intensive....i think...

[@jakearchibald]

Yep, you can do the same trick with an .

[@dbmusictech]

Why is Surma using a switch controller for his presentation remote, and how is it connected?

[@jakearchibald]

kzbin.info/www/bejne/pnqseX1jg66sm9U 😀 (but I'm Jake, not Surma)

[@colin-vandervoort]

Not sure if you’re just trolling but Jake talked about the gamepad API in a previous episode

[@dbmusictech]

Not trolling just mixed up my two brilliant hosts 🤦 Thank you, will look for this episode. Have used the gamepad api before, but never considered it in this context!

[@colin-vandervoort]

Ah my bad haha. Yeah I haven’t used that API but it seems neat. Maybe at some point I can kick Powerpoint to the curb and build something like Jake has for presenting

23:42 Wait, is it still not possible to pass a stream from the fetch response to the DOM?

[@jakearchibald]

Nope, but you can do it yourself using doc.write

[@AmirPlusH]

@@jakearchibald Thank you so much for the great content! I love it! Few questions though 1) if I stream the fetch response and doc.write it to DOM, does this mean browser will have to do more reflow and repaint as opposed to inserting whole fetch response in one go? 2) If I fetch a badly written response-with a script that removes a previous element “A”- and stream it, “A” will be onscreen until the script is put on DOM, but if I insert the whole response in one go user might see “A” for a split second (side question: is it possible to avoid this, say by asking browser to render response and then insert result into DOM?). If this is the case, is there any situation where I should NOT use this hack to stream response onto page? P.S. sorry for the long question, couldn’t make it shorter.

[@jakearchibald]

@@AmirPlusH 1) potentially, depending on the speed of the connection. But, the cost of layout is a fair price when it comes to displaying content sooner. It's what _every_ browser does by default when loading a large document. 2) I'm struggling to follow this. Why not test it? There's a JSBin link in the description you can use as a starting point.

[@AmirPlusH]

@@jakearchibald Thank you very much!

[@xieyuheng]

Developing upon a bad solution feels like growing a cancer.

[@jakearchibald]

What's the bad solution here?

[@fgclue]

did anyone notice that he's using a nintendo switch joycon to switch slides

[@jakearchibald]

😀 kzbin.info/www/bejne/pnqseX1jg66sm9U

[@cyb]

Looks like google devs are watching youtube content creator how to grow your channel videos

[@abdulhadilababidi5465]

Happy to be the first to comment 🤩

[@tejasthorat]

xd turning on notifications so wont miss a video.

[@sn0kite]

IMHO, browsers should have never allowed anything that wasn't well-formed (XML). Browser "magic" to fix bad HTML, and auto closing paragraphs is overhead that should really no longer be needed. In 2022, I think browsers should insist on well-formed HTML, and as a legacy option, allow for "magic" element closing.

[@jakearchibald]

Err, did you, urm, watch the episode? At all? In particular, the bit from 5:15 onwards?

[@alystair]

There is no guarantee of wellformed-ness online, esp. with inconsistent connectivity

[@stephenJpollei]

xml didn't even exist when first browsers were created. I do use validators for my html. I actually like auto-closing. xml real strength is not requiring a schema, but if you have schema then it doesn't buy you that much. It allowed things like mixing svg and xhtml, but browsers special cased that. And xslt might have been useful.

[@sn0kite]

@@jakearchibald I did, but I didn't arrive at the same conclusion. I guess I understand how competitive market forces drove browsers to accept mal-formed content, but if all the browsers did the same thing (dreaming), the errors would have been obvious during development, and all browsers would be showing the same thing. Does the content-type=application/xhtml+xml; charset=utf-8 that you mention at 13:38 offer any significant performance improvements compared to the "magic" parser settings used by default?

[@jakearchibald]

@@sn0kite no performance benefit. It may be slower. Fwiw, I've been working in web performance for over 15 years and I've never seen parser speed be a bottleneck. I guess I don't understand why you think it'd be a good thing that a browser would hide useful content from users. Potentially life-saving content.

[@Pfoffie]

I was impressed but waiting for the magic and then in the end that amazing hack omx. HTTP 203 never let’s me down