HTML5 basics

Although the HTML 5.0 draft specification is not scheduled to become a standard until 2014, it is already a technology that is seeing wide adoption and creative use across the Internet. New ways to visualize, consume, and engage with information and media are made possible with this natural evolution of the HTML language. HTML5 is a versatile tool that can be used to accomplish tasks and present information throughout the Internet, consumable via numerous form factors and desktop and mobile devices alike.

This article provides an overview of HTML5—what it is and is not, why you should care about it, and how it may benefit you and change the way you will build web applications—and lists several resources that you can use to dive deeper into HTML5.

Like many people, you might still be wondering what HTML5 is exactly.

In the strictest sense, HTML is a text-based markup language used to format information that is often disseminated via the Internet. At a high level, HTML is a language that is used to structure and present text and images within a user interface. HTML5 is an augmentation of the current HTML 4.01 specification that adds new features that designers and developers will be able to use when creating their own content.

Some of the most notable changes in HTML5 are the addition of tags to support multimedia elements and dynamic graphics. This includes the <audio> tag for playing sound, the <video> tag for video playback, and the <canvas> tag for dynamic graphics, all within the web browser, and without reliance upon external software. The new multimedia elements enable modern browsers to provide a rich experience and dynamic graphics from the HTML code. Whether using video, image manipulation, or data visualization, support for these elements enables designers and developers to create rich and engaging experiences that (the drivers behind HTML5 hope) will work reliably across all platforms.

In addition to multimedia, HTML5 introduces the ability for SVG and MathML vector graphics to be linked to or embedded inline within HTML content. The inclusion of vector graphics into the HTML language enables designers and developers to include complex vector-based imagery without the need for images, and again without reliance upon third-party platforms. Not only does this allow for all content to be in a single HTML file, but it also gives you the capability to interact with SVG content through JavaScript. Interacting with vector content could be as simple as changing shape colors or as complex as animating shapes, adding user interaction to vector graphics, or even creating vector graphics dynamically at runtime.

HTML5 also introduces new types of form input elements. These new element types allow you to simply specify an input type and rely upon the browser and native methods to handle the input, validation, and formatting of information that is entered. The new input types include telephone number, email, URL, date, time, color, and various numerical formats and their different permutations. Each browser, device, and operating system has its own paradigm for input and user interaction. The new HTML5 form elements enable more robust data capture for HTML documents, which will stay within the native paradigm, and without the need or maintenance required for custom JavaScript libraries.

Another capability that HTML5 brings to the table is the introduction of semantic markup tags. Semantic tags allow you to structure your HTML content so that the document structure provides semantics, or meaning, to the content. This includes the <article> , <section> , <header> , <footer> , <aside> , <nav> , and <figure> tags, which are used to create self-describing HTML documents. These allow you to denote which parts of the HTML document are for navigation, which are for layout, and which pieces of the document contain meaningful or related content. The new semantic tags enable a higher level of organization within a given HTML document, and can be used to create content that is more easily read by search engines, aggregators, or other content-consuming applications, thus further facilitating device-to-device communication, consumption of content, and information dissemination.

In addition to these features, HTML5 introduces a simpler DOCTYPE tag/syntax than previous iterations of HTML. The HTML doctype has been drastically simplified, and valid HTML5 documents are essentially valid XML structures. Previous iterations of HTML were based upon SGML (Standard Generalized Markup Language), which requires specific Document Type Definitions (DTDs) to validate proper document structure. With HTML5, content is XML based and must follow valid XML formatting rules. Even though HTML5 content doesn't require a DTD, the simpler <!DOCTYPE HTML> must be required to ensure that browsers behave appropriately.

While technically being a markup language, HTML5 also encompasses several new DOM APIs, which are exposed by browsers in their JavaScript DOM implementation. With the new multimedia tags new APIs are available for consuming and interacting with multimedia content. This includes playback controls for audio and video, as well as an API for programmatically manipulating the visual content within a <canvas> element. In addition to multimedia, HTML5 also introduces several new JavaScript APIs that support offline applications, native drag-and-drop, user-editable content, enhanced browser history integration, and even the ability to register file types with a web application.

Although this isn't an exhaustive list of the changes coming with HTML5, it should give you an idea of what will be possible with the new standard. For full details of the latest changes regarding HTML5, be sure to check out the W3C published spec and changes from HTML4 online or browse the full HTML5 spec online.

When talking about HTML5, it is equally important to differentiate what is not part of the HTML5 spec proper. Over the course of time, the media has generally lumped together aspects of CSS3 such as animations, transitions, transformations, gradients and web fonts, as well as new JavaScript APIs for enhanced browser capabilities, such as geolocation, under the singular term "HTML5." The HTML5 spec does not encompass all of these terms and technologies; however, they are closely related to all modern browsers and are paramount in delivering a richer user experience, so they are easily confused. CSS3 refers to Cascading Style Sheets revision 3, and is a language for defining the presentation of content. CSS3 defines how things look and can be used in conjunction with HTML5-structured content, where HTML5 defines how the content is actually structured. With the new JavaScript APIs, if they are not included in the HTML5 standard, they are in fact "just APIs." These APIs are interfaces to expose advanced functionality via JavaScript, which are accessible to HTML5-based web applications and are an integral part of web development. However, these APIs are not technically part of the HTML5 spec.

In summary, the following technologies are often listed in the context of HTML5, although they are not part of the HTML5 spec: WebGL, FileReader, querySelector(All), Geolocation, CSS3, Web Workers, Web Sockets, and Faster JavaScript.

In general, HTML5 is an evolution of the HTML language that is intended to bring richer, standards-based content to the web and the multidevice world. It is intended to simplify some of the complexities and structure of the current HTML 4.01 spec; enable easier creation and consumption of rich media, dynamic graphics, and complex user interfaces; and foster an environment where you can rely upon a consistent experience on all browsers and devices that support HTML5 capabilities. In essence, HTML5 promises to change the premise that HTML is just for static textual content. Web development paradigms are changing and HTML5 promises to become a platform for web programming, not just a markup language.

HTML5 tags can be used on the web today, and they are backwards compatible so that existing HTML 4-based content will not break new HTML5 content. All of the HTML structure and formatting knowledge that you may already possess is not lost; developing with HTML5 follows the same rules. If specific features of HTML5 aren't supported on your target platform, you can use JavaScript to detect these missing features and provide fallback solutions.

All of the latest major desktop browsers support HTML5 features in some fashion (although not all support HTML5 equally), and all of the leading smart phone and tablet devices support it as well. HTML5 can be a compelling solution for multidevice and multiscreen applications because of its already broad support. Not only is HTML5 an option for developing rich experiences in the browser, several desktop and tablet application vendors provide software development kits (SDKs) specifically targeting native application development purely using HTML5 syntax and structure.

Although HTML5 is not yet standardized, it can be used today. HTML5 is actively maturing, and is already a viable technology solution. Apple iOS, Android, BlackBerry 6, and HP/Palm WebOS devices all support HTML5 features, as do all of the latest desktop browser engines (Safari, Chrome, Opera, Internet Explorer). Currently, not all browsers have equal support of HTML5 features, so actual usage should be determined by your target users, platforms, and devices.

Discounting the relevance of HTML5 at this point would be a mistake. HTML5 can be a useful addition to your toolbox as a web developer. As technologies evolve so do the form and structure of how those technologies are implemented. HTML5 is intended to be future-proof. HTML documents created using the HTML5 doctype must follow XML/XHTML parsing rules and will be valid structures that should work indefinitely into the future, even as the language continues to evolve.

In addition, HTML5-based content will be easier to consume by content aggregators as well as an ever-growing array of devices. Today, you can consume HTML5-based content on your desktop computer, your phone, your tablet, and perhaps even your car. Developing content targeting the HTML5 standard can open unforeseen doors in the future. Who knows, perhaps tomorrow, your refrigerator, washing machine, or even gas pump may be consuming your HTML standards-based rich contents.

Here are a few useful HTML5 resources to get you started:

• http://en.wikipedia.org/wiki/HTML5
• http://www.html5rocks.com/
• http://diveintohtml5.info/
• http://html5demos.com/
• http://www.html5test.com/
• http://www.w3schools.com/html5/html5_reference.asp
• http://dev.w3.org/html5/html4-differences/

Also be sure to check out the Chrome Experiments, a showcase for web projects built with HTML5 and other technologies.