HTML Checking for Large Sites

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">

Learn more:

• MDN: minlength attribute

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 href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

Learn more:

• Wikipedia: percent-encoding

The max attribute on an <input> element does not accept an empty string.

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.

Learn more:

• MDN: max attribute

The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

Learn more:

• Wikipedia: percent-encoding

<input> elements can’t have a search role. Instead, try with <input type="search">.

<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently depending on the user agent.

The search role is a landmark. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. The search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. When a <form> is a search form, use the search role on the form.

Example of a search form:

<form role="search">
  <label for="search-input">Search this site</label>
  <input type="search" id="search-input" name="search">
  <input value="Submit" type="submit">
</form>

Learn more:

MDN: input type search MDN: ARIA search role

The value street-address cannot be used for attribute autocomplete on an <input> element. As this kind of autofill is oriented for multi-line inputs (as in the expected format for addresses), consider using a <textarea> element instead, like in this example:

<textarea name="address" autocomplete="street-address"></textarea>

Read more about the autocomplete attribute.

The value tel-national cannot be used on the attribute autocomplete of an <input> element of type tel. Either change to type="text", or use autocomplete="tel". Examples:

<!-- Using autocomplete "tel-national" on type "tel" is invalid -->
<input name="phone1" type="tel" autocomplete="tel-national" />

<!--Using autocomplete "tel-national" on type "text" is valid -->
<input name="phone2" type="text" autocomplete="tel-national" />

<!--Using autocomplete "tel" on type "tel" is valid -->
<input name="phone3" type="tel" autocomplete="tel" />

Read more about the autocomplete attribute.

Space characters are not allowed in href attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:

<a href="https://example.com#some term">invalid</a>
<a href="https://example.com#some%20term">valid</a>

The href attribute on an <a> tag contains an space, which is not allowed. Consider replacing space characters with “%20”.

Space characters are not allowed in src attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:

<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />

The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.

input elements can be of different types but zip is not one of the allowed. Consider using a generic type like text instead.

An HTML tag could not be parsed, most probably because of a typo.

A character has been found in the document that is not allowed in the charset encoding being used.

The document has been declared to use a windows-1251 charset but the actual contents seems to be utf-8. You should update the charset to that like in this example:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

The document could not be properly parsed due to malformed characters. Check the document encoding.

Read about Normalization in HTML and CSS.

The aria-hidden attribute is redundat on an input of type hidden, so it should be removed.

Example:

<!-- Instead of this... -->
<input type="hidden" aria-hidden="true" id="month" value="10" />

<!-- You can just use this -->
<input type="hidden" id="month"  value="10" />

An element with role=button can’t have an input element as descendant.

The ARIA role button can be added to an element to make it behave like a <button> – just like a <button> is not allowed to contain other <input> elements as descendants, any element with this role is not allowed to contain them either.

All these examples in the following code will raise a similar issue:

<div role="button">
  <input type="checkbox" />
</div>

<button>
  <input type="checkbox" />
</button>

<a>
  <input type="checkbox" />
</a>

Learn more:

HTML Spec: the button element MDN: ARIA button role

Read about Normalization in HTML and CSS.