HTML Validation

Element “link” is missing one or more of the following attributes: “itemprop”, “property”, “rel”.

About This HTML Issue

link elements are used to link to external resources, such as stylesheets, scripts, and icons. Including relevant attributes in the link element helps provide additional information about the linked resource.

rel: The rel attribute specifies the relationship between the current document and the linked resource, and can also provide additional information about the type of linked resource. For example, using rel="stylesheet" for a linked CSS file or rel="icon" for a linked favicon.
itemprop: If the linked resource is an HTML document or a microdata vocabulary like Schema.org, use itemprop to specify properties the linked document or vocabulary defines.
property: If the linked resource is an RDF resource, use property to provide metadata about the relationship between the current document and the resource being linked.

Example with rel attribute:

<head>
  <link rel="stylesheet" href="styles.css">
<!-- Other meta tags -->

</head>

Example with itemprop and property attributes:

<head>
  <link itemprop="mentions" href="https://example.com/"> 
  <link property="schema:citation" href="https://example.com/article.html">
<!-- Other meta tags -->

</head>

By adding itemprop, property, or rel as necessary, you can ensure your link elements provide appropriate context and semantic meaning to your HTML document.

Learn more:

Last reviewed: March 20, 2023

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

Ready to validate your site?

Find Accessibility and HTML issues in your large sites, in seconds. Get your site scanned by Axe Core and W3C Validator with just one click.

Pro Trial Free Trial

Reading time

1 min read

Category

HTML Validation

Engine

W3C Validator

Last reviewed

March 20, 2023

Resources

Related W3C Validator Issues (31)

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>

Element “link” is missing one or more of the following attributes: “href”, “itemprop”, “property”, “rel”, “resource”.

A <link> element must include at least one of the attributes href, rel, itemprop, property, or resource.

The <link> element is used to define the relationship between the current document and an external resource, most commonly for linking stylesheets (rel="stylesheet") or providing metadata. According to the HTML specification, at least one of the attributes href, rel, itemprop, property, or resource must be present so the browser or validator knows the purpose of the link.

Correct usage with rel and href:

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

Correct usage with property:

<link property="og:image" href="image.png">

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 “meta” is missing one or more of the following attributes: “content”, “itemprop”, “property”.

Element “meta” is missing one or more of the following attributes: “itemprop”, “property”.

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>

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

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.

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

Pro Trial Free Trial