HTML Guide
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: Therelattribute 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, usingrel="stylesheet"for a linked CSS file orrel="icon"for a linked favicon. -
itemprop: If the linked resource is an HTML document or a microdata vocabulary like Schema.org, useitempropto specify properties the linked document or vocabulary defines. -
property: If the linked resource is an RDF resource, usepropertyto 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:
Related W3C validator issues
A <meta> element without a content, itemprop or property attributes has been found in an unexpected place.
Check its attributes and context - depending on the section of the document (<head> or <body>), the <meta> element allows different attributes.
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 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 that is using the preload value in the rel attribute is missing the as attribute, used to indicate the type of the resource.
The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.
The as attribute specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.
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.
The href attribute on the link element must not be empty.
For rel="preload" and as="image" only, the imagesizes attribute is a sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.
For rel="preload" and as="image" only, the imagesrcset attribute is a sourceset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.
A <meta> element has an invalid value for the property attribute, probably caused by invalid double quotes. Check out the double quotes, ” should be ".
The correct markup for this meta tag should be like:
<meta property="og:type" content="website" />To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">