Explain Codes LogoExplain Codes Logo

Bad value X-UA-Compatible for attribute http-equiv on element meta

html
validation-errors
w3c-standards
browser-detection
Nikita BarsukovbyNikita Barsukov·Jan 30, 2025
TLDR

"Bad value X-UA-Compatible for attribute http-equiv on element meta" is a validation error. The right syntax to command Internet Explorer (IE) to deploy its latest rendering engine is:

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

Make sure it's the first meta tag in <head>, so IE sees it as a priority.

Explaining X-UA-Compatible

The X-UA-Compatible meta tag is a legacy artifact, hailing from an era when browsers required guidance on choosing their rendering engine. The modern, standards-driven browsers no longer need this "helper," so its use is primarily for supporting old versions of IE.

Validation errors and solutions

Simply placing the X-UA-Compatible meta tag in your HTML can cause validation errors. If meeting W3C validation standards is a priority, you might want to send X-UA-Compatible as an HTTP response header:

  • In PHP:
// PHP has its quirks, but I'm not one of them. So behave! header('X-UA-Compatible: IE=edge');
  • In .NET using C#:
// Even in the .NET world, we've got to deal with old Internet Explorer. HttpContext.Response.Headers.Add("X-UA-Compatible", "IE=edge");
  • Via .htaccess:
# For those of us living in the kingdom of Apache,
# we use htaccess to teach IE some manners.
Header set X-UA-Compatible "IE=edge"

Deviating from standards: A balancing act

Sure, HTML5 Boilerplate uses the X-UA-Compatible meta tag, but remember: the goal is a future-proof, standards-compliant website, not just a green favicon from your validator.

Server-side browser detection: The modern approach

If you need to support old browsers, consider server-side detection. You can then cater to those few outdated browsers without muddying your HTML code.

Keeping up to date

Web development is a race against time. That includes keeping tabs on the X-UA-Compatible wiki page and ensuring the information you refer to is up to date.

Managing 'X-UA-Compatible' in real projects

Avoiding validation errors

If X-UA-Compatible is causing validation errors, you can opt for conditional comments to target IE:

<!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]-->

This makes IE use the most modern rendering engine available to it, without disrupting your HTML validation.

Dealing with Chrome Frame to Edge transition

We've moved from requiring plugins like Chrome Frame to where Edge symbolizes Microsoft's advanced web-tech capabilities. A tag like X-UA-Compatible paints a picture of web standards evolution.

Looking to the community

Community feedback on articles can shed light on practical strategies to tackle X-UA-Compatible issues. It's a reliable way to tap into the collective wisdom of developers.