The Biggest Lie In HTML

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 เม.ย. 2024
  • I have been angry about self-closing tags for awhile. I now better understand WHY they are so bad, but I still hate it.
    SOURCE
    github.com/sveltejs/svelte/is...
    jakearchibald.com/2023/agains...
    Check out my Twitch, Twitter, Discord more at t3.gg
    S/O Ph4se0n3 for the awesome edit 🙏
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 474

  • @avsaase
    @avsaase 2 หลายเดือนก่อน +318

    The web is built on a mountain of tech debt.

    • @michaelbelete2124
      @michaelbelete2124 2 หลายเดือนก่อน +8

      Quote of the year

    • @vrjb100
      @vrjb100 2 หลายเดือนก่อน +4

      That's not technical debt, it's technical neglect

    • @PhilipAlexanderHassialis
      @PhilipAlexanderHassialis 2 หลายเดือนก่อน +4

      This is one of the first things I always say to the FE teams I manage when we form the team and start talking about the project, well not actually this, but actually "the web is held together with gum, duct tape and prayers". They don't understand it at this point, but pretty soon enough they do get it. Shenanigans ensue.

    • @AbstruseJoker
      @AbstruseJoker 2 หลายเดือนก่อน +7

      Most of software. Not just the web

    • @DarrenJohn10X
      @DarrenJohn10X หลายเดือนก่อน +1

      "...held together with gum, duct tape and prayers". They don't understand it at this point, but pretty soon enough they do get it. Shenanigans ensue."
      ^ Speedrun your team's "getting it" by making Theo's rant here Required Reading during their first week.

  • @sharkinahat
    @sharkinahat 2 หลายเดือนก่อน +276

    Hello
    Will always look like an error for me.

    • @TheCodeDrop
      @TheCodeDrop 2 หลายเดือนก่อน +21

      ikr, its only something who didn't bother learning HTML first jumped straight into these JS Frameworks would do. The current implementation is really good for me, I just close everything. For self-closing tags it doesn't bother them, just one extra / to deal with. e.g.: and for "closing" closing tags, welp, I simply close them after their job is done. e.g.: meh

    • @Slashx92
      @Slashx92 2 หลายเดือนก่อน +6

      ​@@TheCodeDropand any self-closing element that is not closed just to throw an alert to the console and done, to not break old code using amd . Everything sorted

    • @TheCodeDrop
      @TheCodeDrop 2 หลายเดือนก่อน +1

      @@Slashx92 yes why not, just show a warning, it can at least be a great starting point.

    • @pablom8854
      @pablom8854 2 หลายเดือนก่อน +1

      looks kind of like pug which I find awesome

    • @Pete133
      @Pete133 2 หลายเดือนก่อน +5

      Yeah... and it is an error if you put it in the W3C HTML validator. I don't see how it would make sense in any language to expect "Hello" to be inside the div... if the language does support self closing tags then any content after the closing slash should be outside the element... isn't that the point of a closing slash? The fact that browsers ignore the self closing slash and fix your invalid markup should never have been interpreted as some valid syntax.

  • @Jono997
    @Jono997 2 หลายเดือนก่อน +143

    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

    • @LongJourneys
      @LongJourneys 2 หลายเดือนก่อน +22

      Right? I don't use frameworks unless I have to.

    • @illusion466
      @illusion466 2 หลายเดือนก่อน +5

      based and react pilled

    • @acf2802
      @acf2802 2 หลายเดือนก่อน +14

      No frameworks?! No frameworks to manage your frameworks? Do you even webdev?

    • @DavidLindes
      @DavidLindes หลายเดือนก่อน

      @@acf2802 that might depend on how one defines "webdev". Some of us have been writing HTML by hand since the mid 1990's, and, while we may use frameworks of various sorts for some things, we're quite content to hand-code HTML for other things. 🤷🏻‍♀

    • @dmug
      @dmug หลายเดือนก่อน

      For a very very long time my personal website was just a few PHP files with includes that were filled with good ol' hand written HTML. It's now just pre-rendered NEXT.js to get around pesky full page refreshes. Nothing like having to compile your god damn site just because you changed a few words.

  • @m4rt_
    @m4rt_ 2 หลายเดือนก่อน +38

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

    • @Barnardrab
      @Barnardrab 28 วันที่ผ่านมา

      Same here. I find that frameworks convolute code with boiler plate and makes the project more complicated.

  • @martybando1668
    @martybando1668 2 หลายเดือนก่อน +50

    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.

    • @techobservations8238
      @techobservations8238 หลายเดือนก่อน +1

      exactly my thinking
      its on the Framework people to do and understand the thing they are wrapping to the extreme detail - pretier et al be damned follow the spec's and implications

    • @alex2143
      @alex2143 หลายเดือนก่อน

      ​@@techobservations8238 counterpoint. If MOZILLA, the actual developers of one of the oldest and most respected browsers, do this wrong, then the language is wrong and needs to be fixed. That would either be a temporary annoyance now, or we're going to permanently keep having this annoyance in the future. People 200 years from now will look back and ask themselves, why didn't they just fix this.

  • @Malix_off
    @Malix_off 2 หลายเดือนก่อน +217

    Enters HTML, the programming language

    • @overwrite_oversweet
      @overwrite_oversweet หลายเดือนก่อน

      That's not all! Introducing HTML... with Styles™! Cascading your way from context free, to more powerful models of computation!
      HTML+CSS, the dataflow programming language of choice!*
      (*among masochists)

  • @Sammysapphira
    @Sammysapphira 2 หลายเดือนก่อน +97

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

  • @SchioAlves
    @SchioAlves 2 หลายเดือนก่อน +43

    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 🙃

    • @RandomGeometryDashStuff
      @RandomGeometryDashStuff 2 หลายเดือนก่อน

      http content-type header

    • @JayXdbX
      @JayXdbX หลายเดือนก่อน +2

      I would do my part and never use it!

  • @unusedTV
    @unusedTV 2 หลายเดือนก่อน +90

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

    • @arthurcarchi4045
      @arthurcarchi4045 2 หลายเดือนก่อน +7

      What the ... ?

    • @tharsis
      @tharsis 2 หลายเดือนก่อน +9

      Also SHTML (server side includes) where you could easily embed other HTML files (as well as doing other things) without even needing a PHP backend! Just slap in and you're sorted. It even supports arbitrary execution of shell commands and echoing environment variables!
      XSS and user submitted content wasn't exactly a concern when SSI was introduced...

    • @nocclia
      @nocclia 2 หลายเดือนก่อน +7

      html email building still has to use conditional comments for some stylings on outlook clients lol

    • @valdsonfrancisco8836
      @valdsonfrancisco8836 2 หลายเดือนก่อน +2

      JDSL (tom is a genius)

    • @ZipplyZane
      @ZipplyZane 2 หลายเดือนก่อน

      @@arthurcarchi4045 I mean, it kinda makes sense, assuming not all browsers are the same, and the other browsers don't have browser-specific syntax. You put the code specific to your browser in a special comment so that other browsers ignore it.
      A similar technique was used to allow JavaScript to work in old HTML, before all browsers had JS support. You would put your JavaScript inside of a special HTML comment.
      Similarly, XML doesn't like raw text strings, so SVG would put them inside of CDATA tags. Notice how it starts with

  • @neociber24
    @neociber24 2 หลายเดือนก่อน +203

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

    • @nickfarley2268
      @nickfarley2268 2 หลายเดือนก่อน +9

      HTML is already compatible. Self closing elements would require new tools. Why do we need this??

    • @proosee
      @proosee 2 หลายเดือนก่อน +7

      @@nickfarley2268 because we treat HTML as human-readable language, so it must be easily readable for humans as well. If that was only machine readable language (like e.g. bytecode) then you would be right.

    • @nickfarley2268
      @nickfarley2268 2 หลายเดือนก่อน +17

      @@proosee are you saying html is not human readable because you have to write instead of ? Why do we need to redefine HTML syntax so we can save 5 characters of text?

    • @proosee
      @proosee 2 หลายเดือนก่อน +10

      @@nickfarley2268 no, I didn't say that, I said that if you consider language a human-readable one then opinions of people on how confusing it is actually matter, if spec for is for most people confusing then you need to take it into account and you just disregarded it by "meh, machine can read it so it doesn't matter".

    • @Slashx92
      @Slashx92 2 หลายเดือนก่อน

      ​@nickfarley2268 it's less human readable if you re-watch rhe examples with the div tag. Or this is inside
      Brs are not the problem

  • @David-id6jw
    @David-id6jw 2 หลายเดือนก่อน +38

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

    • @charliecarrot
      @charliecarrot 2 หลายเดือนก่อน +13

      I try not to care, but the number of times he said it in this video was killing me 😭

    • @omarjohnson2450
      @omarjohnson2450 2 หลายเดือนก่อน +4

      @@charliecarrot went and looked for these comments when i just couldnt anymore (5 minutes in)

    • @SandraWantsCoke
      @SandraWantsCoke 2 หลายเดือนก่อน +3

      a-tri-butÉ is French

    • @skillit2
      @skillit2 หลายเดือนก่อน +2

      I hear people use the verb pronunciation for the noun so much, it always bumps me.

    • @joshuabrazile
      @joshuabrazile หลายเดือนก่อน +2

      Oh GOD YES!!!!!! This was KILLING ME!

  • @stephenjames2951
    @stephenjames2951 2 หลายเดือนก่อน +16

    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 />. 😂

  • @davidmaxwaterman
    @davidmaxwaterman หลายเดือนก่อน +9

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

  • @DarenC
    @DarenC 2 หลายเดือนก่อน +18

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

  • @tiedye001
    @tiedye001 2 หลายเดือนก่อน +44

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

  • @timseguine2
    @timseguine2 2 หลายเดือนก่อน +5

    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.

  • @tauraamui
    @tauraamui 2 หลายเดือนก่อน +10

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

    • @allesarfint
      @allesarfint หลายเดือนก่อน

      How dare write HTML instead of... let me check... JSX

    • @jsmunroe
      @jsmunroe หลายเดือนก่อน

      Yeah, my documentation is just HTML and JSX hand written in Composition notebooks. My code reviewers just use red pen.

  • @michakrecisz5100
    @michakrecisz5100 2 หลายเดือนก่อน +9

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

    • @derek123wil0
      @derek123wil0 2 หลายเดือนก่อน +6

      To bake an apple pie from scratch, first invent the universe

    • @michakrecisz5100
      @michakrecisz5100 2 หลายเดือนก่อน +5

      Its more like… to bake an apple pie from scratch you need to now how to use an oven.

    • @Gastell0
      @Gastell0 หลายเดือนก่อน +1

      There's really handful of people who really do though

  • @jordanaktiga
    @jordanaktiga 2 หลายเดือนก่อน +4

    "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.

  • @TheRealFallingFist
    @TheRealFallingFist 2 หลายเดือนก่อน +11

    "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...

    • @electra_
      @electra_ 2 หลายเดือนก่อน +1

      At the very least in TypeScript, I get an error when trying to use emojis. At one point I was trying to write code using some custom Unicode characters and I had to make a custom parser just to reformat it (it would change the unicode characters into variable names that had bytes written out like identifier_u1234_u2345 etc, which was awful to debug of course)

    • @TheRealFallingFist
      @TheRealFallingFist 2 หลายเดือนก่อน +1

      @@electra_ Number one reason I'll never move on to typescript, can't use emojis. It's incredibly important to my workflow. .js files or bust.

  • @vectorgpt
    @vectorgpt หลายเดือนก่อน +5

    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 .

    • @RickYorgason
      @RickYorgason หลายเดือนก่อน

      SGML has had self closing tags since at least the last millennium. See Annex K.3.5.1.

  • @Cool_Goose
    @Cool_Goose 2 หลายเดือนก่อน +6

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

  • @RevNelson
    @RevNelson 2 หลายเดือนก่อน +13

    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!

    • @dumpstin
      @dumpstin 2 หลายเดือนก่อน

      I was just about to be that guy - thanks Reverend!

  • @jeramymorrill2729
    @jeramymorrill2729 2 หลายเดือนก่อน +37

    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

    • @msclrhd
      @msclrhd 2 หลายเดือนก่อน +5

      HTML5 has an XML serialization mode (XHTML5) when you add an tag at the start. That is in part for compatibility with XHTML, but also with XML pipelines (e.g. transforming JATS to HTML with XSLT). It's also used in various places like EPUB 2 files.

    • @acf2802
      @acf2802 2 หลายเดือนก่อน +4

      Except not really because 99% of people who used XHTLM did not serve it with the "application/xhtml+xml" mime type which means it was always being parsed as HTML and relying on HTML's lackadaisical handling of syntax errors to "just work."

    • @DavidLindes
      @DavidLindes หลายเดือนก่อน +1

      the video goes into this. But, yeah, I'm finding myself wanting to start explicitly using xhtml instead of html5 from now on, and keeping (with or without the space, ideally) as being what I expect it to be.

  • @RicardoVermeltfoort
    @RicardoVermeltfoort 2 หลายเดือนก่อน +15

    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

    • @joshix833
      @joshix833 2 หลายเดือนก่อน

      Yeah, for theo /> means self-closing tag even if it doesn't close right away.
      In HTML5 br and input are self-closing, div isn't regardless whether there's a slash.

    • @dminik9196
      @dminik9196 2 หลายเดือนก่อน +2

      In html, these (, , ) are not called self-closing. Technically they are called void tags.

    • @dminik9196
      @dminik9196 2 หลายเดือนก่อน +4

      To be even more pedantic, they are called void elements, not void tags. Shame on me for not double checking before commenting 😞

    • @kennethguinto4862
      @kennethguinto4862 หลายเดือนก่อน

      you know the right way to write hr and br tags are and right? as somone says they are void elements.. will it blow your mind that tag does not need to be closed ?

  • @vytah
    @vytah 2 หลายเดือนก่อน +7

    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.

  • @echobucket
    @echobucket 2 หลายเดือนก่อน +14

    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.

    • @RandomGeometryDashStuff
      @RandomGeometryDashStuff 2 หลายเดือนก่อน +2

      browsers still support xhtml so no losing

    • @Silverflame1
      @Silverflame1 หลายเดือนก่อน

      @@RandomGeometryDashStuff That's not the point. If we would have switched to XHTML or XML we would have saved ourselves a lot of pain and suffering (it would also cause a lot of pain and suffering to transition but that would only be a period and now we're stuck with HTML).

    • @anoniemoss3566
      @anoniemoss3566 หลายเดือนก่อน +1

      I'm glad someone else posted this too. XHTML should have been the path forward. HTML5 should be referred to as Hyper Trashcan Markup Language.

  • @dustycarrier4413
    @dustycarrier4413 2 หลายเดือนก่อน +19

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

    • @DavidLindes
      @DavidLindes หลายเดือนก่อน +2

      in what way is that less clear? (Inherently -- ignoring what things do with it for the sake of this question.)
      To me, is _more_ clear than , if only because I don't have to mentally make sure that the tag names are the same, I can just read one of them and see that it's self-closing. No?

    • @olemortensen3354
      @olemortensen3354 หลายเดือนก่อน +1

      Wait? You can self-close? I've always explicitly closed all enclosable tags. It's consistant with the XML. I work so often With XML that it's easier for me to just write code exactly as they should do. Not relying on an asumption that the computer not f*** up your purpose.

    • @DarrenJohn10X
      @DarrenJohn10X หลายเดือนก่อน +2

      did you really want two of these??

    • @davidroddini1512
      @davidroddini1512 หลายเดือนก่อน +1

      Personally, I lean towards all or nothing. If not all tags can be self closing due to security concerns, then none of them should be. Be consistent.

    • @olemortensen3354
      @olemortensen3354 หลายเดือนก่อน

      @@davidroddini1512 amen to that. HTML is not the world! we can't be inconsistant in our expressions, and if it's a problem in one place it's 100%, a problem everywhere the self-enclosed tags are used.

  • @MarushDenchev
    @MarushDenchev 2 หลายเดือนก่อน +12

    Theo is really brand new

  • @109Rage
    @109Rage 2 หลายเดือนก่อน +2

    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.

  • @alerighi
    @alerighi 2 หลายเดือนก่อน +22

    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.

    • @sweetshit4931
      @sweetshit4931 หลายเดือนก่อน

      XML is an ISO-compliant subset of SGML

    • @tabularasa0606
      @tabularasa0606 หลายเดือนก่อน

      html should just be fixed.

    • @briankarcher8338
      @briankarcher8338 หลายเดือนก่อน

      used to throw me for a loop. All I wanted to do was include an external js file. And simply does not work. It drove me nuts.

  • @Danny1986il
    @Danny1986il 2 หลายเดือนก่อน +25

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

  • @manofacertainrage856
    @manofacertainrage856 2 หลายเดือนก่อน +7

    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.

  • @Nekroido
    @Nekroido 2 หลายเดือนก่อน +4

    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

    • @Silverflame1
      @Silverflame1 หลายเดือนก่อน +1

      XHTML is based on HTML4. Nobody seemed to be interested in it and then it faded away after HTML5 came out.

  • @prozacgod
    @prozacgod 2 หลายเดือนก่อน +9

    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 )

    • @prozacgod
      @prozacgod 2 หลายเดือนก่อน +3

      The argument for img, is an img in an inline block element, the sorta obvious behavior would be that if an img is a block level element, then it should be able to have children, and the image would act like a inline-block element with fixed size and a background image

  • @nilaallj
    @nilaallj 2 หลายเดือนก่อน +8

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

    • @OfficialJabe
      @OfficialJabe 2 หลายเดือนก่อน +2

      also as keys of objects or symbols

  • @wartab
    @wartab 2 หลายเดือนก่อน +4

    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.

  • @advaitju
    @advaitju หลายเดือนก่อน +2

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

  • @recursiv
    @recursiv 2 หลายเดือนก่อน +2

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

  • @JonGretarB
    @JonGretarB 2 หลายเดือนก่อน +21

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

    • @rickhackro
      @rickhackro 2 หลายเดือนก่อน +2

      I think Julia do that as well

    • @CatFace8885
      @CatFace8885 2 หลายเดือนก่อน +1

      I honestly don't see the point. I don't need my variable names to be cute with emojis everywhere. If anything, I think having them in variable names will make it harder to actually use that variable in the first place. I'm glad other languages don't support that.

    • @rickhackro
      @rickhackro 2 หลายเดือนก่อน +8

      @@CatFace8885 Julia is designed to solve math problems, and for this is very nice for a language to support math related symbols. And Julia does it very nicely. Not emojis per say

    • @rickhackro
      @rickhackro 2 หลายเดือนก่อน +1

      @@CatFace8885 different languages, different purposes

    • @UnraveledMnd
      @UnraveledMnd 2 หลายเดือนก่อน +4

      PHP supports it too, funnily enough.

  • @askholia
    @askholia 2 หลายเดือนก่อน +1

    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.

  • @ArchaeanDragon
    @ArchaeanDragon 2 หลายเดือนก่อน +3

    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.

    • @DarrenJohn10X
      @DarrenJohn10X หลายเดือนก่อน

      I really like that, "lavaflows". Instantly makes sense, like "footguns".

    • @ArchaeanDragon
      @ArchaeanDragon หลายเดือนก่อน

      @@DarrenJohn10X It's a commonly-used software development term -- unfortunately. :)
      It usually refers to code or design that was done in a haphazard or expedient way (the "flow" part), and has since hardened into an unchangeable standard.
      Also can refer to multiple layers of the same thing, since you can't change the "hardened" mess below, you just pave over it with more lava. :P

  • @edwardodavinci55
    @edwardodavinci55 2 หลายเดือนก่อน +2

    the first few seconds hurt me physically

  • @jinx.love.you.
    @jinx.love.you. 2 หลายเดือนก่อน

    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

  • @portblock
    @portblock 2 หลายเดือนก่อน +2

    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

  • @ua420
    @ua420 2 หลายเดือนก่อน +3

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

    • @TheRealFallingFist
      @TheRealFallingFist 2 หลายเดือนก่อน +2

      Yes you can. Just not in JSX. He would have shut himself up real quick if he tried it in a .js document lol

  • @pendaco
    @pendaco หลายเดือนก่อน +2

    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 😭

    • @geoffreyvanpelt6147
      @geoffreyvanpelt6147 หลายเดือนก่อน

      I preferred xhtml. It allowed for simpler parsing rules, which allowed pages to be easily parsed on low power devices like cell phones, brail readers, printers and so on.

  • @CristianKirk
    @CristianKirk หลายเดือนก่อน

    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.

  • @jordanbrennan1296
    @jordanbrennan1296 หลายเดือนก่อน +1

    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!

  • @prima_ballerina
    @prima_ballerina หลายเดือนก่อน +3

    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 :-)

    • @Gastell0
      @Gastell0 หลายเดือนก่อน

      If it worked in X/HTML, but doesn't in HTML5, then maybe it shouldn't have been called HTML5 but SGML5 instead so people wouldn't assume it's compatible.

  • @ronslayton5270
    @ronslayton5270 2 หลายเดือนก่อน

    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.

  • @HeroOfHyla
    @HeroOfHyla หลายเดือนก่อน +1

    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.

  • @thngzys
    @thngzys 2 หลายเดือนก่อน +2

    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.

  • @soberstudy160
    @soberstudy160 2 หลายเดือนก่อน +1

    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...

  • @jonnyeh
    @jonnyeh 2 หลายเดือนก่อน +3

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

  • @precumming
    @precumming 2 หลายเดือนก่อน +3

    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.

    • @adtc
      @adtc หลายเดือนก่อน

      Why would anyone copy-paste Svelte into HTML?

  • @MrTheSmoon
    @MrTheSmoon 2 หลายเดือนก่อน

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

  • @Zeilar
    @Zeilar 2 หลายเดือนก่อน +2

    Just in time for my F5

  • @DanKirkwoodJr
    @DanKirkwoodJr 2 หลายเดือนก่อน +2

    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. :-)

  • @crism8868
    @crism8868 2 หลายเดือนก่อน +3

    React bug brains are a hell of a drug 😉

  • @saculfed3798
    @saculfed3798 หลายเดือนก่อน

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

  • @SimonJackson13
    @SimonJackson13 2 หลายเดือนก่อน

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

  • @retakenroots
    @retakenroots 13 วันที่ผ่านมา

    I also have written a JavaScript framework and also require the empty tags to be closed. Simply because the framework code becomes less complex

  • @hobbit125
    @hobbit125 2 หลายเดือนก่อน +26

    In 2005 everyone knew this. This confusion is 100% caused by JSX having you write XML to generate HTML and people thinking they are writing HTML.
    HTML is fine and a well-defined format with consistent rules. You're mad because you didn't bother to learn the format properly, and now you want it to look and act like something you did bother learning (XML/JSX.)

    • @bence3776
      @bence3776 2 หลายเดือนก่อน +5

      call this a hot take but just because a technology has consistent rules it doesn’t inherently make them the right approaches…

    • @anhdunghisinh
      @anhdunghisinh 2 หลายเดือนก่อน

      ​​​@@bence3776agree, the reason html back then needs to have rules like this is because back then people have to write html directly, they are still new to it and constantly sending broken html to the browser.
      Nowadays things changed, people have linting to stop shooting themselve in the foot and consistencely sending correct syntax. I think the ruling is kinda redundant now

    • @TheKeithHenry
      @TheKeithHenry 2 หลายเดือนก่อน +4

      There's definitely a divide here - I started web dev in the 90’s and never wanted to randomly add / at the end of tags. XHTML was a mess. It is interesting to see how someone who only develops in JSX but doesn't understand what browsers actually do be both surprised by this and think the JSX way is the correct way (because nobody writes really HTML any more, right?)
      If I were going to spec HTML from scratch I might do it differently, but that's painfully naive. Some tags self close, some tags don't, that's the platform and it changes slowly and with a strong priority for backwards compatibility. It will never (and should never) adapt to what JSX interpreters do instead.

    • @outwithrealitytoo
      @outwithrealitytoo หลายเดือนก่อน

      If I had a penny for every time I said "it looks like client-side html, but it's not client-side and it's not html... but a lot of the time you can pretend it is...except when you can't."

    • @Silverflame1
      @Silverflame1 หลายเดือนก่อน

      @@bence3776 I think it is a requirement for most if not all technologies to have rather consistent rules but the argument he is making is that HTML is different from other technologies and that nobody really learns HTML (even those working with it) and thus people make wrong assumptions about it. I've recently learned a lot about HTML and it blows my mind how different it was from what I was expecting of it but that it does indeed follow consistent rules that somehow make sense. The only problem is that when looking back at it and thinking about it makes me realize that it's all just a nightmare and there is no sense of strictness or correctness.

  • @blfunex
    @blfunex 2 หลายเดือนก่อน +3

    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.

    • @spicybaguette7706
      @spicybaguette7706 2 หลายเดือนก่อน +1

      I feel like linters should also include this as a standard warning/error, at least when using and alike

  • @ukyoize
    @ukyoize 2 หลายเดือนก่อน

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

  • @chocomilkplz
    @chocomilkplz 2 หลายเดือนก่อน +1

    As someone who has been using pug for the last 5 years, I can't relate to anything here mattering

  • @mamad-dev
    @mamad-dev 2 หลายเดือนก่อน +1

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

  • @MeinDeutschkurs
    @MeinDeutschkurs หลายเดือนก่อน

    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.

  • @PascalVos
    @PascalVos 2 หลายเดือนก่อน +1

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

  • @ryzzlas
    @ryzzlas 2 หลายเดือนก่อน +1

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

  • @suspended67Animations
    @suspended67Animations หลายเดือนก่อน

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

  • @xelspeth
    @xelspeth 2 หลายเดือนก่อน +3

    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

    • @marioprawirosudiro7301
      @marioprawirosudiro7301 2 หลายเดือนก่อน +1

      True. Divs are used for structure and allows nesting, so shouldn't it be obvious that it has a closing tag?

    • @xelspeth
      @xelspeth 2 หลายเดือนก่อน

      @@marioprawirosudiro7301 I digress with your statement, self closing divs can be useful i.e. when you fill them later with js so it does make sense for them to sometimes be self-closing

    • @marioprawirosudiro7301
      @marioprawirosudiro7301 2 หลายเดือนก่อน +1

      @@xelspeth By that, did you mean putting script inside of a div, or did you mean dynamically populate the div later on?
      I still think they shouldn't be self-closing either way. Not even for readability - nothing says "empty div" that seeing the closing div tag _right after_ the opening tag with nothing in between.

    • @xelspeth
      @xelspeth หลายเดือนก่อน

      @@marioprawirosudiro7301 I meant dynamically populating the div later on.
      Apart from that I don't think is more explicit than a self closing would be. For me it's the same as function() {} vs () => {}*. Just shorter and simpler for the same*
      *obv "this" is different in anonymous and arrow function but that's besides the point here

    • @marioprawirosudiro7301
      @marioprawirosudiro7301 หลายเดือนก่อน +1

      @@xelspeth Well, in that case it becomes a matter of personal taste. For me, just looks like a malformed div at first glance.

  • @adwinang4188
    @adwinang4188 2 หลายเดือนก่อน

    Oddly enough, I have learnt about the peculiarities of closing tag of div from school and how it works and have seen it in production before. But after years of React, somehow that knowledge has been forgotten

  • @rikschaaf
    @rikschaaf 6 วันที่ผ่านมา

    It's time to introduce: HTML6
    Where closing tags actually work.
    That, or a keyword or something, that similar to an tag would treat the contents as foreign code and therefore honor the />

  • @TheGusMP
    @TheGusMP 2 หลายเดือนก่อน +8

    It's time for HTML 6

  • @zwanz0r
    @zwanz0r 2 หลายเดือนก่อน +2

    Awesome! So happy you acknowledge that HTML exists! 🎉

  • @script_tag
    @script_tag 2 หลายเดือนก่อน +15

    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.

    • @theblckbird
      @theblckbird 2 หลายเดือนก่อน

      nooooooooooo...

    • @lts0703
      @lts0703 2 หลายเดือนก่อน +3

      Is this a Kanadian/Seawattgaming reference?

    • @neirenoir
      @neirenoir 2 หลายเดือนก่อน

      I wasn't expecting to find that meme here, of all places.

    • @Spiderfffun
      @Spiderfffun 2 หลายเดือนก่อน

      @@lts0703 I saw that too, really good one lol

    • @emireri2387
      @emireri2387 2 หลายเดือนก่อน

      @@lts0703 Yes.

  • @3ventic
    @3ventic 2 หลายเดือนก่อน +1

    Maybe XAML was the better UI markup language after all

  • @Kazyek
    @Kazyek หลายเดือนก่อน

    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)

  • @thehiddenplace
    @thehiddenplace 4 วันที่ผ่านมา

    I am so old that I went "d'uh, html is not xml"

  • @jeffreyblack666
    @jeffreyblack666 หลายเดือนก่อน

    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.

  • @stevewalker1790
    @stevewalker1790 หลายเดือนก่อน

    I agree with whatever formatter i happen to have installed on VS code this week.

  • @Gastell0
    @Gastell0 หลายเดือนก่อน

    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...

  • @onr5196
    @onr5196 2 หลายเดือนก่อน

    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.

  • @klmcwhirter
    @klmcwhirter 2 หลายเดือนก่อน +1

    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

  • @stevenhorton8604
    @stevenhorton8604 2 หลายเดือนก่อน +1

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

  • @wickensonline
    @wickensonline หลายเดือนก่อน

    I've been crying myself to sleep every night since I transitioned into web development...

  • @adtc
    @adtc หลายเดือนก่อน

    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.

  • @jonaskohl13
    @jonaskohl13 หลายเดือนก่อน

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

  • @deanvangreunen6457
    @deanvangreunen6457 2 หลายเดือนก่อน

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

  • @EskoLuontola
    @EskoLuontola 2 หลายเดือนก่อน +2

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

  • @youloulou6591
    @youloulou6591 หลายเดือนก่อน

    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 , ...

  • @laurentverweijen9195
    @laurentverweijen9195 หลายเดือนก่อน

    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.

  • @MrVauxs
    @MrVauxs 2 หลายเดือนก่อน +1

    Do note that this video was recorded before an edit made by Rich Harris, nor did the video go into the details of the actual Issue on the svelte repo, where the final decision was to *warn* the user about self-closing tags, not outright disallow it. Basically, you have the right to do what you want, but Svelte will complain a lot.

  • @adamsahlin1007
    @adamsahlin1007 2 หลายเดือนก่อน

    Angular 16 supports self-closing tags for component elements in the template :)

  • @fuzzzzy
    @fuzzzzy หลายเดือนก่อน

    whaaaat, even vscode auto-fills with i would never know that

  • @somebody-anonymous
    @somebody-anonymous 2 หลายเดือนก่อน +1

    Would have been nice to discuss how html linters handle this

  • @KojiKazama
    @KojiKazama หลายเดือนก่อน

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

  • @DavidLindes
    @DavidLindes หลายเดือนก่อน

    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.