HTML Guide

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');
});

Learn more:

HTML Spec: obsolete but conforming features

Related W3C validator issues

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>

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

A “link” element must not appear as a descendant of a “body” element unless the “link” element has an “itemprop” attribute or has a “rel” attribute whose value contains “dns-prefetch”, “modulepreload”, “pingback”, “preconnect”, “prefetch”, “preload”, “prerender”, or “stylesheet”.

link

A <link> element has been found in an invalid body context. Check the attributes of the <link> element and ensure it’s not within the <body> section.

If the element is within the <head> section, it may have been interpreted as a body context depending on previous elements. For example, while this <link> element is valid per se and is in the <head> section, it is deemed invalid because the previous <img> element made the validator consider it a body context:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>Test</title>
    <img src="photo.jpg" alt="A smiling cat" />
    <link rel="canonical" href="https://example.com/" />
  </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>
    <link rel="canonical" href="https://example.com/" />
  </head>
  <body>
    <p>Some content</p>
    <img src="photo.jpg" alt="A smiling cat" />
  </body>
</html>

A “link” element with a “rel” attribute that contains the value “preload” must have an “as” attribute.

A “link” element with an “as” attribute must have a “rel” attribute that contains the value “preload” or the value “modulepreload”.

The error message indicates that the <link> element contains an as attribute, but its rel attribute does not hold the correct value. According to the HTML specification, when using the as attribute, the rel attribute must be set to "preload" or "modulepreload".

Explanation

The as attribute is used to specify the type of content being loaded, which helps the browser to handle it appropriately. To preload resources, you need to specify the rel attribute with the value "preload" (for general resources) or "modulepreload" (specifically for JavaScript modules).

Example with preload:

If you are preloading a stylesheet, the rel attribute should be set to "preload":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Correct Usage of Link with as Attribute</title>
    <link rel="preload" href="styles.css" as="style">
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

Example with modulepreload:

If you are preloading a JavaScript module, the rel attribute should be set to "modulepreload":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Correct Usage of Link with Modulepreload</title>
    <link rel="modulepreload" href="script.js" as="script">
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

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 “X” for attribute “href” on element “link”: Illegal character in path segment: “X” is not allowed.

An illegal character has been found for the “href” attribute on the “link” element.

To fix this issue, find the “link” element in question and make sure that the “href” attribute contains a valid URL without any illegal characters.

Here’s some example HTML code of a link element:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content...</p>
  </body>
</html>

In the above example, the link element has a valid href attribute value of styles/main.css. Make sure that your href attribute values don’t contain any illegal characters.

Bad value “” for attribute “href” on element “link”: Must be non-empty.