HTML Guide
XML 1.0 names, typically used for the id attribute of elements, must comply with specific constraints, such as:
-
Must start with a letter or underscore
_ -
Subsequent characters can be letters, digits, hyphens
-, underscores_, and periods. - Cannot contain any spaces or special characters
Here’s an example of an invalid name for an ID:
<svg>
<g id="Group 270">
<!-- Content inside the group element -->
</g>
</svg>This can be fixed by avoiding whitespace inside the name, like this:
<svg>
<g id="group-270">
<!-- Content inside the group element -->
</g>
</svg>
In this example, the id attribute value Group 270 has been changed to group-270 to follow the rules for XML 1.0 names.
Learn more:
Related W3C validator issues
Remove the xmlns:o attribute from your HTML elements.
When working with HTML documents intended for the web, often using namespaces like in XML documents may result in validation issues under specific standards like the W3C HTML validator. The xmlns:o attribute is typically associated with XML or XHTML documents and may not align with HTML5’s requirements, causing serialization issues in environments expecting XML 1.0 compliance. These attributes are often seen in documents meant to incorporate Microsoft Office-specific XML schemas—information that HTML5 doesn’t require or recognize.
For HTML5 documents, consider restructuring the content to avoid unnecessary XML namespace attributes. HTML5 has evolved away from strict reliance on XML, focusing instead on a more simplified model.
Example:
Before:
<!DOCTYPE html>
<html xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>After:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>By removing the xmlns:o attribute, the document aligns with HTML5 standards without the unnecessary constraints of XML namespaces.
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>The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.