You may hear these terms tossed around a lot lately, and quite frequently in the same sentence. But what are HTML5 and CSS3? And what do they mean to me? I’ll tell you how they differ to what is currently used around the web and give you an idea as to how they can impact your user experience.

HTML5 is the newest specification for the HyperText Markup Language, which is what web browsers use to display web pages. HTML5 introduces a lot of new functionality not previously available without Javascript or some other scripting assistance (support for various audio and video formats, drag and drop text, picture rotation and resizing). For developers, it also introduces new sematic and relational tags to allow for greater control of site layout.

CSS3 is the newest specification for Cascading Style Sheets, which are the design-related code that control what web pages look like. While often mentioned in the same breath as HTML5, it is fundamentally different. HTML lays out the content of a web page, CSS controls how it is presented. CSS3 gives developers an extrordinarily detailed level of control over the way content can be presented. CSS3 takes advanced techniques that previously took many lines of code to implement (rounded corners, supporting fonts without image replacement, multi-column layout without using tables, zebra-striping tables, etc…) and simplifies them resulting in code that is shorter and much easier to undertand. CSS3 also introduces functionality that was not previously possible at all with just CSS (rotating elements, pulsing text, gradients and shadows).

While there seem to be many pros to using HTML5 and/or CSS3, there is one big con: browser support. Remember back in the day when IE and Netscape were were so different from each other that they required different code and sites had to put a notice on their front stating “This page is best viewed in…”? Yeah well we’re pretty much back to that again. While browsers have thankfully moved away from proprietary code,  none of the current browser versions support HTML5/CSS3 100% either (tip of the hat to Safari and Chrome for leading the pack and wag of the finger to IE for having almost no support at all).

A popular technique is to create a design that degrades gracefully for browsers that do not support the newer elements (or on the flip side, create an enhanced experience for browsers that do support the newer elements). While this is wishful thinking, it can be increasingly hard to implement without compromising the integrity of the design and the user experience. Because of this, designers need to be conscious of what can/cannot be done with each spec. Web developers have to know this as well and be very cognizant of their target audiences when they build their sites.

As regular users we have to be aware that we may be missing out, not getting the full user experience until we choose to upgrade to the latest browser versions, or for IE users, choose to use another browser entirely (to be fair, Microsoft did say that IE9 would provide much more support for these specs and other versions of IE do support the new specs with the help from the Chrome Frame plug-in). This comes with its own set of complications, specifically application support (will all of your web apps still work?). This is especially the case in corporate america where the desktop environment may be strictly controlled and any change must go through a rigorous review process before it is rolled out to the user.

HTML5 and CSS3 open up a whole new world for designers and developers to go wild, making webpages much more interactive and dynamic than previously static web pages. Here’s a pretty awesome online presentation by Google’s Marcin Wichary (modified by Ernest Delgado) that shows off exactly what HTML5 and CSS3 are capable of. This site is best viewed in Google Chrome.

So what guys do you think? Designers, have you started incorporating any new features into your designs? Devs, have these new specs made your life easier or harder? Are these new specs a [r]evolution for the web experience, or more hype than substance? Inquiring minds want to know!

HTML5:
HTML5 spec
HTML5 differences from HTML4
Chapter 1 from Jeremy Keith’s new book, HTML5 for Web Designers (A Book Apart, 2010)

CSS:
CSS3 spec
Jeff Bridgforth’s CSS3 presentation from Refresh Orlando (04-27-2010) with a ton of great resource links
Introduction to CSS3