Jump to content

HTML 5 Overview

+ 1
  adfm's Photo
Posted Jan 14 2010 04:36 PM

HTML 5 is the newest revision of the Hypertext Markup Language. This excerpt from Jennifer Niederst Robbins' HTML & XHTML Pocket Reference gives you an overview of what HTML 5 has to offer.


HTML5, which aims to make HTML more useful for creating web applications as well as semantically marked up documents, is not yet a formal Recommendation as of this writing, however, it is beginning to gain browser support and is already being used for web and mobile application development.

HTML5 uses HTML 4.01 and the legacy behavior of browsers as a starting point, using the Document Object Model (DOM, the “tree” formed by a document’s structure) as its basis rather than a particular set of syntax rules. HTML5 can be written with HTML syntax (called the HTML serialization of HTML5) or according to the stricter syntax of XML (XML serialization, or “XHMTL 5”) if XML parsing is required.

Note

Because HTML5 is still in development, the details are changing rapidly. The HTML5 elements and attributes in this book are based on the WHATWG HTML5 Working Draft dated December 9, 2009.

For the most recent version, go to www.whatwg.org/specs/web-apps/current-work/multipage/. For a list of the ways HTML5 differs from HTML 4.01, see dev.w3.org/html5/html4-differences.

New in HTML5

HTML5 offers new features (elements, attributes, event handlers, and APIs) for easier web application development and more sophisticated form handling. There are also new semantic elements for marking up page content. Most of the purely presentational or poorly supported elements and attributes in HTML 4.01 have been dropped from HTML5, however, a few have been redefined or reinstated.

Elements

Details for each of these elements may be found later in the section the section called “Alphabetical List of Elements”:

articlefooterrp
asideheaderrt
audiohgroupruby
canvaskeygensection
commandmarksource
datalistmetertime
detailsnavvideo
embedoutput 
figureprogress 

New input Types

HTML5 introduces the following new input control types (indicated as values for the type attribute for the input element): color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

Attributes and Events

The Global Attributes and Events available for all elements in HTML5 are listed and described in detail in the the “Common Attributes and Events” section. New HTML5 attributes are listed with their respective elements and labeled HTML5 only in the the “Alphabetical List of Elements” section.

APIs

With a growing demand for interactive content on web pages, HTML5 introduces several APIs (Application Programming Interfaces) for standardizing the creation of web applications.

There are APIs for the following:

  • Two-dimensional drawing in conjunction with the new canvas element

  • Playing video and audio files, used with the new video and audio elements

  • Offline web applications

  • Registering applications for certain protocols or media types

  • Editing documents, including a new global contenteditable attribute

  • Drag and drop functionality (including the new draggable attribute)

  • Exposing the browser history and allowing pages to add to without breaking the back button

  • Cross-document messaging

HTML5 Document Structure

HTML5 has only one version and does not reference a DTD, but HTML5 documents still require a simplified DOCTYPE declaration to trigger standards mode rendering in browsers. The following is the basic structure of an HTML5 document:

<span class="strong"><strong><!DOCTYPE html></strong></span>

<html>

 <head>

	<title><em class="replaceable"><code>Document Title</code></em></title>

 </head>

 <body>

 	<em class="replaceable"><code>Content of document . . .</code></em>

 </body>

</html>

HTML5 documents written in XML syntax do not require a DOCTYPE but may include an XML declaration. They should also be served as the MIME type application/xhtml+xml or application/xml. The following is a simple HTML5 document written in the XML syntax:

<span class="strong"><strong><?xml version="1.0" encoding="UTF-8"?></strong></span>

<html <span class="strong"><strong>xmlns="http://www.w3.org/1999/xhtml"</strong></span>>

 <head>

	<title><em class="replaceable"><code>Document Title</code></em></title>

 </head>

 <body>

 	<em class="replaceable"><code>Content of document . . .</code></em>

 </body>

</html>

HTML5 Browser Support

As of this writing, HTML5 is still in its earliest days and has only limited browser support. A few features are supported in Firefox 3.5+, Safari 3+, Chrome 2+, and Opera 9+ (Opera supports nearly all of the HTML5 Forms features). Internet Explorer supports contentEditable, but otherwise has not promised support for HTML5 in its version 10 release, so we’ll have to stay tuned a while to see what comes after that. In the meantime, Javascript can be used to make browsers recognize HTML5 elements.

Many developers are looking to the mobile world as the arena where HTML5 will take hold in the form of web-based applications.

The following resources are useful for tracking HTML5 real-world support and use:

  • “When Can I Use...” (a.deveria.com/caniuse/): A comparison of browser support for HTML5, CSS3, and other web technologies maintained by Alexis Deveria.

  • Wikipedia “Comparison of Layout Engines (HTML5)” (en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)): Charts show HTML5 support by the major browser layout engines.

  • HTML5 Doctor, Helping you Implement HTML5 today (html5doctor.com): Articles about HTML5 development and implementation, curated by Richard Clark, Bruce Lawson, Tom Leadbetter, Jack Osborne, Mike Robinson, and Remy Sharp.



Tags:
0 Subscribe


0 Replies