HTML Enhancements in Windows Internet Explorer 8
Windows Internet Explorer 8 includes features designed to more closely support industry standards, such as the HTML 4.01 Specification. This article describes these features, and provides guidance for incorporating them into your Web sites.
- Accessing New Features from Your Web Pages
- Quoting with the Q Element
- Automatically Closing P Elements
- Using Object Elements to Display Images
- Improved Object Fallback
- Related topics
Internet Explorer 8 supports the HTML 4.01 Specification more closely than previous versions of the browser. Some features were added, and other features were changed, in order to better support the behavior expected by the standard. This article explains specific changes made to Windows Internet Explorer to more closely support HTML 4.01. By understanding the specific changes to behaviors in Internet Explorer 8, you will be better able to create new Web sites, or modify existing sites, that function as you intend them to, regardless of the browser used to view them.
By default, Internet Explorer 8 emphasizes compatibility with earlier versions of the browser. This allows sites developed for earlier browsers to work properly when viewed with Internet Explorer 8. To take advantage of new features in Internet Explorer 8, you need to add an X-UA-Compatible header to your Web page that enables IE8 Standards mode. For more information, see Defining Document Compatibility.
Tip: The Internet Explorer 8 Developer Tools allow you to dynamically change the compatibility mode of a Web page. This lets you see how a page appears when viewed in earlier versions of the browser. For more information, see Discovering Internet Explorer Developer Tools.
Prior versions of Internet Explorer did not place quotation marks around content inside a Q element. Internet Explorer 8 places quotation marks around content inside a Q element, as shown in the following sample.
<html> <head> <title>Simple Q Element Example</title> <meta http-equiv="X-UA-Compatible" content="IE8"> </head> <body> <blockquote> <q>Now is the Winter of our Discontent<br/> Made Glorious Summer by this Son of York.<br/> And all the clouds that lower'd upon our house<br /> In the deep bosom of the ocean buried.</q> <em>—— Richard III, William Shakespeare</em> </blockquote> </body> </html>
When choosing the characters to display as quotation marks, Internet Explorer follows the guidance of the lang attribute (if specified) and the conventions of the default installed language for the operating system.
<html> <head> <title>Simple P Element Closing Example</title> <meta http-equiv="X-UA-Compatible" content="IE8"> </head> <body> <p>This is the first paragraph</p> <p style="margin-left:30px">This is another paragraph. <!-- P not closed --> <table border="1px" cellpadding="2px"> <tr><td>This is a table cell.</td></tr> </table> <p>This is a third paragraph.</p> </body> </html>
In this example, the second p element is not closed. When viewed with Windows Internet Explorer 7, the table element is displayed as a child element of the second p element. The second p element is indented from the left margin of the window by 30 pixels. Because the table is a child element of the p element, it is also indented from the left margin of the window. When viewed with Internet Explorer 8, however, the table element is aligned to the left margin. Because Internet Explorer 8 automatically closes unclosed p elements before displaying table elements, the table element is a child of the body element.
Internet Explorer allows you to use the object element to display images. When displaying such images with this element, older versions of the browser automatically add scrollbars and borders to the image, which frequently caused the image to not display properly.
As of Internet Explorer 8, the object element displays images as if they were embedded using img elements. To use this behavior in your Web pages, set the object element's data attribute to the URL of the image. You can also embed a dataURL in the data attribute. For more information, see Data Binding.
If you want Internet Explorer to load images into object elements using the behavior of older versions, either use an X-UA-Compatible header to choose an older compatibility mode or set the object element's type attribute to text/html. For more information regarding the X-UA-compatible header, please see Defining Document Compatibility.
When an object element fails to load a resource, content inside the object element is rendered instead. This is called object fallback because it allows you to define a strategy that Internet Explorer uses to "fall back" to when something goes wrong.
Internet Explorer 7 introduced the ability to nest object elements; that is, to use multiple object elements to create a richer fallback strategy, as shown in the following example.
<object data="..." type="silverlight" > <object data="..." type="windows media file"> <object data="..." type="image/png"> Wow! Everything went wrong. Sorry. </object> </object> <object>
This example uses three object elements to define an object fallback strategy. It first tries to load a Silverlight application. If that fails, a Microsoft Windows Media file is requested. If the Windows Media file cannot be loaded, the example loads an image.
If you view this example using Internet Explorer 7, you would see the image, but there would only be one object element in the page's document object model. Internet Explorer 7 does not create object elements for objects that fail to load.
Internet Explorer 8 uses this new fallback behavior only for communication related errors; that is, it only occurs when a load request generates a client (4xx) or a server (5xx) HTTP error response. If the request fails for other reasons, such as malformed content or a corrupted ActiveX control, the original fallback behavior occurs. For more information regarding HTTP response codes, see HTTP Response Headers.
Internet Explorer 8 provides improved support for industry standards, including the HTML 4.01 Specification. These changes make it easier to create Web sites that behave consistently when viewed with different browsers. Understanding these changes can help you create sites that display and function consistenty, regardless of the browser used to view them.
- Defining Document Compatibility
- Discovering Internet Explorer Developer Tools
- About the W3C Document Object Model