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.
Spaces are not permitted in the href value for phone links; the phone number must be a continuous string without spaces or slashes.
The href attribute of an anchor (<a>) element defines the link’s destination. For phone numbers, the proper URI scheme is tel:, not callto:. According to the HTML standard and the WHATWG Living Standard, the phone number should contain only digits and may use plus (+) or hyphen (-) characters for formatting, but it should not include spaces or slashes.
Incorrect HTML:
<a href="callto:07142/ 12 34 5">Call us</a>Correct HTML:
<a href="tel:0714212345">Call us</a>With country code and optional formatting:
<a href="tel:+49714212345">Call us</a>For best compatibility and validation, always use the tel: scheme and ensure the phone number string contains only allowed characters.
The value contact is not a valid option for the autocomplete attribute on an <input> element.
The dialog element does not require or permit a role="dialog" attribute according to HTML standards.
The <dialog> element has an implicit ARIA role of dialog, so adding role="dialog" is redundant and not valid per the specification. Instead, simply use the <dialog> element without an explicit role attribute.
Details:
According to the WHATWG HTML standard and ARIA specification, native <dialog> elements automatically have the correct role. Adding role="dialog" can cause HTML validation errors, as the validator interprets this as a misuse or redundancy.
Correct usage:
<dialog>
<p>This is a dialog box.</p>
<button>Close</button>
</dialog>Incorrect usage (causes validation error):
<dialog role="dialog">
<p>This is a dialog box.</p>
<button>Close</button>
</dialog>Removing the role="dialog" attribute resolves the W3C validation issue while maintaining accessibility.
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>Empty aria-controls attribute values are invalid; the attribute must reference the id of one or more elements.
The aria-controls attribute is used to indicate that the element controls the referenced element(s) by their id. According to the ARIA specification and W3C HTML standard, the attribute must contain at least one valid id value, and cannot be an empty string. Leaving aria-controls="" triggers a validation error.
Correct Usage:
- Assign an id to the element being controlled.
- Set the aria-controls attribute to match that id.
- Remove aria-controls entirely if not necessary.
Incorrect Example:
<a href="#" aria-controls="">Toggle</a>Corrected Example:
<div id="details">Some details...</div>
<a href="#" aria-controls="details">Toggle</a>If no element is being controlled:
<a href="#">Toggle</a>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>Spaces in the URL fragment are invalid; encode them or remove them (e.g., use %20 or hyphens/underscores).
The href attribute must contain a valid URL. When using a fragment identifier (the part after #), it must follow URL syntax rules: no unescaped spaces. Fragments usually reference an element’s id. An element’s id must be unique and is case-sensitive; while spaces aren’t allowed in id values, many authors accidentally mirror text with spaces in the fragment. Use hyphens or underscores in ids and match the fragment, or percent-encode reserved characters. Prefer readable, dash-separated ids for accessibility and shareable links.
For example, instead of href=”#My Section”, use href=”#my-section” and set id=”my-section” on the target. If you must preserve spaces in a generated URL, encode them as %20, but it’s better to avoid spaces entirely in ids.
HTML Examples
Invalid: reproduces the validator error
<!doctype html>
<html lang="en">
<head>
<title>Fragment with space</title>
</head>
<body>
<a href="#My Section">Go to section</a>
<h2 id="My Section">My Section</h2>
</body>
</html>Fixed: use a valid fragment and id
<!doctype html>
<html lang="en">
<head>
<title>Valid fragment</title>
</head>
<body>
<a href="#my-section">Go to section</a>
<h2 id="my-section">My Section</h2>
</body>
</html>Alternatively, encoding the space also passes validation, though less ideal as the id would be invalid because it contains spaces:
<a href="#My%20Section">Go to section</a>
<h2 id="My Section">My Section</h2>The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The pipe character | is not permitted in the query component of a URL in the href attribute of an a element.
According to the WHATWG and W3C HTML specifications, URLs in attributes such as href must be valid and properly encoded. The pipe character | is not a valid character in the query string of a URL unless it is percent-encoded as %7C. Failing to encode it will cause validation errors. This is especially important for interoperability and security across browsers and user agents.
Incorrect example (invalid href with pipe):
<a href="https://example.com/search?q=test|demo">Invalid link</a>Correct example (pipe character encoded):
<a href="https://example.com/search?q=test%7Cdemo">Valid link</a>Always encode special characters such as | in URLs used within HTML attributes to ensure your documents validate and behave consistently.
Space characters are not permitted in the value of the href attribute; they must be properly percent-encoded.
The href attribute specifies a URL, and URLs must follow specific syntax rules defined by RFC 3986. Spaces and some other characters are considered illegal in URLs. To include a space in the URL, use the percent escape sequence %20 in place of the space character.
Incorrect example with an illegal space in the query string:
<a href="search.html?q=my search">Search for 'my search'</a>Correct example using percent-encoding for the space:
<a href="search.html?q=my%20search">Search for 'my search'</a>Replace all spaces in URLs within href attributes with %20 to ensure W3C validation and proper browser behavior.
Square brackets ([, ]) are not allowed unescaped in the query part of an href URL value.
The href attribute in the <a> element must contain a valid URL. According to the URL standard, certain characters, including square brackets, are not permitted directly in the query component unless percent-encoded. Using unescaped square brackets in the URL can cause validation errors and unexpected behavior in browsers.
To include a square bracket in the query string, use percent encoding:
- [ encodes to %5B
- ] encodes to %5D
Incorrect usage:
<a href="search.html?q=[value]">Search</a>Correct usage:
<a href="search.html?q=%5Bvalue%5D">Search</a>This ensures the URL is valid and compliant with HTML standards.
The href attribute of the a element contains an invalid backslash character, which is not permitted in URLs.
According to the WHATWG HTML living standard, the href attribute must contain a valid URL. URLs use forward slashes (/) for path separators, and backslashes are not allowed as they can cause browsers and validators to misinterpret the address. Backslashes often arise when file paths are copied from Windows environments.
Correct Usage:
- Always use forward slashes / in your URLs.
- Remove any backslashes from href values.
Example of incorrect usage:
<a href="images\picture.jpg">View Picture</a>Corrected example:
<a href="images/picture.jpg">View Picture</a>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.
Remove the empty maxlength and provide a valid non‑negative integer, or omit maxlength entirely.
The maxlength attribute limits the number of characters a user can enter. It must be a valid non-negative integer (0, 1, 2, …). An empty string, whitespace, or non-numeric value fails validation. When maxlength is omitted, the length is unlimited. When set to 0, no characters can be entered. The value applies to the textarea element itself, not its content.
Common fixes:
- Set maxlength to a concrete number like 200.
- If you don’t need a limit, remove the attribute.
- Ensure templating doesn’t output an empty attribute (e.g., maxlength="").
HTML Examples
Invalid example (reproduces the validator error)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid maxlength</title>
</head>
<body>
<form>
<label for="msg">Message</label>
<textarea id="msg" name="message" maxlength=""></textarea>
</form>
</body>
</html>Fixed example (valid integer or omit attribute)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid maxlength</title>
</head>
<body>
<form>
<label for="msg">Message (max 200 chars)</label>
<textarea id="msg" name="message" maxlength="200"></textarea>
</form>
</body>
</html>Empty name attributes on <a> are invalid; an anchor’s name/id must be a non-empty unique identifier.
Historically, the name attribute on <a> was used to create fragment targets (e.g., <a name="top"></a>). In HTML5/living standard, fragment navigation should use the id attribute instead. The name attribute on <a> is obsolete for this purpose, and an empty string is never allowed for identifiers.
Use id with a non-empty value to create link targets, and point to them with href="#idValue". If you keep name for legacy reasons, it must still be non-empty and match the HTML syntax for valid IDs. Avoid adding empty attributes like name="" or id="". Also ensure uniqueness of each id in the document.
HTML Examples
Example causing the validator error
<!doctype html>
<html lang="en">
<head>
<title>Anchor name error</title>
</head>
<body>
<a name=""></a>
<a href="#"></a>
</body>
</html>Corrected example using id (recommended)
<!doctype html>
<html lang="en">
<head>
<title>Anchor id fix</title>
</head>
<body>
<a id="top"></a>
<a href="#top">Back to top</a>
</body>
</html>The name attribute is required for all input elements.
Illegal character “[” in the iframe src URL requires percent-encoding or removal.
The iframe element’s src must be a valid URL. According to URL syntax, characters like [ and ] are not allowed in the query unless percent-encoded. If your src contains array-like parameters (e.g., filters[category]=news), encode reserved characters: [ becomes %5B and ] becomes %5D. Avoid spaces and encode other reserved characters as needed. Alternatively, adjust the server to accept dot or bracketless notation (e.g., filters.category=news or filters_category=news) so the URL stays valid without encoding.
HTML Examples
Example causing the validator error
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Error</title>
</head>
<body>
<!-- [ and ] are illegal in URLs unless encoded -->
<iframe src="https://example.com/embed?filters[category]=news&filters[tags]=web"></iframe>
</body>
</html>Fixed example with percent-encoding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Fixed</title>
</head>
<body>
<!-- Encode [ as %5B and ] as %5D -->
<iframe src="https://example.com/embed?filters%5Bcategory%5D=news&filters%5Btags%5D=web"></iframe>
</body>
</html>A fragment identifier (the part after #) is not allowed in a data: URL used in an img src.
The img element accepts any valid URL in the src attribute, including data URLs per RFC 2397. However, RFC 2397 forbids fragment identifiers in data: URIs.
If you need to reference an internal fragment (e.g., an SVG symbol or id), use one of these approaches:
- Inline the SVG in the DOM and reference its ids normally.
- Put the SVG in a separate file and use a standard URL with a fragment (example.svg#icon).
- Remove the fragment from the data: URL and ensure the content renders without fragment navigation.
The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
Ensure the src attribute on the script element is non-empty and points to a valid resource.
The src attribute in a script element specifies the URL of an external script file. An empty src attribute is invalid because it tells the browser to fetch a resource from a URL that is not provided, leading to loading errors. Instead, ensure that the src attribute contains a valid file path or URL to an existing script file. If the script content is meant to be inline, you should omit the src attribute altogether and include the script content directly within the script element.
Example of a Valid External Script
Here is a valid example of a script element with a non-empty src attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Script Example</title>
</head>
<body>
<script src="path/to/script.js"></script>
</body>
</html>Example of a Valid Inline Script
If the script is to be written inline, exclude the src attribute and write the JavaScript code directly within the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Script Example</title>
</head>
<body>
<script>
console.log('This is an inline script.');
</script>
</body>
</html>Troubleshooting
Double-check the script’s file path:
- Ensure the file path you provide in the src is correct relative to the HTML file.
- Make sure the script file exists in the location specified.
- If using a network URL, verify that the URL is correct and accessible.
srcset contains candidates without a width descriptor while sizes is present, so each candidate must use a width (w) descriptor.
When an img has sizes, every srcset candidate must include a width descriptor like 320w, not a pixel density descriptor like 1x. Mixed descriptors are not allowed in the same srcset. Use either:
- Width descriptors with sizes (e.g., 320w, 640w, 1024w)
- Density descriptors without sizes (e.g., 1x, 2x)
The browser uses sizes to map CSS layout width to the best w candidate. Without sizes, density (x) can be used, but not together with sizes.
HTML examples
Reproduce the issue (invalid: sizes + x descriptors)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Fix using width descriptors with sizes (valid)
<img
src="photo-640.jpg"
srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Alternative fix: remove sizes and use density descriptors (valid)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
alt="Sample photo">