JavaScript in Action : an HTML5 primer

JavaScript in Action : an HTML5 primer

As I write this web-site with 2012 almost upon us, HTML5 is a curious beast. It’s been around in some form or another for a couple of years now, but it wasn’t that long ago that the XHTML 2.0 progress was halted, which made HTML5 the de facto next standard for Web development.

Still, HTML5 hasn’t been formally standardized and released, which means that the final implementation of HTML5, whenever that comes out, will undoubtedly be different than the HTML5 being discussed today. Normally, with something as ubiquitous and varied as a Web browser, one would be wise to steer clear of such a novelty. But there are ways you can have the best of both worlds: use some HTML5 features, without wrecking the user experience. Let’s first look at a generic HTML5 template, and then learn about the best new HTML5 form elements.

TIP: HTML5 is not just an individual standard, but rather a name given to the htMl standard plus a collection of other new features.

An HTML5 template

This next code block shows the HTML5 template that I’ll use as the basis of all the HTML scripts in this web-site. Take a look at it, and then I’ll explain its particulars in detail.

To start on line 1, as already stated, the simple HTML5 DOCTYPE will put the browser in Standards mode, which is the first desired goal. Next, you have your html element, with head and body elements within that. Oddly, HTML5 does not require the head element, but it creeps me out not to use it. HTML5 does still need a title tag, whether or not you use head. You should also be in the habit of indicating the encoding (i.e., the character set in use). As you can see, that meta tag has been simplified, too (line 4). If you’re unfamiliar with character sets and encoding, you should research the topic, but utf-8 is the normal value used here, as UTF8 encoding supports every character in every language. Also, as you can see, I’ve added the lang attribute to the opening html tag (line 2), although it’s not required, either.

NOTE: the encoding must be indicated early in the document, so always place it after the opening head tag and before the title element.

That’s the basic syntax of an HTML5 document. In the next section of the chapter, I’ll highlight the main reason I’m using HTML5 for this web-site: the bevy of new and very useful form elements. But quickly, two more things about the HTML5 template. First, if you’re going to use an external style sheet, as many examples in this web-site will, the correct syntax is:

You may notice that the link element in HTML5 doesn’t use the type attribute as it’s just assumed that this type will be text/css when the rel attribute has a value of stylesheet. Second, HTML5 defines many new semantic elements, such as article, footer, header, nav, and section. The creation of these tags was determined by mining the Web for the most common ID and class elements found. For example, in HTML4, many designers used a div with an ID of header for representing the top section of the page; then CSS would style and position the div accordingly. In HTML5, you’d just create a header element, and style it.

Most older browsers, which cannot handle HTML5, won’t have a problem when they encounter these new HTML tags and can still apply styling correctly. Unfortunately, Internet Explorer versions prior to 9 are not capable of styling unknown elements, meaning that any user running IE8 or earlier won’t see the properly formatted document. The solution is a clever piece of JavaScript called the “HTML5 shiv,” created by a series of very smart people. The code works by having JavaScript generate elements of the new types, which has the effect of making Internet Explorer recognize, and therefore style them, appropriately. The HTML5 shiv library has been open sourced and is now hosted on Google Code. To incorporate it, use this code:

This block begins and ends with conditional comments, only supported in Internet Explorer. The specific conditional checks to see if the current browser version is less than (lt) IE9. If so, then the script tag will be added to the page automatically. Because these are conditional comments, only meaningful to IE, other browsers will not attempt to load this script. You may have noticed that this script tag, like the link tag, also does not use a type attribute, as text/JavaScript is assumed. In Chapter 3, Tools of the Trade, I’ll list some HTML validators, but I’ll also note here that you can validate HTML5 at [html5-validator dot nu] or using the standard W3C validator. At the time of this writing, both are considered experimental, but then again, HTML5 is borderline experimental, too!

NOTE: very few of the web-site’s examples will use the newer elements that warrant the inclusion of the htMl5 shiv, but i will use this template consistently, including the shiv, regardless.