Overview of HTML5
This book is about HTML5 Programming. Before you can understand HTML5 programming, however, you need to take a step back and understand what HTML5 is, a bit of the history behind it, and the differences between HTML 4 and HTML5.
In this chapter, we get right to the practical questions to which everyone wants answers. Why HTML5, and why all the excitement just now? What are the new design principles that make HTML5 truly revolutionary—but also highly accommodating? What are the implications of a plugin-free paradigm; what’s in and what’s out? What’s new in HTML, and how does this kick off a whole new era for web developers? Let’s get to it.
The Story So Far—The History of HTML5
HTML goes back aHTML5history of long way. It was first published as an Internet draft in 1993. The ’90s saw an enormous amount of activity around HTML, with version 2.0, versions 3.2, and 4.0 (in the same year!), and finally, in 1999, version 4.01. In the course of its development, the World Wide Web Consortium (W3C)World Wide Web Consortium (W3C) assumed control of the specification.
After the rapid delivery of these four versions though, HTML was widely considered a dead-end; the focus of web standards shifted to XML and XHTML, and HTML was put on the back burner. In the meantime, HTML refused to die, and the majority of content on the web continued to be served as HTML. To enable new web applications and address HTML’s shortcomings, new features and specifications were needed for HTML.
Wanting to take the web platform to a new level, a small group of people started the Web Hypertext Application Working Group (WHATWG)Web Hypertext Application Working Group (WHATWG) in 2004. They created the HTML5 specification. They also began working on new features specifically geared to web applications—the area they felt was most lacking. It was around this time that the term Web 2.0Web 2.0 was coined. And it really was like a second new web, as static web sites gave way to more dynamic and social sites that required more features—a lot more features.
The W3C became involved with HTML again in 2006 and published the first working draft for HTML5 in 2008, and the XHTML 2 working group stopped in 2009. Another two years passed, and that is where we stand today. Because HTML5 solves very practical problems (as you will see later), browser vendors are feverishly implementing its new features, even though the specification has not been completely locked down. Experimentation by the browsers feeds back into and improves the specification. HTML5 is rapidly evolving to address real and practical improvements to the web platform.
The Myth of 2022 and Why It Doesn’t Matter
The HTML5 specification that we see today has been published as a working draft—it is not yet final. So when does it get cast in stone? Here are the key dates that you need to know. The first is 2012, which is the target date for the candidate recommendationHTML5candidate recommendation date. The second date is 2022, which is the proposed recommendation. Wait! Not so fast! Don’t close this book to set it aside for ten years before you consider what these two dates actually mean.
The first and nearest date is arguably the most important one, because once we reach that stage, HTML5 will be complete. That’s just around the corner. The significance of the proposed recommendation (which we can all agree is a bit distant) is that there will then be two interoperable implementations. In other words, two browsers equipped with completely interoperable implementations of the entire specifications—a lofty goal that actually makes the 2022 deadline seem ambitious. After all, we haven’t even achieved that in HTML4 and only recently for CSS2!
What is important, right now, is that browser vendors are actively adding support for many very cool new features, and some of those are already in the Final Call for comments phase. Depending on your audience, you can start using many of these features today. Sure, any number of minor changes will need to be made down the road, but that’s a small price to pay for enjoying the benefits of living on the cutting edge. Of course, if your audience uses Internet Explorer 6.0, many of the new features won’t work and will require emulation—but that’s still not a good reason to dismiss HTML5. After all, those users, too, will eventually be jumping to a later version. Many of them will probably move to Internet Explorer 9.0 right away, and that version of IE supports many more HTML5 features. In practice, the combination of new browsers and improving emulation techniques means you can use many HTML5 features today or in the very near future.HTML5candidate recommendation date
Who Is Developing HTML5?
We all know that a certain degree of structure is needed, and somebody clearly needs to be in charge of the specification of HTML5. That challenge is the job of three important organizationsHTML5organizations:
- Web Hypertext Application Technology Working Group (WHATWG)Web Hypertext Application Technology Working Group (WHATWG): Founded in 2004 by individuals working for browser vendors Apple, Mozilla, Google, and Opera, WHATWG develops HTML and APIs for web application development and provides open collaboration of browser vendors and other interested parties.
- World Wide Web Consortium (W3C)World Wide Web Consortium (W3C): The W3C contains the HTML working group that is currently charged with delivering their HTML5 specification.
- Internet Engineering Task Force (IETF)Internet Engineering Task Force (IETF): This task force contains the groups responsible for Internet protocols such as HTTP. HTML5 defines a new WebSocket APIWebSocket API that relies on a new WebSocket protocol, which is under development in an IETF working group.
A New Vision
HTML5 is based on various design principles, spelled out in the WHATWG specification, that truly embody a new vision of possibility and practicality.
- Universal access
Compatibility and Paving the Cow PathsHTML5design principles
compatibility and paving, cow paths
Don’t worry; HTML5 is not an upsetting kind of revolution. In fact, one of its core principles is to keep everything working smoothly. If HTML5 features are not supported, the behavior must degrade gracefully. In addition, since there is about 20 years of HTML content out there, supporting all that existing content is important.
A lot of effort has been put into researching common behavior. For example, Google analyzed millions of pages to discover the common ID and
Class names for
DIV tags and found a huge amount of repetition. For example, many people used
DIV id="header" to mark up header content. HTML5 is all about solving real problems, right? So why not simply create a
Although some features of the HTML5 standard are quite revolutionary, the name of the game is evolution not revolution. After all, why reinvent the wheel? (Or, if you must, then at least make a better one!)
Utility and the Priority of ConstituenciesHTML5design principles
utility and the priority of constituencies
The HTML5 specification is written based upon a definite Priority of ConstituenciesPriority of Constituencies. And as priorities go, “the user is king.” This means, when in doubt, the specification values users over authors, over implementers (browsers), over specifiers (W3C/WHATWG), and over theoretical purity. As a result, HTML5 is overwhelmingly practical, though in some cases, less than perfect.
Consider this example. The following code snippets are all equally valid in HTML5:
id="prohtml5" id=prohtml5 ID="prohtml5"
Sure, some will object to this relaxed syntax, but the bottom line is that the end user doesn’t really care. We’re not suggesting that you start writing sloppy code, but ultimately, it’s the end user who suffers when any of the preceding examples generates errors and doesn’t render the rest of the page.
Priority of ConstituenciesHTML5 has also spawned the creation of XHTML5 to enable XML tool chains to generate valid HTML5 code. The serializations of the HTML or the XHTML version should produce the same DOM trees with minimal differences. Obviously, the XHTML syntax is a lot stricter, and the code in the last two examples would not be valid.HTML5design principles
security by Design
A lot of emphasis has been given to making HTML5 secure right out of the starting gate. Each part of the specification has sections on security considerations, and security has been considered up front. HTML5 introduces a new origin-based security model that is not only easy to use but is also used consistently by different APIs. This security model allows us to do things in ways that used to be impossible. For example, it allows us to communicate securely across domains without having to revert to all kinds of clever, creative, but ultimately Non-secure hacks. In that respect, we definitely will not be looking back to the good old days.
Separation of Presentation and ContentHTML5design principles
presentation and content separation
HTML5 takes a giant step toward the clean separation of presentation and content. HTML5 strives to create this separation wherever possible, and it does so using CSS. In fact, most of the presentational features of earlier versions of HTML are no longer supported, but will still work, thanks to the compatibility design principle mentioned earlier. This idea is not entirely new, though; it was already in the works in HTML4 Transitional and XHTML1.1. Web designers have been using this as a best practice for a long time, but now, it is even more important to cleanly separate the two. The problems with presentational markup are:
- Poor accessibility
- Unnecessary complexity (it’s harder to read your code with all the inline styling)
- Larger document size (due to repetition of style content), which translates into slower-loading pages
Interoperability SimplificationHTML5design principles
HTML5 is all about simplification and avoiding needless complexity. The HTML5 mantra? “Simple is better. Simplify wherever possible.” Here are some examples of this:
- A new, simplified
- A new, simplified character set declaration
- Powerful yet simple HTML5 APIs
We’ll say more about some of these later.
To achieve all this simplicity, the specification has become much bigger, because it needs to be much more precise—far more precise, in fact, than any previous version of the HTML specification. It specifies a legion of well-defined behaviors in an effort to achieve true browser interoperability by 2022. Vagueness simply will not make that happen.
The HTML5 specification is also more detailed than previous ones to prevent misinterpretation. It aims to define things thoroughly, especially web applications. Small wonder, then, that the specification is over 900 pages long!
HTML5 is also designed to handle errors well, with a variety of improved and ambitious error-handling plans. Quite practically, it prefers graceful error recovery to hard failure, again giving A-1 top priority to the interest of the end user. For example, errors in documents will not result in catastrophic failures in which pages do not display. Instead, error recovery is precisely defined so browsers can display “broken” markup in a standard way.HTML5design principles
Universal AccessHTML5design principles
This principle is divided into three concepts:
- Accessibility: To support users with disabilities, HTML5 works closely with a related standard called Web Accessibility Initiative (WAI)Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA)Accessible Rich Internet Applications (ARIA). WAI-ARIA roles, which are supported by screen readers, can be already be added to your HTML elements.
- Media Independence: HTML5 functionality should work across all different devices and platforms if at all possible.
- Support for all world languages: For example, the new
<ruby>element supports the Ruby annotations that are used in East Asian typography.
A Plugin–Free Paradigm
HTML5 provides native support for many features that used to be possible only with plugins or complex hacks (a native drawing API, native video, native sockets, and so on).
Plugins, of course, present many problemsHTML5plugin–free paradigm
- Plugins cannot always be installed.
- Plugins can be disabled or blocked (for example, the Apple iPad does not ship with a Flash plugin).
- Plugins are a separate attack vector.
- Plugins are difficult to integrate with the rest of an HTML document (because of plugin boundaries, clipping, and transparency issues).HTML5plugin–free paradigm
Although some plugins have high install rates (Adobe Flash, for example), they are often blocked in controlled corporate environments. In addition, some users choose to disable these plugins due to the unwelcome advertising displays that they empower. However, if users disable your plugin, they also disable the very program you’re relying on to display your content.
Plugins also often have difficulty integrating their displays with the rest of the browser content, which causes clipping or transparency issues with certain site designs. Because plugins use a self-contained rendering model that is different from that of the base web page, developers face difficulties if pop-up menus or other visual elements need to cross the plugin boundaries on a page. This is where HTML5 comes on the scene, smiles, and waves its magic wand of native functionalityHTML5plugin–free paradigm
Take the new canvas element, for example. It enables us to do some pretty fundamental things that were not possible before (try drawing a diagonal line in a web page in HTML 4). However, what’s most interesting is the power that we can unlock with the APIs and the styling we can apply with just a few lines of CSS code. Like well-behaved children, the HTML5 elements also play nicely together. For example, you can grab a frame from a video element and display it on a canvas, and the user can just click the canvas to play back the video from the frame you just showed. This is just one example of what a native code has to offer over a plugin. In fact, virtually everything becomes easier when you’re not working with a black box. What this all adds up to is a truly powerful new medium, which is why we decided to write a book about HTML5 programming, and not just about the new elements!
What’s In and What’s Out?
So, what really is part of HTML5? If you read the specification carefully, you might not find all of the features we describe in this book. For example, you will not find Geolocation and Web Workers in there. So are we just making this stuff up? Is it all hype? No, not at all!
Many pieces of the HTML5 effort were originally part of the HTML5 specificationHTML5plugin–free paradigm
Experts in specific areas can come together on mailing lists to discuss a given feature without the crossfire of too much chatter. The industry still refers to the original set of features, including Geolocation, and so on as HTML5. Think of HTML5, then, as an umbrella term that covers the core markup, as well as many cool new APIs. At the time of this writing, these featuresHTML5plugin–free paradigm
- Canvas (2D and 3D)
- Cross-document messaging
- Audio and Video
- Server-Sent events
- Scalable Vector Graphics (SVG)
- WebSocket API and protocol
- Web origin concept
- Web storage
- Indexed database
- Application Cache (Offline Web Apps)
- Web Workers
- Drag and Drop
- XMLHttpRequest Level 2
As you can see, a lot of the APIs we cover in this book are on this list. How did we choose which APIsHTML5plugin–free paradigm
As far as browser support goes, there are some excellent online resources that you can use to check current (and future) browser support. The site
www.caniuse.com provides an exhaustive list of features and browser support broken down by browser version and the site
www.html5test.com checks the support for HTML5 features in the browser you use to access it.
What’s New in HTML5?
Before we start programming HTML.5, let’s take a quick look at what’s new in HTML5.
New DOCTYPE and Character SetHTML5DOCTYPE and character set
First of all, the
DOCTYPEDOCTYPE for web pages has been greatly simplified. Compare, for example, the following HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"↵ "http://www.w3.org/TR/html4/loose.dtd">
Who could ever remember any of these? We certainly couldn’t. We would always just copy and paste some lengthy
DOCTYPE into the page, always with a worry in the back of our minds, “Are you absolutely sure you pasted the right one?” HTML5 neatly solves this problem as follows:
Now that’s a
DOCTYPE you might just remember. Like the new
DOCTYPE, the character setCharacter set declaration has also been abbreviated. It used to be
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Now, it is:
<meta charset="utf-8" >
You can even leave off the quotation marks around “utf-8” if you want to. Using the new
DOCTYPE triggers the browser to display pages in standards mode. For example, Figure 1-1 shows the information you will see if you open an HTML5 page in Firefox, and you click Tools ä Page Info. In this example, the page is rendered in standards mode.
When you use the new HTML5
DOCTYPEDOCTYPE, it triggers browsers to render the page in standards-compliant mode. As you may know, Web pages can have different rendering modes, such as QuirksQuirks mode, Almost StandardsAlmost Standards mode, and Standards (or no-quirks) modeStandards (or no-quirks) mode. The
DOCTYPE indicates to the browser which mode to use and what rules are used to validate your pages. In Quirks mode, browsers try to avoid breaking pages and render them even if they are not entirely valid. HTML5 introduces new elements and has marked others as obsolete (more on this in the next section). If you use these obsolete elements, your page will not be valid. However, browsers will continue to render them as they used to.HTML5DOCTYPE and character set
New and Deprecated Elements
HTML5 introduces many new markup elementsHTML5markup elements, which it groups into seven different content types. These are shown below in Table 1-1.
|Embedded||ContentEmbedded content type that imports other resources into the document, for example audio, video, canvas, and iframe|
|FlowF||Elements used in the body of documents and applications, for example form, h1, and small|
|Heading||Section headers, for example h1, h2, and hgroup|
|Interactive||Content that users interact with, for example audio or video controls, button, and textarea|
|Metadata||Elements—commonly found in the head section— that set up the presentation or behavior of the rest of the document, for example script, style, and title|
|Phrasing||Text and text markup elements, for example mark, kbd, sub, and sup|
|Sectioning||Elements that define sections in the document, for example article, aside, and title|
Most of these elements can be styled with CSS. In addition, some of them, such as
video, can be used by themselves, though they are accompanied by APIs that allow for fine-grained native programmatic control. These APIs will be discussed in much more detail later in this book.
It is beyond the scope of this book to discuss all these new elements, but most of the sectioning elements (discussed in the next section) are new. The
video elements are also new in HTML5.
Likewise, we’re not going to provide an exhaustive list of all the deprecated tags (there are many good online resources online for this), but many of the elements that performed inline styling have been marked as obsolete in favor of using CSS, such as
One content type that contains many new HTML5 elements is the sectioning content typeHTML5semantic markup
As we said before, HTML5 is all about paving the cow paths. Google and Opera millions of pages to discover the common ID names for
DIV tags and found a huge amount of repetition. For example, since many people used
DIV id="footer" to mark up footer content, HTML5 provides a set of new sectioning elements that you can use in modern browsers right now. Table 1-2 shows the different semantic markup elements.
|header||Header content (for a page or a section of the page)|
|footer||Footer content (for a page or a section of the page)|
|section||A section in a web page|
|article||Independent article content|
|aside||Related content or pull quotes|
All of these elements can be styled with CSS. In fact, as we described in the utility design principle earlier, HTML5 pushes the separation of content and presentation, so you have to style your page using CSS styles in HTML5. Listing 1-1 shows what an HTML5 pageHTML5semantic markup
DOCTYPE, character set, and semantic markup elements—in short, the new sectioning content. The code file (
sample.html) is available in the
Without styles, the page would be pretty dull to look at. Listing 1-2 shows some of the CSS code that can be used to style the content. The code file (
html5.css) is available in the
code/intro folder. This style sheet uses some of the new CSS3 featuresHTML5semantic markup
border-radius) and rotate transformations (
transform: rotate();). CSS3—just like HTML5 itself—is still under development, and it is modularized with subspecifications for easier browser uptake (for example, transformation, animation, and transition are all areas that are in separate subspecifications).
Experimental CSS3 featuresHTML5semantic markup
-moz- (for Mozilla),
o- (for Opera),
-webkit- (for WebKit-based browsers such as Safari and Chrome), and
-ms- (for Internet Explorer) in your declarations.
HTML5semantic markupCSS3 features, HTML5 pageFigure 1-2 HTML5semantic markupshows an example of the page in Listing 1-1, styled with CSS (and some CSS3) styles. Keep in mind, however, that there is no such thing as a typical HTML5 page. Anything goes, really, and this example uses many of the new tags mainly for purposes of demonstration.
One last thing to keep in mind is that browsers may seem to render things as if they actually understand these new elements. The truth is, however, that these elements could have been renamed
bar and then styled, and they would have been rendered the same way (but of course, they would not have any benefits in search engine optimization). The one exception to this is Internet ExplorerHTML5semantic markupInternet Explorer, which requires that elements be part of the DOM. So, if you want to see these elements in IE, you must programmatically insert them into the DOM and display them as block elements. A handy script that does that for you is html5shiv (http://code.google.com/p/html5shiv/).
Simplifying Selection Using the Selectors API
Along with the new semantic elements, HTML5 also introduces new simple ways to find elements in your page DOM. HTML5API selector
|getElementById()||Returns the element with the specified id attribute value||<div id="foo"> getElementById("foo");|
|getElementsByName()||Returns all elements whose name attribute has the specified value||<input type="text" name="foo">getElementsByName("foo");|
|getElementsByTagName()||Return all elements whose tag name matches the specified value||<input type="text">getElementsByTagName("input");|
With the new Selectors API, there are now more precise ways to specify which elements you would like to retrieve without resorting to looping and iterating through a document using standard DOM. The Selectors API exposes the same selector rules present in CSS as a means to find one or more elements in the page. For example, CSS already has handy rules for selecting elements based on their nesting, sibling, and child patterns. The most recent versions of CSS add support for more pseudo-classes—for example, whether an object is enabled, disabled, or checked—and just about any combination of properties and hierarchy you could imagine. To select elements in your DOM using CSS rules, simply utilize one of the functions shown in Table 1-4.
|querySelector()||Return the first element in the page which matches the specified selector rules(s)||document.querySelector("input.error");||Return the first input field with a style class of “error”|
|querySelectorAll()||Returns all elements which match the specified rule or rules||document.querySelectorAll("#results td");||Return any table cells inside the element with id results|
// select the first element in the document with the // style class highClass or the style class lowClass var x = document.querySelector(“.highClass”, “.lowClass”);
In the case of
querySelector(), the first element that matches either rule is selected. In the case of
querySelectorAll(), any element matching any of the listed rules is returned. Multiple rules are comma-separated.
The new Selector API makes it easy to select sections of the document that were painful to track before. Assume, for example, that you wanted the ability to find whichever cell of a table currently had the mouse hovering over it. Listing 1-3 shows how this is trivially easy with a selector. The example files for this (
querySelectorAll.html) are located in the
As you can see from this example, finding the element a user is hovering over is a one-line exercise using:
var hovered = document.querySelector("td:hover");HTML5API selector
It should not be too surprising to find that the formal specificationHTML5API selector
Similar functionality can now be found in all the other browsers’ built-in development tools: Safari’s Web Inspector, Google’s Chrome Developer Tools, Internet Explorer’s Developer Tools, and Opera’s Dragonfly. Figure 1-3 shows the Google Chrome Developer Tools (use the shortcut key CTRL + Shift + J on Windows or Command + Option + J on Mac to access this) that provide a wealth of information about your web pages; these include a debugging console, an elements View, a resource view, and a script view, to name just a few.
Many of the debugging tools offer a way to set breakpoints to halt code execution and analyze the state of the program and the current state of the variables. The
console.log is much better than making a call to
parse()parse() function and
stringify()stringify() function (meaning serialize or convert to string).
window.JSON, and you can expect to see quite a lot of JSON used in HTML5 applications.HTML5window.JSON
DOM Level 3HTML5DOM Level 3
One of the most maligned parts of web application development has been event handling. While most browsers support standard APIs for events and elements, Internet Explorer differs. Early on, Internet Explorer implemented an event model that differed from the eventual standard. Internet Explorer 9 (IE9) now supports DOM Level 2 and 3 features, so you can finally use the same code for DOM manipulation and event handling in all HTML5 browsers. This includes the ever-important
addEventListener()addEventListener() method and
dispatchEvent() methodsdispatchEvent() method.
Monkeys, Squirrelfish, and Other Speedy Oddities
The action pretty much began when Adobe donated its just-in-time (JIT) compilation engineJust-in-time (JIT) compilation engine and virtual machine for ECMAScript—code named Tamarin—to the Mozilla project in 2006. Although only pieces of the Tamarin technologyTamarin technology remain in the latest versions of Mozilla, the donation of Tamarin helped spawn new scripting engines in each of the browsers, with names that are just as intriguing as the performance they claim.
|Apple Safari||Nitro (otherwise know as SquirrelFish Extreme)||Released in Safari 4 and refined in version 5, it introduces byte code optimizations and a context-threaded native compiler.|
|Google Chrome||V8||Since Chrome 2, it uses generational garbage collection for high memory scalability without interruptions.|
|Microsoft Internet Explorer||Chakra||Introduced in IE 9, Chakra focuses on background compilation and an efficient type system and demonstrates a tenfold improvement over IE8.|
|Mozilla Firefox||JägerMonkey||Refined from version 3.5, this combines fast interpretation with native compilation from trace trees.|
|Opera||Carakan||This one uses register-based byte code and selective native compilation and claims improvements of 75% on version 10.50.|
In this chapter, we have given you a general overview of the essentials of HTML5.
We charted the history of its development and some of the important dates coming up. We also outlined the four new design principles behind the HTML5 era that is now dawning: compatibility, utility, interoperability, and universal access. Each one of these principles opens the door to a world of possibilities and closes the door on a host of practices and conventions that are now rendered obsolete. We then introduced HTML5’s startling new plugin-free paradigm, and we reviewedChapter 1, Overview of HTML5HTML5overview end what’s new in HTML5, such as a new
In the next chapter, we’ll begin by exploring the programming side of HTML5, starting with the Canvas API.