HTML Guide
A <script> element has been found that is using the now obsolete charset attribute. You can safely remove this attribute.
For example, this is using both type and charset attributes, with their default values. Both can be removed:
<script src="app.js" type="text/javascript" charset="UTF-8"></script>and just use this:
<script src="app.js"></script>Learn more:
Related W3C validator issues
The charset attribute on a <script> element can be used to specify the character encoding of an external script, whose URL should be specified on the src attribute.
If the script is not external, then the charset attribute should not be used, as the character encoding of the HTML document will be used.
The W3C Validator is indicating that the charset attribute on the link element is obsolete. According to modern HTML standards, the charset attribute should not be used on the <link> element, and instead, the character encoding should be specified via an HTTP Content-Type header on the server response of the resource.
Here’s how you can address and fix the issue:
1. Remove the charset attribute from the <link> element:
You should simply remove the charset attribute from the <link> element in your HTML file.
Before:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>After:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Example Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>2. Set the charset using HTTP Headers:
To ensure that the correct character encoding is used, you should configure your web server to send the appropriate Content-Type header with the CSS file.
-
For Apache: You can modify the .htaccess file or the server configuration file.
<FilesMatch "\.css$"> AddCharset UTF-8 .css </FilesMatch> -
For Nginx: You can add the following directive to your server block or location block:
location ~* \.css$ { charset utf-8; } -
For Express.js (Node.js): You can set headers in your response:
app.get('/styles.css', function(req, res) { res.setHeader('Content-Type', 'text/css; charset=UTF-8'); res.sendFile(__dirname + '/styles.css'); });
The <script> tag allows authors to include dynamic scripts and data blocks in their documents. This tag accepts two optional attributes, type (which is unnecessary if it’s JavaScript, as that’s the default), and src to indicate the URL of the external script to use.
The language attribute is now obsolete and should not be used.
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.
The combination of type="module" and defer is not allowed. The type="module" attribute itself implies that the script should be executed in a deferred way, hence using the defer attribute is unnecessary and invalid.
Steps to Fix the Issue:
- Remove the defer Attribute: When you use type="module", you should not include the defer attribute since module scripts defer automatically.
Incorrect Code:
<script type="module" defer src="example.js"></script>Corrected Code:
<script type="module" src="example.js"></script>The <script> tag allows authors to include dynamic scripts and data blocks in their documents. When the src is present, this tag accepts a type attribute which must be either:
- an empty string
- text/javascript (that’s the default, so it can be omitted)
- module
Examples:
<!-- This is valid, without a type it defaults to JavaScript -->
<script src="app.js"></script>
<!-- This is valid, but will warn that it can be omitted -->
<script type="text/javascript" src="app.js"></script>
<!-- An empty attribute is valid, but will warn that it can be omitted -->
<script type="" src="app.js"></script>
<!-- The module keyword is also valid as a type -->
<script type="module" src="app.js"></script>
<!-- Any other type is invalid -->
<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>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>The value rocketlazyloadscript used in a <script> tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.