March 14, 2011
Support for some features of the HTML5 Working Draft specification was introduced in Internet Explorer 8, including:
Internet Explorer 9 builds on the work done on HTML5 compliance in Internet Explorer 8, and implements the following new features:
Note It is important to remember that, as of this writing, the HTML5 specification is still in the Working Draft stage. Until it reaches the Candidate Recommendation stage, it could change significantly. For more information, see the latest HTML5 working draft.
Internet Explorer 9 adds support for geolocation. The Geolocation API enables a web application to access the current geographical location of the PC running Internet Explorer. The webpage can then tailor the user experience according to the location, for instance, to display the position on a map or display up-to-date local information, such as weather or news reports. Location data is returned in terms of latitude and longitude coordinates. The geolocation APIs in Internet Explorer 9 conform to the standards set forth in the Geolocation API Specification.
To see geolocation in action, see the Internet Explorer 9 Test Drive site.
For more information on geolocation, see MSDN.
HTML5 video and audio Elements
Two of the most anticipated HTML5 features now supported in Internet Explorer 9 are the new video and audio elements. The video and audio elements are both defined within the Embedded content section of the HTML5 specification.
Essentially, the video and audio elements enable embedding of video and audio content into an HTML page. Web developers can also specify several attributes for both elements. For instance, consider the following markup.
In Internet Explorer 9, this will display, in a 400×300 space (the width and height attributes), the image file "frame.png" (the poster attribute) before the video content is loaded. The video file, "video.mp4" (the src attribute), will start playing automatically upon page load (the autoplay attribute), and controls will be displayed for controlling the video (the controls attribute). When it finishes, the video will repeat (the loop attribute). If the video format is not supported, the text within the video element (“This content appears…”) will be displayed instead. The video element also supports the preload element, which hints to the browser what the web developer thinks will lead to the best user experience.
To see an example of the video element in action, see the “ Video Panorama” demo on the Internet Explorer Test Drive site.
Internet Explorer 9 also supports the video element with multiple sources, each of which is specified by the child element source. For instance, consider the following markup.
<video width="400" height="300" poster="frame.png" autoplay controls loop>
Here, Internet Explorer 9 picks the first listed supported format (in this case, the second source element) and plays its associated source file.
The audio element is defined similarly to the video element, but without the width, height, and poster attributes. To see an example of the audio element in action, go to the Internet Explorer Test Drive site.
Internet Explorer 9 supports the following content formats:
For more information, see HTML5 video and audio on MSDN.
HTML5 canvas Element
Another anticipated HTML5 feature new in Internet Explorer 9 is the canvas element, which is used in conjunction with the Canvas 2D API. The canvas element, as defined in the HTML5 specification, enables rendering of graphics on a resolution-dependent bitmap canvas. To draw on the canvas, “contexts” are used, such as the Canvas 2D context, specified in the W3C Canvas 2D API specification. Internet Explorer 9 introduces support for the canvas element, using the 2D Canvas drawing API as its context. (In Internet Explorer 9, the Canvas 2D context is represented by the CanvasRenderingContext2D object or the ICanvasRenderingContext2D interface.) Like all the graphics in Internet Explorer 9, canvas is hardware-accelerated by using Windows and the GPU.
Canvas enables drawing scenarios that include rectangles, paths, lines, fills, arcs, and Bézier and quadratic curves. In addition, the canvas element in Internet Explorer 9 supports the width and height attributes. (The default values for width and height are 300 and 150 pixels, respectively, and the default color is transparent black.)
Canvas is a way to program graphics on the web. The canvas tag is an “immediate mode” (drawing commands are sent directly to the graphics hardware), two-dimensional drawing surface that you can use to deliver real-time graphs, animations, or interactive games without having to download a separate plug-in. Because of APIs defined by the CanvasRenderingContext2D object, canvas enables the following drawing scenarios that include:
The canvas element in Internet Explorer 9 supports the width and height attributes. (The default values for width and height are 300 and 150 pixels, respectively, and the default color is transparent black.)
Internet Explorer 9 supports the following Canvas 2D Context APIs (members exposed by the CanvasRenderingContext2D object):
For a more in-depth introduction to HTML5 Canvas in Internet Explorer 9, see MSDN. Additionally, visit the Internet Explorer Test Drive site to view more demonstrations of the canvas element. For technical information on the canvas element in Internet Explorer 9, see the canvas element reference page on MSDN.
HTML Parsing Improvements
HTML parsing in Internet Explorer 9 has been improved to more closely align to behavior described in the HTML5 Draft Specification.
Parsing SVG in HTML
Internet Explorer 9 supports SVG embedded directly in HTML. For more information about SVG, see Scalable Vector Graphics (SVG) in this guide.
Internet Explorer 9 will parse documents with a mime-type of application/xhtml+xml as XHTML.
Previously, Internet Explorer would parse elements it didn’t recognize as “unknown” elements. These elements would be flattened, which kept normal CSS styling rules from applying to them, and was not compliant with the HTML5 draft specification. Internet Explorer 9 changes this behavior, and now parses unrecognized elements as “generic” elements, allowing them to function like normal elements do. This obviates the need for developer workarounds, like calling document.createElement to force Internet Explorer to recognize an element.
Following is a simple example of a generic element—in this case an undefined element called mydiv.
Internet Explorer 8 ignores the mydiv tag and its associated CSS rules. This sentence renders as follows.
Internet Explorer 9 parses the mydiv tag as expected, and renders the following.
If your HTML contains overlapping tags, Internet Explorer 8 and earlier versions do not resolve them at parse time. This behavior is contrary to what is specified in the HTML5 draft specification. If you have overlapped some elements for scripting purposes (such as the one illustrated here), this can lead to confusing scripting errors. Internet Explorer 9 follows the HTML5 draft spec and resolves overlapping tags at parse time.
Following is a simple example of a script that turns text between overlapping i and b tags red.
In Internet Explorer 8 and earlier, this markup results in an unintended rendering.
In Internet Explorer 9, the markup renders as expected.
Parsing changes to script and style blocks
Internet Explorer 8 and earlier versions do not persist text, in either a script or style block, to text nodes in the DOM. Internet Explorer 9 persists text in script or style blocks to the DOM as text nodes, as expected. This makes source code available in the DOM as a text node so you can manipulate it with script.
HTML5 Selection APIs
Internet Explorer 9 adds support for three HTML5 text selection APIs. The Selection object represents a list of Range objects, which are enabled by the new support for DOM L2 Range in Internet Explorer 9. For more information, see Document Object Model (DOM) Improvements earlier in this document.
The getSelection method
The getSelection method returns the Selection object for the window, which represents the currently selected text.
The selectionStart property
The selectionStart property gets the offset to the start of the currently selected text, and can also set the start of the selection.
The selectionEnd property
The selectionEnd property gets the offset to the end of the currently selected text, and can also set the end of the selection.
HTML5 Semantic Elements
Internet Explorer 9 improves support for several HTML5 semantic elements. A “semantic” element in this context is defined as one whose tag name describes its content, but which does not have any special behaviors. Semantic tags can be especially helpful for accessibility.
Internet Explorer 9 makes the following changes to its support for semantic elements:
The following semantic elements are now recognized: