HTML Guide

The id attribute of an HTML element, used to identify the element when linking, scripting or styling, must be unique in the whole document and must not contain whitespace.

Technically, in HTML5, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, _, and - should be used and the value for an id attribute should start with a letter.

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 attribute xmlns:serif is not valid. Check this guide for more information on this issue.

The attribute xmlns:serif is not a valid namespace. This attribute is set by Affinity Designer on SVG exports.

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>

The for attribute on a label element can’t be an empty string. This attribute is intended to specify which form element a label is associated with, and it must reference the ID of an existing form element. An empty string is neither a valid ID nor a meaningful association.

Explanation

• Invalid HTML: <label for=""></label>

The for attribute expects the value to be the ID of a form element, such as an input, textarea, select, etc.

How to Fix

1. Identify the Form Element: Find the form element (input, textarea, select, etc.) that the label is supposed to be associated with.
2. Assign an ID to the Form Element: Ensure the form element has a unique ID.
3. Modify the Label’s for Attribute: Set the for attribute of the label to match the ID of the form element.

Example

Before Fix

<form>
    <label for="">Username:</label>
    <input type="text" name="username">
</form>

After Fix

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</form>

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>