Share via

How to Enable Standards Support

  • Article

Recent versions of Windows Internet Explorer have improved support for a variety of established and emerging standards, such as HTML5, CSS3, SVG, and others. To display webpages that incorporate features from these and other modern standards, webpages must be displayed in standards mode.

Here, you'll learn about document modes, which control the way a webpage is displayed by Internet Explorer. You'll also learn how to enable standards support, how to recognize document mode issues, and how to troubleshoot these issues.

Introduction

To create a webpage that is displayed in standards mode when viewed with Internet Explorer, use the HTML5 document type directive, as shown in the following code example:

<!DOCTYPE html>
<html>
<head>
  <title>Enabling Standards Support</title>
</head>
<body>
  <p>
     Because this webpage uses the HTML5 document 
     type, it is displayed in IE9 Standards mode.
  </p>
</body>

The HTML5 document type directive tells a webbrowser to display webpages in standards mode. Specifically, !DOCTYPE directive in this example specifies a standards-based document type. As a result, Internet Explorer displays this webpage in standards mode. This enables the highest support available for established and emerging standards and allows Internet Explorer to display webpages that incorporate features such as (but not limited to) those in the following list:

If your webpage uses one or more features that require standards mode and you do not include a standards-compliant !DOCTYPE directive, the resulting behavior depends on the version of Internet Explorer used to view the webpage:

  • Internet Explorer 10 displays the webpage in quirks mode, but supports features defined in modern standards, unless the page is displayed in a legacy document mode.
  • Windows Internet Explorer 9, Windows Internet Explorer 8, Windows Internet Explorer 7, and Microsoft Internet Explorer 6 displays the webpage as if it were viewed by an even older version of the browser.
  • Windows Store apps using JavaScript display the webpage in standards mode. Windows Store apps using JavaScript do not support legacy document modes.

As you might imagine, this can lead to unexpected results. However, if your webpage contains a standards compliant doctype directive (such as the HTML5 example shown above), all versions of Internet Explorer display the webpage in standards mode. In turn, this provides the highest support for standards available to that version of the browser. For more info, see Defining document compatibility.

Understanding document modes

The !DOCTYPE directive controls the document mode of a webpage. If your webpage does not include a !DOCTYPE directive or if it specifies a non-standards mode document type, Internet Explorer displays your webpage in IE5 (Quirks) mode. When this happens, Internet Explorer ignores features in your webpage that require standards mode.

The following image shows two webpages, each containing three objects.

While the images are similar, there are visible differences between them. The webpage on the left, for example, displays objects using rounded corners while the image on the right uses traditional square corners. Each webpage also positions and sizes the objects differently.

In spite of these differences, each webpage uses nearly the same markup. The following code example shows the markup for the webpage on the left, the one displayed in IE9 Standards mode.

<!DOCTYPE html>
<html>
  <head>
    <title>IE9 Standards Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>

The following code example shows the markup for the image on the right, the one displayed in IE5 mode.

<html>
  <head>
    <title>IE5 Quirks Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>

If you compare the examples, you find that the only difference between each page, aside from the title element, is that the first example uses a !DOCTYPE directive to declare a standards-based document type. The second example does not declare a document type.

You might also notice that each page contains a style element that specifies the border-radius attribute in order to define rounded corners for each div element in the webpage. The border-radius attribute is defined as part of the Cascading Style Sheets, Level 3 (CSS3) Specification and is consequently supported only for webpages displayed in standards mode.

However, the webpage on the right (the second example) does not declare a document type. As a result, Internet Explorer displays the webpage in IE5 mode, a document mode designed to support only the features supported in earlier versions of the browser.

The !DOCTYPE directive is an important consideration for standards-based websites (and required in order to validate a webpage). For best results, public websites should include !DOCTYPE directives that enable standards mode, such as the HTML5 document type shown in the following example.

<!DOCTYPE html>

For more information, see Defining Document Compatibility.

In this section

Topic Description

Investigating Document Mode Issues

This topic helps you learn how to use the F12 developer tools to research and identify a problem related to the document type of a webpage.