10things_792_334

If you missed our heavily-attended O’Reilly Webcast on December 2nd, no worries, because the presentation is now available online. In addition, you’ll find a cliff notes version below:

1. HTML5 Markup isn’t such a big deal.

To understand this statement you need to first understand what HTML5 is. Is it just an incremental update to HTML4.01? Or is it something new and completely different (you might think so with all the hype around it)? The answer is really a bit of both. HTML5 does include many simplifications and additions to HTML markup, and so it is fair to call markup an incremental update (although it does have a few big additions like <video> and <canvas>). But, HTML5 also can be thought of as a family of technologies that include a whole set of new JavaScript APIs that interoperate with HTML5 markup. Let’s also not forget CSS3, which brings some powerful new styling and animation techniques to HTML5.

Check out the presentation to see some of the new markup included in HTML5. If you’re already up to speed on the markup in HTML4, most of the new markup will be fairly easy for you to get under your belt.

2. The power of HTML5 is JavaScript.

While we’ve all been hearing “HTML5 HTML5 HTML5”, the real unsung hero of HTML5 is JavaScript and the new set of HTML5 compatible APIs. With these APIs you can now incorporate geolocation, a drawable canvas, custom video experiences, drag and drop, large amounts of local storage and even multithreaded JavaScript into your web pages (more like apps these days), and that’s just naming a few of the APIs.

JavaScript has developed a bit of a bad rap as a scripting language over the years, when in fact it’s a sophisticated and powerful language. Today, it’s also a fast language, having seen 100x speed improvement over the last decade (with more coming). Sure, it has a few warts here and there, but these are easy to work around if you know about them. And, JavaScript is an easy language to get started with. We devote four chapters of our new book Head First HTML5 Programming to getting you up to speed on JavaScript.

So, If you want to make the most out of HTML5, you’ll need to learn JavaScript.

3. It’s not which standards document an API comes from that is important.

As we wrote Head First HTML5 Programming we commonly heard things like “Oh, geolocation is not part of the official HTML5 spec!” True enough. But it is an official spec of the W3C, and you know what, it doesn’t matter. Here is what matters: does every modern browser implement and support geolocation? That’s what we care about.

Sure, there is a time and place to be precise about specification relationships, but when we’re writing code, the important thing is “Will it be there for my users?”

4. How to know if you should embrace HTML5 now.

Check out the presentation for a simple flow chart to guide you. But for now it goes like this: If your users are using mobile devices, you should be thinking about using HTML5 today, as HTML5 browsers are common and heavily used on today’s smartphones and tablets.

If your audience is desktop based and uses largely modern browsers, you’re also good to go and should be looking into HTML5. However if your audience uses older versions of IE, you’ll need to be cautious.

In any case you always want to make sure you’re using feature detection (see below) and are up to date on which browsers support which features. Fortunately, there are a number of great resources for getting information about browser support for HTML5. A few of our favorites include:

And of course, you should always test your web pages and applications in every browser you can!

5. Make it easy on yourself: graceful degradation and feature detection.

There are many ways to detect the features of HTML5 using JavaScript, from attempting to create an object to see if it’s supported, to checking to see if various window properties exist, to using custom methods like the <video> element API’s canPlayType method.

Needless to say, it’s important to check for new features so you can offer a fallback experience for users whose browsers don’t support that feature (e.g. an image or flash video instead of HTML5 video, an image or embedded Flash object instead of canvas, or even just a message indicating why the user might not be seeing what they expect and why). But with so many different ways of checking support for different features, you might be wondering if there isn’t a better way?

There is. The Modernizr JavaScript library is a popular open-source library that you can use to make it much easier to check for HTML5 and CSS3 features and load appropriate resources, such as different JavaScript files, CSS files, images, and so on, depending on support.

Check out the presentation for more concrete examples.

6. The <video> tag is the easy part; what about encodings?

If you’ve heard one thing about HTML5, it’s probably that it has a <video> element. And it’s true, by adding a <video&gt element to your HTML you can easily play video in your page without a plug-in. This is made possible by the folks writing the browsers, because they all agree on what the <video> element looks like. But when it comes to video formats, unfortunately, there is little agreement. Today, there are three different container formats, WebM, MP4 and Ogg, and which one you need depends on which browsers your users are using. If you’re delivering content to a narrow audience, say, users of the iPad, then your job is easy: you need only to deliver one format, MP4. If you want to support all popular browsers, then you need all three formats.

How? You’ll have to arrange to have the encodings done, and in the markup you can use the <video> element with the <source> element and provide multiple video files. To have more flexibility in creating a fallback if none of these types is recognized, you need to use JavaScript.

So, while getting a video into your web page is easier than ever before, making sure you’ve got a video that your users can actually play is still a bit of a mess.

7. The <canvas> is for more than just drawing.

The <canvas> element adds a native 2D drawing area to HTML.  At first glance, you might think <canvas> is best for creating simple drawing programs using lines, arcs, and rectangles, but you’d be short-changing yourself if you stop there.

In fact, if you have a look at the canvas demos on the web, you’ll see that it’s being used for everything from basic drawings, to fully interactive drawing applications, creating graphs, making animations, building games, and even rendering 3D scenes.

One interesting use for <canvas> is video processing. You can take video frames from the video player, process the frame data, and then write the data into a canvas for display. For instance, you might take green screen capture video, and add a background in real-time using this technique.  Similarly, you can use a canvas for double buffering image in games.

So, don’t overlook the <canvas>; it’s a powerful new feature of HTML5 that can be used for all kinds of graphics-related applications, and the JavaScript engines in modern browsers are now fast enough to handle the load that graphics and video processing require.

8. Some of the common JavaScript-based idoms for animation and effects are now supported by CSS3.

CSS has come along way from the early days, and with CSS3, we now have powerful features that you can use to create effects in your web pages that you once could do only with JavaScript.

For instance, used to be if you wanted an element to fade in and out on a mouse hover, you’d have to write some fairly complex JavaScript code or use a UI library like jQuery or scriptaculous. These libraries have by no means been replaced by CSS3, but there are a few things you can do now with no code at all.

The transition and transform properties are two new properties in CSS3 that let you create interesting effects and animations. For instance, you can create a fading effect by transitioning the opacity of an element. You can manipulate elements with transform functions like rotate and scale, and when you combine a transform with a transition, create some pretty cool animations.

In the presentation, we show two simple examples of using transition and transform.

9. JSON is the new king of content formats.

In 2004 XML was going to rule the world, however things didn’t quite work out that way.
These days, many developers are using JSON instead of XML. JSON, or “JavaScript Object Notation”, allows you to use the same format for your code and your serialized objects. You also get fast parsing for free from the browser when you retrieve remote JSON data. Every browser has a built-in JSON object with two methods: stringify, used to create a JSON string from a JavaScript object, and parse, used to create a JavaScript object from a JSON string.

Today JSON is widely supported across web service APIs, like Twitter and Facebook. And, because of the cross-domain restrictions with XHR, many web services are implementing JSONP, or JSON with Padding. While “JSON with Padding” isn’t the most insightful name, JSONP is a convention for implementing a callback into your own JavaScript code. It’s a simple concept but a little hard to get your head around. Check out Head First HTML5 Programming where we break it all down for you.

10. XHTML is dead, long live XHTML.

XHTML long ago lost its front-runner status  as the language of the web, with the death of XHTML2 and the rise of HTML5, but  despite rumors that doesn’t mean you can’t use XHTML; in fact we call it XHMTL5.

Remember that the difference between HTML and XHTML is that XHTML is proper XML. That means when you write XHTML you use strict XML syntax, and when you serve XHTML you have to use the XML mime type. The benefit of XHTML is that it is extensible (because it is XML) while HTML is not. The downside is that XHTML is strict, doesn’t play as well with other languages (like CSS and JavaScript) and wasn’t designed for building web applications.

So, to write XHTML5 today, add a namespace and use proper XML syntax (see the presentation for an example).

Don't miss out!

Don't miss out on brain-friendly WickedlySmart updates early access to books and general cool stuff! Just give us your email and we'll send you something about once a week. 

You have Successfully Subscribed!