HTML Guide
The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
Here’s an example of using the rel attribute to link a document to a CSS stylesheet:
<link rel="stylesheet" href="default.css" />
Here’s an example os using the rel attribute to tell search engine spiders to ignore the link relationship with another document:
<a href="https://example.com" rel="nofollow">more info</a>Learn more:
Related W3C validator issues
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 maxlength attribute can be used on an input element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email, password, search, tel, text, or url.
The minlength attribute can be used on an input element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email, password, search, tel, text, or url.
The minlength attribute defines the minimum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea>. This must be an integer value 0 or higher. If no minlength is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria.
Here’s an example:
<label for="name">Enter your name (max 25 characters)</label>
<input type="text" minlength="25" id="name">The pattern attribute is only allowed on input whose type is email, password, search, tel, text or url. Check the type used, and consider changing to one of the allowed types to enable pattern client-side validation.
The pattern attribute is a handy way of adding client-side validation on HTML forms without resorting to JavaScript. Check out this article to learn more about Input Pattern.
The boolean required attribute can only be used with certain types of inputs. Check the input type is one of the allowed.
The required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.
According to the ARIA specification, the attribute aria-rowspan is expected to have a positive integer value. A positive integer is a whole number greater than zero.
Explanation
- aria-rowspan: This attribute is used in ARIA-enabled tables to indicate how many rows a cell should span within its row group. It is often used in elements like gridcell or rowheader within roles that imply grid-like structures, such as grid or treegrid.
Example of Incorrect Usage
<div role="gridcell" aria-rowspan="0">Content</div>In this example, aria-rowspan is set to "0", which is not a valid positive integer.
Correct Usage
To resolve the issue, you should specify a positive integer. For example, if the cell should span one row, you can write:
<div role="gridcell" aria-rowspan="1">Content</div>If the cell should span multiple rows, adjust the number accordingly:
<div role="gridcell" aria-rowspan="2">Content</div>Considerations
- Make sure the role attribute is correctly associated with an element that can logically have a row and grid structure, such as gridcell.
- Ensure that the aria-rowspan value aligns with the structure of your grid or table, representing the actual number of rows that the element is spanning.
The itemscope attribute is a boolean attribute in HTML5, which means it does not take any values. Adding any value (such as true or false) will cause an error. When using boolean attributes, they should either be present or absent. If an attribute like itemscope is present, it is considered true.
Here’s how to correct the error:
Incorrect Usage:
<div itemscope="true">Correct Usage:
<div itemscope>Explanation:
- Simply including the itemscope attribute without any value is the correct way to use it.
- If you don’t want to use the itemscope attribute, just remove it from the tag.
The value contact is not a valid option for the autocomplete attribute on an <input> element.
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.
All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.
Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.
<!-- This is invalid because the hidden attribute should not have a value set -->
<div hidden="false"></div>
<!-- The correct way to hide a div is like this -->
<div hidden>This will be hidden</div>
<!-- And to show the element, we just don't hide it -->
<div>This won't be hidden</div>