HTML Enhancements in Windows Internet Explorer 8

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.
 

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.

Introduction

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.

Accessing New Features from Your Web Pages

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.

Quoting with the Q Element

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.

Copy 

<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>&mdash;&mdash; 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.

Automatically Closing P Elements

As of Internet Explorer 8, unclosed P elements are automatically closed when followed by table, form, noFrames, or noscript elements.

Copy 

<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.

Using Object Elements to Display Images

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.

Improved Object Fallback

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.

Copy 

<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.

If you view the example using Internet Explorer 8, you would see the image, and there would be three object elements in the page's document object model. Because they failed to load, the first two object elements are inactive. You can, however, use JavaScript to search for them.

Note  Inactive objects cannot be reactivated without refreshing the page or using JavaScript to load new objects.
 

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.

Note  Object fallback does not occur when the contentEditable property of the document object is set to true.
 

Summary

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.

Related topics

Defining Document Compatibility
Discovering Internet Explorer Developer Tools
About the W3C Document Object Model

 

 

Show: