HTML Checking for Large Sites

The <script> tag allows authors to include dynamic scripts and data blocks in their documents. When the src is present, this tag accepts a type attribute which must be either:

• an empty string
• text/javascript (that’s the default, so it can be omitted)
• module

Examples:

<!-- This is valid, without a type it defaults to JavaScript -->
<script src="app.js"></script>

<!-- This is valid, but will warn that it can be omitted -->
<script type="text/javascript" src="app.js"></script>

<!-- An empty attribute is valid, but will warn that it can be omitted -->
<script type="" src="app.js"></script>

<!-- The module keyword is also valid as a type -->
<script type="module" src="app.js"></script>

<!-- Any other type is invalid -->
<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>

Learn more:

• HTML Spec: the script element
• MDN: the script element

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 <textarea> element does not have a type attribute.

The HTML <textarea> element represents a multi-line plain-text editing control, and is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Learn more:

• HTML Living Spec: textarea
• MDN: textarea

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 value rocketlazyloadscript used in a <script> tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.

Learn more:

• WP Rocket: W3C Validation errors
• HTML Spec: Script type
• MDN: Script element

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

The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:

<input name='file' type='file' accept='doc, docx, pdf' />

<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />

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.

Read more:

• MDN: type attribute on a
• MDN: common MIME types

The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:

<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>

That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.

<a href="/order.php" type="button">Submit</a>

Learn more:

• HTML Spec: the type attribute

The value used to define the type of a link is not valid. You’re probably using a URL instead of a valid type.

Example of a valid type:

<link rel="icon" type="image/png" href="favicon.png">

Read more:

• HTML Spec: link types

The specified type for an script element is not a valid MIME type as it’s missing a subtype.

A MIME type most-commonly consists of just two parts: a type and a subtype, separated by a slash (/) — with no whitespace between, for example:

text/javascript

Learn more:

• MDN: Structure of a MIME type
• HTML Spec: the script element
• MDN: the script element

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

The HTML <style> element contains style information for a document, or part of a document, defined in CSS. This element does not need the type attribute anymore, so it should be omitted.

For example, this style defines that <p> elements should be in red color.

<style type="text/css">
p {
  color: red;
}
</style>
<p>This text will be red.</p>

But, the type attribute is not used anymore, so we can just use this:

<style>
p {
  color: red;
}
</style>
<p>This text will be red.</p>

Read more:

• MDN: The Style information element
• WordPress plugin: Type Attribute Warnings Removal

The default type for <script> tags is JavaScript, so you don’t need to include the type for JS resources.