CSS3 is Not Freaking HTML5
So, there’s been quite a buzz about HTML5 lately. New semantic elements, native audio and video tags, the canvas element, etc. It’s all good. However, some people seem to have a hard time distinguishing between HTML5 and CSS3. And between HTML5 and jQuery. Not Flash. They know that HTML5 is not Flash.
In this article I’m going to give you a very short overview of the three technologies, to help you know the difference.
CSS3
CSS—or cascading stylesheets—is a specification under development. Many features are already supported by modern browsers such as Safari, Firefox, and Chrome (and soon to come: IE9). Let’s have a glance at the W3C’s (those guys who work on developing standards) description of what CSS is:
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Okay, so it’s got something to do with layout. What can you do with CSS? Well, you can style HTML elements. You can animate them. It’s awesome. But it’s not HTML5! I feel tempted to, once again, quote W3C:
“The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.”
For me, that settles it. In case it doesn’t for you, separation is the keyword here. We’re separating structure (HTML) from presentation (CSS). Structure. And presentation. Not the same. But equally important.
Even though CSS3 is not HTML5, it doesn’t mean that it isn’t cool. You can do all sorts of amazing stuff with CSS3. So many people have created lists of stunning CSS3 effects, and I’m not going to attempt to do it over again, ’cause they’re all really good.
To learn more about CSS3 and what it does, check out CSS3.info.
JavaScript Frameworks
JavaScript frameworks/libraries/whatever are might popular these days. With relatively few lines of code it’s possible to do Ajax interactions, animations, and a bunch of other stuff. Popular frameworks include jQuery, Prototype, and MooTools—and they all share the same thing: it’s JavaScript. And JavaScript is not HTML5.
You can use JavaScript to enable HTML5 elements in older browsers (check out Modernizr), or you can use it to develop incredible web applications. JavaScript is amazing. Being able to do modifications on a website without reloading it is great. But it isn’t HTML5.
HTML5
“HTML is the language for describing the structure of Web pages.”
Yeah, I’m quoting W3C again. HTML5 is an emerging standard to take over HTML 4 and XHTML 1.1. With focus on structural elements and web application features, HTML5 really is going to be the next big thing. Recently, Apple launched their “HTML5” showcase. What’s funny is, that most examples are actually showcasing CSS3 and JavaScript. And as you all might remember—neither CSS3 nor JavaScript is HTML5.
It seems that HTML5 is becoming the generic term for “cool stuff you can do on the Internet”. I feel sorry for HTML5. It deserves to be recognized for what it is, and what it’s good at. As do CSS3. As do JavaScript. This confusion of concept isn’t doing good for anyone. Few years from now I fear my clients saying: “The design is a little bit boring. Maybe if you add some HTML5 effects…”.
So please, help spread the word: CSS3 is not HTML5. Neither is JavaScript.
nitric oxide
January 9, 2011 at 1:43 pmI discovered your weblog site on google and test a few of your early posts. Proceed to keep up the superb operate. I simply additional up your RSS feed to my MSN News Reader. Looking for ahead to studying more from you in a while!?
jojomonkey
October 1, 2010 at 9:56 amFinally getting this article off my read it later, for some weird reason. Can’t help but comment in agreement with last couple commentators. It’s a developers job to know the minute details, otherwise you’re just wasting your breath. It’s also fine to call it all HTML5 for lack of a better word. Furthermore, what site these days doesn’t have HTML4/5, CSS, or JS? Do you expect the future to have less or more coupling? Obviously more. Thus, all the more it is OK to call it in some simple term. Finally, when is Apple always true to the definition or use of words or when is it one to go into exact details about anything just for the sake of confusing an already confused consumer base? In short, life is short, this is a lame argument with all due respect. Cheers.
albert
July 26, 2010 at 9:30 am“CSS3 is not HTML5. Neither is JavaScript.”
HTML5 has JavaScript API’s, so some part of that sentence is off.
As for improperly using technical terms: if you’re not webdev, the heat is off you, odds are that you have no clue what a browser is, even though you use one everyday/all day. With an exception from the example @chris gave: clearly your mechanic is not going to expect you to get technical, but he/she is going to require you to express yourself in a manner in which they can understand. I’m searching for an analogy here but it’s wicked late so; just 3 of those terms Ajax, JavaScript and jQuery, are all so closely related and yet nowhere near the same thing. I’ll apply this in webdev terms then: when I see improper terminology being used, red flags start going up immediately. No, not instant rage or sudden death, just subtle listeners I’m putting out there to see exactly who I’m dealing with. If someone is confusing terminology like that, I know that they don’t have a clue what they’re talking about. Furthermore, when those flags first showed up, I would ignore them…only to find out I was right, practically everytime.
In closing, I clicked on a link earlier today entitled “Ask Me Anything About CSS3″. The first question was regarding jQuery, and I simply stopped reading it. Webcomm is so great, so many people helping out complete strangers, it’s one of the reasons why I love it so much. And while I will sit and talk and teach and learn with anyone from a n00b to TBL, I cannot tell you how many times I’ve stopped what I was doing to help someone “really quick”, only to find out that what they really meant to say was this and/or that. It’s quite frustrating. Or the other avenue, when people hit you up with please help me to my job/homework questions. Like if I were responding to this article in a comment that went something like “Man I love CSS3! Having problems implementing this menu on my site. Can you take a look at it for me?”
As for which one makes me more giddy? CSS3 is near to my heart and soul and I’m totally stoked about it. But the more I delve into HTML5 the closer it grows to my heart too. Seriously gents, take another gander or 20. Anything and everything will be possible.
The future’s so bright, we gotta wear shades.
Cheers.
Chris Corwin
June 13, 2010 at 6:34 pmso, here’s my thing — those of us who get paid to know this stuff, well, it’s on us to know this stuff.
it’s also on us to know how to deal with people who do NOT get paid to know this stuff (they get paid to know other stuff).
when we build websites for human beings who are not web developers, we make the whole process and end product better when we are willing to get over ourselves and not confuse our desire for perfectly semantic markup with perfectly semantic *human communication*.
so our clients confuse “AJAX” with “jQuery” and “jQuery” with “Javascript” and “Web 2.0″ with “AJAX” and “Javascript” with “HTML5″ — let them.
do a good job knowing what they *mean*, and do a good job not being a pedantic knowitall while discussing webstuffs and then do a good job translating their wants and needs into a good website.
can you imagine if your mechanic insisted that you get all the lingo correct when discussing carstuff?
Peter
June 13, 2010 at 6:52 pmHi Chris,
I get your point—and I agree. When clients use terms wrongly I don’t correct them—that would be both rude and stupid.
However, when a large company like Apple use terms wrongly, I think we should correct them. In that way, we can help prevent our clients from even learning the wrong terms.
What is CSS
September 25, 2011 at 8:38 amI see both your points. But sometimes it is helpful to educate a client about something. Not in a ‘hey dummy’ kind of way, but maybe before starting on the project, teaching them specific things.
I know HTML is allowed, is CSS allowed in my comments?
Kevin
June 13, 2010 at 3:10 pmThis is actually a real-world problem. “HTML5″ is supplanted “Web 2.0″ as the litmus test for technological ignorance. Apple has done absolutely zero to help this cause (see my response to their nonsense here: http://graphicpush.com/apple-and-html5-less-than-half-the-story), which just deepens the issue.
Like @Dillon Es, I am far more excited for the adoption of CSS3.
Bill
June 11, 2010 at 2:47 pmAs @brucel said, “It’s html5, Jim, but not as we know it”.
Jon
June 10, 2010 at 10:52 amI feel your pain! HTML5 is the new Web 2.0:
“Please can you make the design a little more Web 2.0?”
Taylor
June 10, 2010 at 4:04 amHow about how AJAX came to describe anything you did with javascript?
Clients ask for AJAX this and AJAX that when really they just want a lightbox, or a div to animate, or form validation, or….
Dillon Es
June 9, 2010 at 6:54 pmWell put haha!
I am actually way more excited for CSS3 to be completed than Html5.