HTML Guide for bad value
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>An <a> element has been found with an invalid href attribute, containing more than one # adjacent character.
The # is used to separate the fragment part of an URI (typically used to indicate a section within a document). For example, this is a valid link to a URI containing a fragment:
<a href="https://example.com/faqs#pricing">pricing</a>The next example is invalid because it contains two adjacent # characters, so that the fragment part would be #pricing instead of pricing:
<a href="https://example.com/faqs##pricing">pricing</a>The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
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.
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.
The name attribute is required for all input elements.
The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The icon value for attribute role is not a valid ARIA role.
ARIA Roles: Overview
ARIA roles are used to enhance accessibility by clearly defining the role and purpose of an element for assistive technologies. However, there are defined roles that you need to adhere to:
- Standard roles include button, checkbox, alert, dialog, img, etc.
- There is no ARIA role named icon.
Solution
To fix the issue, you need to use a valid ARIA role that accurately describes the purpose of the span element. If your intention is to convey that the span contains an icon, you might want to reconsider whether you need a role at all. Often, purely decorative elements should not have a role, or you might use an img role if it conveys a meaningful image.
Here’s how you can address this:
-
No ARIA role (if purely decorative): If the icon is purely decorative and does not add meaningful content to your page, you should remove the role attribute entirely.
<span class="icon"></span> -
Using img role (if it represents an image): If the span represents an image or an icon that conveys meaningful information, you can use role="img" and provide a proper aria-label.
<span class="icon" role="img" aria-label="Icon Description"></span> -
Using an appropriate role (if interactive): If the icon is part of an interactive element, you might need a different role. For instance, if the icon is inside a button:
<button> <span class="icon" aria-hidden="true"></span> Button text </button>Here, aria-hidden="true" is used to hide the decorative icon from screen readers as the text provides the necessary context.
<a> tags can be used to link to an email address using the mailto protocol in the href attribute. Ensure that there is no space in the email address.
<a href="mailto: liza@example.com">This is wrong as it contains an space</a>
<a href="mailto:liza@example.com">This is OK</a>The async attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the async property.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.
<script async src="app.js"></script>
<script async type="module">
/* JavaScript module code here */
</script>The W3C HTML Validator issue you encountered indicates that the URL provided in the href attribute of an anchor (<a>) element is not formatted correctly.
How to Fix the Issue
- Check the Protocol: For a valid URL, make sure that after https: there are two slashes (//).
- Update the URL: Correct the URL format to include the missing slash.
Example of Incorrect HTML
Here is an example of the code that would trigger the validation error:
<a href="https:/example.comf">Example</a>Corrected HTML
Here’s how the corrected code should look:
<a href="https://example.com">Example</a>Summary
Make sure that all URLs within href attributes are correctly formatted with both slashes following the protocol (https:// or http://).
The at symbol (@) should be percent-encoded as %40 in order to include it at an href attribute.
A <pattern> element has been found with an invalid ID. Check the format of the ID and ensure it does not start with a digit, full stop (.) or hyphen (-).
The <pattern> element is used within <svg> elements, which use XML 1.0 syntax. That syntax specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.
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 of the name attribute on an <iframe> should not start with an underscore (_).
Browsing context names that begin with an underscore are reserved keywords in HTML, like _blank, _self, _parent, and _top. Using these reserved names or any custom name starting with an underscore for the name attribute of an <iframe> can lead to unexpected behavior and is considered invalid HTML.
Here’s how to fix the issue:
Problematic Code
<iframe src="https://example.com" name="_example"></iframe>Solution
To resolve this issue, you should use a valid value for the name attribute that does not start with an underscore.
Corrected Code
<iframe src="https://example.com" name="example"></iframe>Steps:
- Identify the iframe element with the invalid name attribute value that starts with an underscore.
- Replace the name value with a valid identifier that does not start with _. Use letters, numbers, hyphens (-), and underscores (_) (but not at the beginning).
The novalidate attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the novalidate property.
This boolean attribute indicates that the form shouldn’t be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
Example:
<form method="post" novalidate>
<label>User Name:
<input name="user-name" autocomplete="name">
</label>
<button>Save</button>
</form>The W3C Validator issue you’re seeing is because the ping attribute on the <a> (anchor) element is supposed to contain a space-separated list of URLs to which, when the hyperlink is activated, the browser will send ping requests. The ping attribute must only contain proper “http” or “https” URLs, that is, relative URLs are not allowed.
Example of Incorrect Code
<a href="https://example.com" ping="/track">Visit Example</a>Examples of Correct Code
-
Proper Ping URL: Ensure the ping URL starts with http or https and is correctly formatted.
<a href="https://example.com" ping="https://example.com/track">Visit Example</a> -
Multiple URLs: If you have multiple URLs, they should be space-separated and each should be a valid URL.
<a href="https://example.com" ping="https://example.com/track https://example.com/another-track">Visit Example</a>
Common Mistakes to Avoid
- Using invalid URL schemes like mailto: or /relative-path.
- Including broken URLs or URLs with protocols other than http or https.
- Incorrectly formatting multiple URLs; they must be space-separated, not comma-separated or otherwise.
Note
The ping property is not effective in Firefox and its usage may be limited due to privacy and security concerns.
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>This error message indicates that there is a backslash (\) used in a URL, which is not a valid character for URL paths.
You’ll need to replace the backslashes with forward slashes (/) in the URL path segments.
Here’s an example of a correct img tag using a valid URL path:
<img src="https://example.com/img/small/photo.png" alt="example image">Also, make sure that the URL is correct and that the image file actually exists in the specified location.
The src attribute value is malformed, check that it doesn’t contain extraneous characters.
For example, this is invalid because the URL in the src attribute contains a space in between the https: and // parts:
<a href="https: //example.com">Some link</a>To fix this issue, you can try removing the space after “https:” in the URL in the src attribute:
<a href="https://example.com">Some link</a>The value provided on the type attribute of an a element is not a valid MIME type.
The type attribute expects a MIME type that hints at the linked URL’s format.