HTML Validation

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

About This HTML Issue

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>

Learn more:

→ HTML Spec: the link element

Last reviewed: September 02, 2024

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues (23)

A “link” element must have an “href” or “imagesrcset” attribute, or both.

A link element is invalid unless it contains at least one of the href or imagesrcset attributes.

The link element is used to define relationships between the current document and external resources, most commonly stylesheets. According to the HTML standard, a link must have either an href attribute, which points to the resource, or an imagesrcset attribute for responsive icons. If both are missing, the validator throws an error. This ensures that the link actually references a resource, otherwise it serves no functional purpose.

Correct usage:

With an href (for stylesheets, icons, etc.)

<link rel="stylesheet" href="styles.css">

With imagesrcset (for responsive icons)

<link rel="preload" as="image" type="image/png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

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>

Bad value “en-EN” for attribute “hreflang” on element “link”: Bad region subtag.

The value en-EN is not a valid language tag for the hreflang attribute on a link element.

The hreflang attribute specifies the language (and optionally, the region) of the linked resource to help search engines and browsers deliver the correct localized version. Language tags should follow BCP 47 standards, with primary language subtags (like en) and optional region subtags (like US). A correct region subtag for English would be en-US (English as used in the United States) or en-GB (United Kingdom). Double language subtags like en-EN are invalid because the region subtag must be a valid country code, not a repeat of the language code.

Correct usage:

<link rel="alternate" href="https://example.com/en/" hreflang="en">
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB">
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US">

Incorrect usage:

<link rel="alternate" href="https://example.com/en-en/" hreflang="en-EN">

Use en, en-US, or en-GB as appropriate for English-language content, but never en-EN.

Bad value “favicon” for attribute “type” on element “link”: Subtype missing.

The type attribute value for the <link> element must be a valid MIME type, such as image/png, not favicon.

The type attribute in a <link rel="icon"> specifies the MIME type of the linked resource. MIME types must follow the standard format, such as image/png for PNG images or image/x-icon for .ico files. Using favicon is incorrect because it is not a registered MIME type, leading to validation errors.

Correct usage for linking a PNG favicon:

<link rel="icon" href="img/favicon.png" type="image/png">

Correct usage for linking an ICO favicon:

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

The type attribute is optional when the server sends the correct Content-Type HTTP header, but it can be included for explicitness and clarity.

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.

Bad value “” for attribute “imagesizes” on element “link”: Must not be empty.

Bad value “” for attribute “imagesrcset” on element “link”: Must contain one or more image candidate strings.

Bad value “highest” for attribute “fetchpriority” on element “link”.

The value highest is not valid for the fetchpriority attribute on a link element; valid values are auto, high, and low.

The fetchpriority attribute is used to inform the browser about the relative priority of resource fetching, such as stylesheets or preloads. According to the WHATWG HTML standard and the W3C validator, only the values auto, high, and low are permitted. Using an invalid value like highest will trigger a validation error.

Correct usage:

fetchpriority="high": Resource is prioritized for early fetching.
fetchpriority="low": Resource is fetched with lower priority.
fetchpriority="auto": Browser chooses the priority.

Incorrect example:

<link rel="preload" href="style.css" as="style" fetchpriority="highest">

Corrected example:

<link rel="preload" href="style.css" as="style" fetchpriority="high">

Minimal valid HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <link rel="preload" href="style.css" as="style" fetchpriority="high">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Replace highest with high, low, or auto to resolve the validation error.

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial