What is the function of the X-UA-Compatible meta tag within HTML

Question

What is the function of the X-UA-Compatible meta tag within HTML

Asked 7 years, 5 months ago

Viewed 21,527 times

30

Could you tell me the function of this meta tag within an HTML document?

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

1 answer

Browser other questions tagged html meta-tags

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2017-06-02T03:52:23+00:00

This goal is unique to Internet Explorer (entered in IE8), it can configure the page to be rendered as in another version of Internet Explorer.

Note that if you are using IE9 or 10 for example with doctype to HTML5:

<!DOCTYPE html>
<html>

Internet Explorer does not support doctype for HTML5, so it will probably end up going into a mode called Quirks Mode.

Quirks mode makes the site look like an older version of IE, which can cause your site to fail, so when using X-UA-Compatible with the value IE=edge it will force the browser to render with the latest.

There are several values beyond the IE=edge

IE=5 which is practically the Quirks Mode
IE=7 which renders as IE7
IE=8 which renders as IE8
IE=9 which renders as IE9
IE=10 which renders as IE10
IE=11 which renders as IE11
IE=edge renders with the highest mode supported by the browser, for example if you use IE10 it will force render as IE10
IE=EmulateIE7 if the defined doctype is validated/recognized it renders as IE7, otherwise render as Quirks Mode
IE=EmulateIE8 if the defined doctype is validated/recognized it renders as IE8, otherwise render as Quirks Mode
IE=EmulateIE9 if the defined doctype is validated/recognized it renders as IE9, otherwise render as Quirks Mode
IE=EmulateIE10 if the defined doctype is validated/recognized it renders as IE10, otherwise render as Quirks Mode
IE=EmulateIE11 if the defined doctype is validated/recognized it renders as IE11, otherwise render as Quirks Mode

And remember, if you don’t define the X-UA-Compatible and use doctype for HTML5 Internet Explorer will work as Quirks Mode

Notes:

Since IE11 this metatag is considered obsolete, but it is not necessary to remove it, it will not affect the behavior in browsers that no longer use it

What are DOCTYPE?

The DOCTYPE which means Document TYPE (document type) and is a statement that should go at the beginning of the document without there being any kind of space before (it may even work in some browsers with spaces before, but in general there should be no spacing), it defines the document type and is not only used by HTML, some XML types like SVG also use it, but as we are talking about HTML I will just cite the examples that have been most used and known.

Note: if the page has no doctype, being for HTML4 or 5 it will render as Quirks mode or Standard Mode (a type of Quirks mode from the Firefox browser and other browsers that use the Gecko engine)

Until a few years ago we used HTML4.01, it doesn’t mean that because today we have 5, that it doesn’t work, it 4.01 is fully functional and there’s no problem in using, the myths of the internet will say that HTML5 is better for Google, but that’s just myth, Google ROBOT is very smart and interprets pages by a number of factors, but I won’t go into detail.

Talking about HTML4.01, it had 4 types of DOCTYPE that aimed to improve rendering for the type of need:

HTML DTD Strict

It is used to force the document to be the most correct/strict, forcing the page to avoid multiple attributes and tags, which was much less permissive, but this was actually a great advantage, if you can create a site that is worth 100% (or close to it) with it, then you could be sure that your site at least in the matter of HTML would be well rendered in several browsers, of course everything may have an exception, but still this was the purpose, I personally must say that this is my favorite doctype to date

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

DTD HTML Transitional

Perhaps it was the most common perhaps of HTML4.01, it includes both the structural elements with the presentation elements, it was more permissive to help maintain compatibility between browsers and versions

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

DTD HTML Frameset

It is used when working with frames (not iframes), where the tag will be required <frame> (and <frameset>):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Frames were a set of pages that were loaded each into their frame, an example taken from https://www.w3.org/TR/html401/present/frames.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Exemplo de Iframe</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <NOFRAMES>
      Seu navegador não suporta frames
  </NOFRAMES>
</FRAMESET>
</HTML>

XHTML

In addition to HTML4.01 there was XHTML1.0, XHTML supported HTML and Xml merging, Htmls are could have tags flaws (which today is still a bit common occurs by web developers' failure) and tags such as <br> and <input> should always have />, thus:

<input type="text" name="exemplo" value="" />
<br />

Xhtml1.0 had the same Doctypes as HTML4.01, however they changed somewhat:

DTD XHTML Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD XHTML Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD XHTML Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The line breaking is actually optional, I believe that people did it just to facilitate the "readability" of the code

HTML5

With the arrival of HTML5 we have a unique doctype, the <!DOCTYPE html>, we no longer have to differentiate between HTML and XHTML, ie started to accept tags that end like this <img src=""> or so <img src="" />, has also supported the inclusion of any tag, it being a valid tag or not and XML tag (which usually tags are customized by those who created XML), an example of Xml is SVG (vector image):

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <p>Olá mundo!</p>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
    </svg>
</body>
</html>

However it is not because modern browsers began to implement HTML5 which means that older browsers like the much used one at the time IE8, 9 and 10 would support this doctype alone, so the solution found was to use the X-UA-Compatible, of course, does not mean that HTML5 tags would work, this only prevented the browser from going to IE=5 mode (Quirks mode), so that IE supports tags like <section>, <footer> and <nav> some extra things were needed that were a combination of Javascript with CSS, a basic example would be this:

<style>
section, footer, nav {
   display: block;
}
</style>
<script>
var tags = [ "section", "footer", "nav" ];
for (var i = 0, j = tags.length; i < j; i++) {
    document.createElement(tags[i]);
}
</script>

Believe the document.createElement made the browser to recognize the tags and so it was possible to apply the CSS, of course with the time came more reliable techniques such as html5shiv, that was created by a developer, just add on your page like this:

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

As there are still some IE users, so many sites still make use of html5shiv