HTML Guide - issues tagged as charset

A “charset” attribute on a “meta” element found after the first 1024 bytes.

charset
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.

A document must not include both a “meta” element with an “http-equiv” attribute whose value is “content-type”, and a “meta” element with a “charset” attribute.

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">

A document must not include more than one “meta” element with a “charset” attribute.

meta
charset

Attribute “charset” not allowed on element “meta” at this point.

meta
charset

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>

Bad value “text/html; charset=windows-1251” for attribute “content” on element “meta”: “charset=” must be followed by “utf-8”.

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">

Bad value “text/html; charset=windows-1252” for attribute “content” on element “meta”: “charset=” must be followed by “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">

Element “meta” is missing one or more of the following attributes: “charset”, “content”, “http-equiv”, “itemprop”, “name”, “property”.

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>

Element “script” must not have attribute “charset” unless attribute “src” is also specified.

The charset attribute on the <script> element tells the browser what character encoding to use when interpreting the referenced external script file. When a script is written directly inside the HTML document (an inline script), the script’s character encoding is inherently the same as the document’s encoding — there is no separate file to decode. Because of this, the HTML specification requires that charset only appear on <script> elements that also have a src attribute pointing to an external file.

Including charset without src violates the HTML specification and signals a misunderstanding of how character encoding works for inline scripts. Validators flag this because browsers ignore the charset attribute on inline scripts, which means it has no effect and could mislead developers into thinking they’ve set the encoding when they haven’t.

It’s also worth noting that the charset attribute on <script> is deprecated in the HTML living standard, even for external scripts. The modern best practice is to serve external script files with the correct Content-Type HTTP header (e.g., Content-Type: application/javascript; charset=utf-8) or to simply ensure all your files use UTF-8 encoding, which is the default. If you’re working with an older codebase that still uses charset, consider removing it entirely and relying on UTF-8 throughout.

Examples

Incorrect: charset on an inline script

This triggers the validation error because charset is specified without a corresponding src attribute.

<script charset="utf-8">
  console.log("Hello, world!");
</script>

Correct: Remove charset from inline scripts

Since inline scripts use the document’s encoding, simply remove the charset attribute.

<script>
  console.log("Hello, world!");
</script>

Correct: Use charset with an external script (deprecated but valid)

If you need to specify the encoding of an external script, both charset and src must be present. Note that this usage, while valid, is deprecated.

<script src="app.js" charset="utf-8"></script>

Recommended: External script without charset

The preferred modern approach is to omit charset entirely and ensure the server delivers the file with the correct encoding header, or simply use UTF-8 for everything.

<script src="app.js"></script>

Legacy encoding “windows-1252” used. Documents must use UTF-8.

The “charset” attribute on the “link” element is obsolete. Use an HTTP Content-Type header on the linked resource instead.

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 “charset” attribute on the “script” element is obsolete.

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>