HTML Checking for Large Sites
Rocket Validator integrates the W3C Validator HTML checker into an automated web crawler.
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.
Learn more:
Related W3C validator issues
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>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.
The href attribute on an element <link> contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.
The media attribute on a <link> element has not been recognized.
This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Valid values for this attribute include:
- all. Default, used for all media.
- print. Used for printers and print previews.
- screen. Used for computer, tablets or smartphone screens.
The value used to define the type of a link is not valid. You’re probably using a URL instead of a valid type.
Example of a valid type:
<link rel="icon" type="image/png" href="favicon.png">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.
An a element with an href attribute provides a link to a resource, so adding the link role to it is redundant.
When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when role="link" is added to an element, the tab key should enable giving focus to the link and the enter key should execute the link when focused.
When was the last time you validated your whole site?
Keep your sites healthy checking for A11Y/HTML issues on an automated schedule.