HTML Guide
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.
Learn more:
Related W3C validator issues
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">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 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.
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>The combination of type="module" and defer is not allowed. The type="module" attribute itself implies that the script should be executed in a deferred way, hence using the defer attribute is unnecessary and invalid.
Steps to Fix the Issue:
- Remove the defer Attribute: When you use type="module", you should not include the defer attribute since module scripts defer automatically.
Incorrect Code:
<script type="module" defer src="example.js"></script>Corrected Code:
<script type="module" src="example.js"></script>The <script> tag allows authors to include dynamic scripts and data blocks in their documents. When the src is present, this tag accepts a type attribute which must be either:
- an empty string
- text/javascript (that’s the default, so it can be omitted)
- module
Examples:
<!-- This is valid, without a type it defaults to JavaScript -->
<script src="app.js"></script>
<!-- This is valid, but will warn that it can be omitted -->
<script type="text/javascript" src="app.js"></script>
<!-- An empty attribute is valid, but will warn that it can be omitted -->
<script type="" src="app.js"></script>
<!-- The module keyword is also valid as a type -->
<script type="module" src="app.js"></script>
<!-- Any other type is invalid -->
<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>A <source> element inside a <picture> that is followed by another <source> or an <img> with srcset must include a media and/or type attribute.
The <source> element is used inside <picture> for responsive images, allowing different resources to be loaded based on conditions such as viewport width (media) or image format (type). According to the HTML standard, when multiple <source> elements are present (or a following <img> with srcset), each <source> must provide a media and/or type attribute so the browser can choose the appropriate resource based on those hints.
Without media or type, the browser cannot distinguish when to use each source, which can lead to validation errors and unexpected rendering behavior.
Incorrect example (causes the validator error):
<picture>
<source srcset="image1.webp">
<source srcset="image2.jpg">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>Correct examples (fixing the error):
<picture>
<source srcset="image1.webp" type="image/webp">
<source srcset="image2.jpg" type="image/jpeg">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>or
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-large.jpg" media="(min-width: 601px)">
<img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>By specifying the media and/or type attributes for each <source>, you satisfy the HTML standard and resolve the W3C validator issue.
The <textarea> element does not have a type attribute.
The HTML <textarea> element represents a multi-line plain-text editing control, and is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
The type dob is not valid for an input. If you want to build a date picker field, you can use the native HTML input elements with type date, datetime-local, or a generic text input decorated with JavaScript and CSS.
In HTML, the type attribute for the <input> element specifies the type of input control that is to be displayed. The type attribute can have values like text, password, email, date, etc. Using an unsupported or invalid value like dob (which presumably stands for “date of birth”) will cause this validation error.
Here’s an example of how you can correct this issue by using a supported type attribute value for the date of birth input:
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">In this corrected example, we’ve used the type="date" attribute value for the date of birth input. This is a valid type for handling dates in HTML forms. Replace the input type with a supported type according to the specific data you need to capture.
Alternatively you can use a JavaScript library to build a date picker on a generic text input. For example, the popular bootstrap-datepicker library will generate a date picker around a text input.