HTML Guide · Rocket Validator

Specify the language of your HTML document using the lang attribute on the <html> element instead of using a <meta> tag for the language.

The HTML5 standard encourages specifying the primary language of a document using the lang attribute on the <html> element. The lang attribute should be set to a valid language code, such as en for English or fr for French. Using a <meta> tag to declare the document language is considered obsolete because the <meta> tag cannot convey element-specific language information. The lang attribute is more versatile and directly associates the language with the HTML document structure itself. This approach aligns better with accessibility requirements and helps user agents understand and render the content appropriately.

Here is how you should specify the language using the lang attribute:

Correct usage with lang attribute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document with Language Specification</title>
  </head>
  <body>
    <p>This document is written in English.</p>
  </body>
</html>

Incorrect usage with <meta> tag:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Language" content="en">
    <title>This usage is considered outdated</title>
  </head>
  <body>
    <p>This should not be done in HTML5.</p>
  </body>
</html>

By defining the language with the lang attribute directly in the <html> tag, you improve the document’s compliance with modern standards and enhance the accessibility and internationalization aspects of your web content.

When the attribute “xml:lang” in no namespace is specified, the element must also have the attribute “lang” present with the same value.

When the “srcset” attribute has any image candidate string with a width descriptor, the “sizes” attribute must also be present.

“X” in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.

unquoted

Attribute values for HTML elements must be enclosed within quotes. Check for attributes whose values are missing quotes.

Example:

<!-- These are invalid -->
<div class=important></div>
<div class=important"></div>

<!-- This is valid -->
<div class="important"></div>

X-UA-Compatible HTTP header must have the value “IE=edge”, was “IE=edge,chrome=1”.

X-UA-Compatible

Setting the X-UA-Compatible HTTP header with the value IE=edge,chrome=1 is non-standard; it should be set to IE=edge only.

The X-UA-Compatible header is used to specify how Internet Explorer should render a webpage. It allows web developers to opt into the latest standards mode in IE, thus ensuring better compatibility and performance by avoiding compatibility modes that simulate older browser versions. Setting it to IE=edge tells IE to use the highest mode available, which is the most standards-compliant mode the browser supports. The additional ,chrome=1 directive was used for a Google Chrome Frame feature, which is now deprecated and should not be used in modern webpages.

To ensure your HTML document meets the W3C standards, you must remove ,chrome=1 and just have the IE=edge value. Here’s how you can properly set the X-UA-Compatible header:

In HTML Meta Tags: Ensure your meta tag within the HTML document head is correctly written.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

In HTTP Headers: If you’re setting the X-UA-Compatible via server configuration, for example in an .htaccess file (for Apache), ensure it’s configured without the ,chrome=1.

# .htaccess example
<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=edge"
</IfModule>

Correctly setting this ensures that your page is rendered with the most up-to-date rendering engine, enhancing compatibility and performance across modern web standards.