The Fundamentals, Primitives and History of HTML5
Just gave this talk at W3Conf about some of the innerworkings of HTML5. Lots of did-you-know and cool insight into how browsers work. 37 minutes long,
The Primitives of the HTML5 Foundation – Slides
I do discuss optional start and end tags as well as not quoting your attributes. I concede that these ideas scare the shit out of people. In fact, when I first heard Jens Meiert propose the idea in 2009 my brain rejected it.
Still, I think many of the markup parsing curiosities that can be frightening only need to be understood by HTML minifiers. Always leave it up to tools to make your frontend payload smaller; you just want the most comfortable and maintainable authoring environment possible.
I shared them in this talk because 1) it can lead to writing more beautiful HTML that is easier to maintain. Leaving off </li>'s is a good example. 2) I just want people to consider browsers less of a black box of uncertainty. There are rules and specs that define behavior, so once understood you can feel confident relying on a consistent behavior. We certainly don't have that consistency across all the web platform, but for these examples you do.
In summary, I'm not advocating you write more spartan markup if you don't want to. But if it makes you feel good, by all means, go at it; you know now how the browsers work.
ps. the monkey HTML shirt I wore is from a store in tokyo; solo location. but they also sell on this delightfully overwhelming site
Hey Paul,
excellent presentation. When you talked about table>tr>td and browsers faking tbody i was all like "mothereffingfaketbodyinsert.com"… :)
So after my wandering for the first time on that "why does table>tr>td not work?" issue, i have started to put tbody effing always!
Great stuff also on IDs and unquoted attributes, gonna try to use those soon… :)
Awesome talk, Paul. Thanks!
Eu preciso começar a aprender inglês rs
Thanks for this post and video.
bless you for the clear explanation of tag vs. element.
me like it
This was such a good presentation. Gonna have some fun experimenting. Thanks :)
meta car-set??? meta CHarset. Silent H? no.
@luke holder
Since it refers to the "character set" why not "care-set"?
Yeah, great presentation. Maybe I will take the risk and drop some quotes ;-)
Damn this made me feel like I knew nothing about HTML again for the first time in years. I'm deadly afraid of omitting closing tags and quotes, and probably still won't do it, but it feels good to finally understand where I can and get away with it :)
Thanks for sharing your knowledge
@Paul Irish
…or 'carpet'…
@luke holder
Charset, car-set, carpet… who cares. The point was made clearly and that's what counts, right? :>
@Paul Irish
Agreed, I can't stand the char pronunciation that sounds like something got burnt.
Haha, I go to look up boiler plates after watching this and suddenly I see why you put that incomprehensible slam against csswizardy.com (I didn't know of them or you before seeing this). Now I get why that part didn't make much sense. Funny how the guy you slammed in a talk about a minimalist boilerplate is the guy who called you out for HTML boilerplate being too big.
Classy.
That said, great video.
@Marcus
Harry can handle it. :) https://twitter.com/csswizardry/status/138940108945625088
Really enjoyed this, Mr. Paul.
another PRO of not closing your tags:
no empty text-node between elements – browser closes the tag just before another one of the same type and depth starts ( or parent is closed )
example:
will be interpreted like:
no empty text nodes = happy DOM! ( and u can perfectly align those inline-blocks of yours'! )
and yes – tested in IE6,7,8 and others
ok, short demo what i tried to show here:
http://jsfiddle.net/stryju/zhtc7/
Really interesting things and topics BUT … (like you say) you are sometimes hard to understand for non native english speaker because you are speaking too quickly in this "show"
I want that T-shirt, but I cant find it on that site, my eyes gave out while I was looking. Great talk BTW.
thanks Paul. good as always!
Great talk Paul. Sometimes I like to go quoteless too; makes me feel like a boss!
Was wondering though: if you go no-quotes but some elements in your page contains multiple classes, would you switch to a "quote-everything" approach for this specific page instead, for uniformity matters?
@Frank Parent
Uniformity is overrated. :p
but i'd just leave unquoted things for whatever feels right. usually thats classes when its only gonna have a single class.
Awesome work, knowledge well shared, thanks!
I found this a significant waste of time. There was almost nothing there that actually helped me move forward in my knowledge. Granted there were some interesting things, but it's like learning the names of all 40 some presidents in alphabetical order. Not useful at all. Having ID's with unicode characters isn't going to make my code better and it makes it harder to write because you have to remember the code to make the characters; either that or have a list somewhere to copy/paste. And then, without the use of human-readable words, they have no semantic value.
Writing code without ending tags will only confuse the guy who comes after me and doesn't know about optional end tags, making it far less maintainable. Also, if you don't know the rules as well as you think you do, it could break.
So thanks for the laughs and the lack of Mother Effing usefulness.
@Joe Zim
You're welcome? I thought I was fairly clear in the intro to the talk that this wouldn't be about *useful* things so much as curious details. Guess not.
Sorry b. Next time jump into my slides first so you can get an idea of what I'll be wasting your time with. :)
Good presentation, except for the overuse of the word 'like' in certain places
Interesting presentation! For some reason, I've been lost in the XHTML era, to a lot of this stuff was new to me.
However, on your 41'th slide (http://dl.dropbox.com/u/39519/talks/html5-foundation/index.html#41) you talk about personalizing your doctype – while it may be cool, your examples will not validate. I know the modern browsers probably do not care, but the public string is supposed to be a "obsolete permitted doctype": http://dev.w3.org/html5/spec-author-view/syntax.html#obsolete-permitted-doctype-string
Isn't this worth mentioning? I went right into my own doctype and wrote something really stupid, but when I later validated my site at w3, it did not understand my weird document type… In your html5boilerplate example, it would validate your document as ✰!!
Thank you for putting this up.
Excellent work!
I tried to follow your spirit of HTML5 Boilerplate in http://fotografie.cc and found myself enjoying to become a better web developper more and more…