HTML Guide
The aria-required attribute is used to indicate to screen reader users that a form input is required. As there is now in HTML a general required attribute which works with most user agents, it’s unnecessary to use both at the same time. In general, you can rely solely on the required attribute, unless you want to provide backwards compatibility on old screen reader software versions.
Example:
<form action="order.">
<!-- This will raise a warning on unnecesary attributes -->
<input id="city" name="city" aria-required="true" required />
<!-- You can use this instead -->
<input id="city" name="city" required />
</form>
The autocomplete attribute is not valid on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.
A <meta> tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta> tag that is raising an issue because of bad context, caused by an <img> tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
</body>
</html>
If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>
The controlslist attribute on the <video> element is experimental, and not yet valid in the current HTML5 standard, so you should use it with caution as it may not be supported by all browsers.
The <span> element does not have a currency attribute. Consider using custom data attributes instead, like data-currency.
The attribute displayText is not allowed on <span> elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.
The <table> element does not accept a height attribute. Use CSS instead.
A <meta> element using the http-equiv attribute has been found in an unexpected place of the document. It should appear inside the <head> section, like in this example:
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<p>Content of the page</p>
</body>
</html>
The http-equiv attribute is used in web pages to simulate an HTTP response header. While HTTP response headers can be set from the server, not everyone has access to the server configuration, so an alternative is using <meta http-equiv> to define settings that would otherwise require setting an HTTP response header.
The most popular use of http-equiv are defining the content-type of the document as in the example above, although in HTML5 it’s preferred to use this instead:
<meta charset="UTF-8">
Another popular use of the http-equiv is setting an automatic reload of the web page, for example this will have the browser reload the page every 60 seconds:
<meta http-equiv="refresh" content="60">
However, refreshing a page automatically is a bad practice regarding accessibility, as users do not expect a page to do that, and doing so will move focus back to the top of the page, which may create a frustrating or confusing experience.
Other values that can be used with the http-equiv attribute include:
- content-security-policy
- content-length.
- content-encoding
- default-style
- window-target
Instead of using the isolang attribute to define the language of the document, you can use lang with an ISO 639-1 two character code.
For example, for Portuguese:
<html lang="pt">
labelledby is not a valid attribute for the <svg> element. Perhaps you meant aria-labelledby?
The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
Example:
<div id="myBillingId">Billing</div>
<div>
<div id="myNameId">Name</div>
<input type="text" aria-labelledby="myBillingId myNameId"/>
</div>
<div>
<div id="myAddressId">Address</div>
<input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>
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">
A <meta> tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta> tag that is raising an issue because of bad context, caused by an <img> tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
</body>
</html>
If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>
Check the syntax of the affected tag, it’s probably malformed and a < character inside has been interpreted as an attribute.
For example, this code might cause this issue:
<!-- Malformed img tag -->
<img src="photo.jpg" alt="smiling cat" < />
<!-- Fixed img tag -->
<img src="photo.jpg" alt="smiling cat" />
The ontouchstart attribute, used in devices with a touch screen, and not supported by all browsers, is not a valid attribute in the current HTML5 standard.
You can consider replacing it with the more generic onclick attribute, or still use it if you’re OK with its limitations.
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 placeholder attribute is used on <input> elements as text that appears in the form control when it has no value set. Only inputs of type email, number, password, search, tel, text, or url accept this attribute.
For example, an input of type hidden doesn’t accept a placeholder attribute as it makes no sense to specify text to appear when the input is empty, if that input is hidden.
The boolean required attribute can only be used with certain types of inputs. Check the input type is one of the allowed.
The required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.
The seamless attribute was proposed to be included in the HTML5 spec, but it wasn’t finally accepted, so it’s not a valid attribute for <iframe>.
The attribute st_title is not allowed on <span> elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.
The attribute st_url is not allowed on <span> elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText, st_url and st_title which were later changed to HTML5 custom data attributes.
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.
There is no attribute validate on the <form> element. Perhaps you meant novalidate?
If the novalidate attribute is present on a <form>, indicates that the form is not to be validated during submission.
For example, while this form has a required attribute on its input, it won’t be enforced because form validation has been disabled using novalidate:
<form novalidate>
<label>City: <input required name="city"></label>
<input type="submit" />
</form>
An attribute has been found in an element, where the intended value is missing. A common cause is including the equal sign, but not passing anything after it.
For example:
<!-- This is missing the value for the style attribute, so it's invalid -->
<p style=></p>
<!-- This is explicitly passing a blank string as the value, so it's valid -->
<p style=""></p>
Both xmlns:fb and xmlns:og attributes have been deprecated. If you’re using Facebook / Open Graph Protocol proprietary tags in you document, you can update the markup to the new syntax.