HTML Guide for meta
The <meta charset> is expected to appear at the beginning of the document, within the first 1024 bytes. Consider moving it to the beginning of the <head> section, as in this example:
<head>
<meta charset="utf-8">
...
</head>A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. For HTML documents, the standard way to declare a document character encoding is by including a <meta> tag with a charset attribute, typically <meta charset="utf-8">.
According to the W3C standard:
The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.
In order to define the charset encoding of an HTML document, both of these options are valid, but only one of them must appear in the document:
<!-- This is the preferred way -->
<meta charset="UTF-8">
<!-- This is the older way, also valid -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">The <meta charset> tag, used to define the character encoding, must appear only once in a document, within the <head> section.
Remove duplicate <meta> elements that set the name attribute to description from your HTML document.
HTML documents should only include one <meta> element with the name attribute set to description to provide a brief summary of the webpage content. This is crucial for search engine optimization, as search engines use this information to display summaries of your pages in search results. A duplicate description meta tag can confuse search engines, possibly affecting your webpage’s visibility negatively. To resolve this, locate all <meta> elements with name="description" in your HTML and remove duplicates, leaving only one that accurately describes your content.
Example of Duplicate Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Page</title>
<meta name="description" content="This is a description of the page.">
<meta name="description" content="Another description here.">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Welcome to the Sample Page</h1>
<p>This page serves as an example for HTML structure.</p>
</body>
</html>Corrected Version
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Page</title>
<meta name="description" content="This is a description of the page.">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Welcome to the Sample Page</h1>
<p>This page serves as an example for HTML structure.</p>
</body>
</html>Ensure that the content for the description meta tag is meaningful and relevant to what visitors can expect to find on the web page.
The only value admitted for the attribute content in a <meta http-equiv="X-UA-Compatible"> is currently IE=edge. You’re probably seeing this issue because the page being validated includes the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> As the Google Chrome Frame plugin was discontinued on February 25, 2014, this is longer supported so you should change that meta tag to:
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> According to this article in Wikipedia:
Google Chrome Frame was a plug-in designed for Internet Explorer based on the open-source Chromium project, first announced on September 22, 2009. It went stable in September 2010, on the first birthday of the project. It was discontinued on February 25, 2014 and is no longer supported.
The plug-in worked with Internet Explorer 6, 7, 8 and 9. It allowed suitably coded web pages to be displayed in Internet Explorer by Google Chrome’s versions of the WebKit layout engine and V8 JavaScript engine.
A <meta> tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta> tag that is raising an issue because of bad context, caused by an <img> tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
</body>
</html>If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>A <meta> element using the http-equiv attribute has been found in an unexpected place of the document. It should appear inside the <head> section, like in this example:
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<p>Content of the page</p>
</body>
</html>The http-equiv attribute is used in web pages to simulate an HTTP response header. While HTTP response headers can be set from the server, not everyone has access to the server configuration, so an alternative is using <meta http-equiv> to define settings that would otherwise require setting an HTTP response header.
The most popular use of http-equiv are defining the content-type of the document as in the example above, although in HTML5 it’s preferred to use this instead:
<meta charset="UTF-8">Another popular use of the http-equiv is setting an automatic reload of the web page, for example this will have the browser reload the page every 60 seconds:
<meta http-equiv="refresh" content="60">However, refreshing a page automatically is a bad practice regarding accessibility, as users do not expect a page to do that, and doing so will move focus back to the top of the page, which may create a frustrating or confusing experience.
Other values that can be used with the http-equiv attribute include:
- content-security-policy
- content-length.
- content-encoding
- default-style
- window-target
A <meta> tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta> tag that is raising an issue because of bad context, caused by an <img> tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
</body>
</html>If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>The value “Cache-Control” is not valid for the http-equiv attribute in a meta tag.
The http-equiv attribute in the meta tag is used to define HTTP header equivalents, and it has specific valid values, such as “content-type”, “expires”, “refresh”, and “content-security-policy”. Most commonly used values are defined in the HTML specifications.
To resolve this issue, you must remove or correct the http-equiv attribute value. If controlling cache behavior is necessary, it should be handled via server configuration rather than within the HTML document using a meta tag.
Example
Incorrect usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
<p>Sample text on the page.</p>
</body>
</html>Corrected version (removing the invalid meta tag):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Cache-Control should be configured on the server-side -->
</head>
<body>
<p>Sample text on the page.</p>
</body>
</html>You might configure caching on your web server (e.g., Apache, Nginx) to handle Cache-Control instead of using an invalid meta tag in your HTML.
The value cleartype is not valid for the property http-equiv on a meta tag.
The value Content-Script-Type is not valid for the property http-equiv on a meta tag.
The W3C HTML Validator issue you’re encountering indicates that the value specified for the http-equiv attribute in a <meta> tag is not valid. This often happens due to incorrect formatting, spelling errors, or extraneous characters in the attribute value.
To resolve this issue, ensure that the http-equiv attribute is spelled correctly and that it contains valid values. For a basic Content Security Policy (CSP), the correct way to specify it in the <meta> tag is as follows:
Correct Usage of <meta> with http-equiv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<title>Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Fixes to Apply:
- Ensure Correct Spelling: The attribute value must be spelled exactly as “Content-Security-Policy” (case-sensitive).
- Check for Extraneous Characters: Make sure there are no extra quotes or spaces within the attribute value.
Example of a Bad Value:
If your original <meta> tag looks something like this:
<meta http-equiv=""Content-Security-Policy"" content="default-src 'self';">You should change it to:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">The value Content-Style-Type is not valid for the property http-equiv on a meta tag.
Expires is not a valid value for the http-equiv attribute in HTML5.
The http-equiv attribute is used with the <meta> tag to configure the HTTP headers of the web page. In HTML5, the allowed values for http-equiv include content-type, default-style, refresh, and security-related headers like Content-Security-Policy. The Expires header is an HTTP header typically set in server configurations or via server-side scripting, not through HTML. To control page caching, consider using server-side headers for Expires or use the cache-control setting if supported by your server.
Here’s how you might correct an HTML document using valid http-equiv values and manage caching through server-side configurations:
Example of Valid HTML <meta> Tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>Example of Setting Expires at Server Level:
If you’re using Apache, you might set Expires in a .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 week"
</IfModule>For Nginx, such settings would be in the server’s configuration file:
location ~* \.html$ {
expires 7d;
}Using these methods, you ensure compliance with HTML5 standards by handling HTTP headers correctly.
A <meta> element has an invalid value for the property attribute, probably caused by invalid double quotes. Check out the double quotes, ” should be ".
The correct markup for this meta tag should be like:
<meta property="og:type" content="website" />Pragma is not a valid value for the http-equiv attribute in HTML5.
In HTML5 (as defined by the WHATWG living standard and W3C), the http-equiv attribute on the meta element only allows certain tokens, such as content-type, default-style, and refresh. The use of Pragma is obsolete and was mainly supported in older HTML specifications for compatibility with HTTP/1.0 proxies. The recommended way to control caching in modern web development is through appropriate HTTP headers sent from the server.
Example of the incorrect usage:
<meta http-equiv="Pragma" content="no-cache">Correct usage for controlling cache with HTML meta tags (but note, affects only some browsers and is not reliable):
<meta http-equiv="Cache-Control" content="no-cache">However, even Cache-Control in a meta tag has limited effectiveness. The best practice is to set Cache-Control and Pragma headers server-side, not in HTML.
Correct server-side (not HTML) example:
Cache-Control: no-cache
Pragma: no-cache
Summary:
Remove the <meta http-equiv="Pragma" content="no-cache"> tag from your HTML and rely on server-side HTTP headers to manage caching. If you still need a meta-based (less effective) solution for rare cases, use http-equiv="Cache-Control".
Minimal valid HTML example (without the invalid meta tag):
<!DOCTYPE html>
<html lang="en">
<head>
<title>No Invalid http-equiv Value</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>A <meta> tag has been found in the document stating that the charset is windows-1251, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A <meta> tag has been found in the document stating that the charset is windows-1252, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A <meta name="viewport"> element has been found where the allowed values for the viewport prevent users from zooming and scaling the document.
The user-scalable="no" parameter disables browser zoom on a web page. The maximum-scale parameter limits the amount the user can zoom. Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page. Consider relaxing these values in order to allow users to resize the documents.
There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.
To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:
-
Using the charset attribute:
<meta charset="UTF-8">This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.
-
Using the content and name attributes:
<meta name="description" content="A brief description of the webpage content.">This provides a description of the webpage content, which can be used by search engines.
-
Using the http-equiv and content attributes:
<meta http-equiv="refresh" content="30">This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.
-
Using the property and content attributes:
<meta property="og:title" content="Your Webpage Title">This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.
Correct Usage Example
Here’s an example of an HTML document with a properly formed set of <meta> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta http-equiv="refresh" content="30">
<meta property="og:title" content="Your Webpage Title">
<title>Document</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>A <meta> element without a content, itemprop or property attributes has been found in an unexpected place.
Check its attributes and context - depending on the section of the document (<head> or <body>), the <meta> element allows different attributes.
A <meta> tag has been found that is missing its required content. Example of a valid meta tag:
<meta name="description" content="Description of the page" />A <meta> element without a itemprop or property attributes has been found in an unexpected place.
While the <meta> element is commonly used within the <head> section of the document, it can also be used within the <body> section, for example in the context of defining microdata, as in this example:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>When used within the <body> section, the <meta> element is required to have a itemprop or property, and a content attribute, and it can’t have a http-equiv or charset attribute.
A common cause for this issue is including a <meta> element that was intended for the <head> section (for example one containing a http-equiv attribute in the <body> , for example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
...
</form>In HTML5 you’re encouraged to use Unicode (UTF-8) character encoding rather than a legacy character encoding such as Latin1 (Windows-1252 or ISO 8859-1).
In short, it can be just a matter of using <meta charset="utf-8"/> in your document, but you should also ensure that your pages are also saved and served as UTF-8.
<meta> tags, used for defining metadata about HTML documents, must appear within the <head>...</head> section, but it has been found out of place. Check the document structure to ensure there are no <meta> tags outside the head section.
A common cause of this issue is having a duplicated, out of place <head>...</head> section. Ensure that this section appears in its proper place and is the only container for <meta> tags.