Fix HTML5 Validator Error “Bad value X-UA-Compatible for attribute http-equiv on element meta.”

by Josh | Posted in Tutorials & Guides | Tagged:

UPDATE (2015): You can use content=”IE=edge” now, and it should validate. “chrome=1” can be removed since Google has retired the Google Chrome Frame plugin as of February 2014— you’ll get a similar but different error if it’s included.

 

If you are using the X-UA-Compatible meta tag, then you’ll probably run into this error when attempting HTML5 validation at the W3C. It’s common to use X-UA-Compatible to set Internet Explorer to edge mode (forcing the latest rendering engine), and to enable Google Chrome Frame for visitors with that IE plugin.

To make the validation error go away (perhaps it is your only remaining error?), the meta tag can be removed and the value can be sent through the HTTP headers instead. Depending on the web technology you’re using and your server settings, this can be done in different ways, and I thought it’d be a good idea to collect the syntax in one place.

Set HTTP Header with PHP

If you are working with a PHP framework or template, you can set these with the header function. Since I was already setting a PHP header for Content-Type, as suggested by Google PageSpeed Tools, this was simple for me to add another one:

header('X-UA-Compatible: IE=edge,chrome=1');

Using the .htaccess File

Make sure you have the mod_headers module enabled in Apache.

Header set X-UA-Compatible "IE=Edge,chrome=1"

With IIS web.config

Syntax provided by GCF Developer Guide.

With C#

I don’t typically use C#, but this was mentioned by a StackOverflow user and worth including:

Response.AppendHeader("X-UA-Compatible", "IE=edge,chrome=1");

If you would like to check that these are working properly, I would recommend testing the page with a header check tool such as this one.

References and More Info:

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

  1. | Link
    Nick says:

    Thanks the php version worked great!

    Reply
    • | Link
      Vincent Browning says:

      can somebody tell me where I should put the php version to solve this error? My .htaccess file is not visible on the server.

      Reply
  2. | Link
    Luis says:

    Maravilhoso! Consegui corrigir um layout no WordPress com esta técnica.

    Muito obrigado!

    Reply
  3. | Link
    Vincent Browning says:

    Hi Guys,

    I am trying to get rid of the Bad Balue X-UA etc etc

    Where do I put this code? header(‘X-UA-Compatible: IE=edge,chrome=1’);

    In the header page and if so where in the header.php page.

    I am using wordpress and woo theme mystyle. It is the only error showing at present on validation.

    All help appreciated.

    Thanks

    Vincent

    Reply
    • | Link
      Josh says:

      Put it within opening and closing PHP tags at the very top of your theme’s header.php. Basically, set the HTTP header values before anything is printed on the page (HTML, whitespace).

      Reply
  4. | Link
    Lars says:

    The PHP Version works perfect. Thanks a lot! 🙂

    Reply
  5. | Link
    Cristian Alarcón says:

    Thanks 😀 very useful!

    Reply
  6. | Link
    guter-webhoster.de says:

    What does the header actually do?

    I do not know where to send the header within my wordpress code to ensure the content has not been already sent.

    Reply
    • | Link
      Josh says:

      HTTP headers are hidden info that is sent with every HTTP request (the requested page, the client browser, etc). The header.php file is first included part of most WordPress templates, and is located within your theme folder: /wp-content/themes/yourthemename/header.php
      You would put the line of PHP code within the first set of PHP tags.

      Reply
  7. | Link
    Frank Conijn says:

    Apparently, the W3C Validator rules have changed. In HTML5, an X-UA meta tag in the head now validates perfectly well.

    Reply
    • | Link
      Josh says:

      Good to know! I just tested another site and it seems to be true. Hmm, I can’t find an official post about what changes were made.

      It does look like the chrome=1 needs to be removed to validate (shouldn’t be needed since Google Chrome Frame was retired in February of 2014). I saw this error on another site: “A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.”.

      Reply

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.