HTML Checking for Large Sites
Rocket Validator automatically scans your sites for accessibility issues using the W3C Validator,
hosted on our own servers and integrated into our web crawler.
HTML issues checked by Rocket Validator.
In order to define the charset encoding of an HTML document, both of these options are valid, but only one of them must appear in the document:
<!-- This is the preferred way -->
<meta charset="UTF-8">
<!-- This is the older way, also valid -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Read about specifying the character encoding
Rocket Validator checks HTML on your sites using the latest version of W3C Validator Nu HTML Checker, which is intended for HTML5 documents.
The page scanned is using an “almost standards mode” doctype, instead of the expected <!DOCTYPE html>. While the almost standards mode was used in the transition to HTML5, you should consider moving to the HTML5 standard.
Learn more about the “Almost standards mode”:
The only value admitted for the attribute content in a <meta http-equiv="X-UA-Compatible"> is currently IE=edge. You’re probably seeing this issue because the page being validated includes the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
As the Google Chrome Frame plugin was discontinued on February 25, 2014, this is longer supported so you should change that meta tag to:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
According to this article in Wikipedia:
Google Chrome Frame was a plug-in designed for Internet Explorer based on the open-source Chromium project, first announced on September 22, 2009. It went stable in September 2010, on the first birthday of the project. It was discontinued on February 25, 2014 and is no longer supported.
The plug-in worked with Internet Explorer 6, 7, 8 and 9. It allowed suitably coded web pages to be displayed in Internet Explorer by Google Chrome’s versions of the WebKit layout engine and V8 JavaScript engine.
You can read the official post about retiring Google Chrome Frame that was posted in June 2013.
Elements with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist.
An element with the tab role controls the visibility of an associated element with the tabpanel role. The common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
Example:
<div class="tabs">
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
</div>
</div>
Learn more at:
A button element cannot contain a descendant element with the attribute tabindex.
<img> tags, used to include images on a document, require an alt attribute to describe the contents of the image. This is essential for users that cannot see the image (like screen reader users), or as an alternate text when the image cannot be displayed. Example:
<img src="photo.jpg" alt="Person holding a cat" />
When nesting a select element inside a label that has a for attribute, the id attribute of the select is required to match it.
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.
When the select is inside the label, there’s no need to specify a for attribute as there can only be one select, as in this example:
<label>
Age
<select>
<option>young</option>
<option>old</option>
</select>
</label>
However, if the for attribute is specified, then it must match the id of the select like this:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
The <article> element can be used to define complete, self-contained compositions of a document, for example blog posts. Consider using a heading element (any of <h2> to </h6>) to present each article. Example:
<h1>Our blog</h1>
<article>
<h2>How to validate accessibility</h2>
<p>Use Rocket Validator for a in-depth scan</p>
</article>
<article>
<h2>How to monitor sites for accessibility</h2>
<p>Define schedules in Rocket Validator</p>
</article>
An HTML tag could not be parsed, most probably because of a typo.
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.
Learn more:
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.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using 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
An attribute could not be parsed from the HTML input, probably due to a typo. Check this guide for a related HTML issue.
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">
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 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 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.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using 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.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using 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.
Learn more:
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>
FBML - Facebook Markup Language was used to embed Facebook-specific tags on web sites, was retired in 2011 but this still appears on <html> tags on some sites. You should consider removing this from your site and use alternative ways to do that.
The < and > characters are reserved for HTML tags, so if you need to use them as content, they should be escaped as < and > respectively.
For example, to illustrate the mathematical truth that 1 < 2 in HTML, we can write it this way:
<p>1 < 2</p>
A start tag for <img> has been found inside a <noscript> section within the <head>, where it’s not allowed. Consider moving it to the <body> section.
The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
When JavaScript is disabled, the content inside <noscript> will be used instead, so this content must fit within its parent section. As an <img> tag is not allowed inside <head>, this will raise an issue. Instead, consider moving the <noscript> part to the <body> section.
This issue is often related to 3rd party tracking pixels like the Facebook or LinkedIn conversion tracking pixels. For example, the Facebook pixel instructions tell you to insert it like this:
<html>
<head>
<script>
...some script...
</script>
<noscript>
<img src="..." />
</noscript>
</head>
<body>
...
</body>
</html>
Instead, consider moving the <noscript> part inside the <body>, where the <img> makes sense to be inserted:
<html>
<head>
<script>
...some script...
</script>
</head>
<body>
...
<noscript>
<img src="..." />
</noscript>
</body>
</html>
Learn more:
The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. The element <ul> doesn’t accept this kind of role, consider using other element like <p> or <div>.
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user’s immediate attention.
Learn more about the alert ARIA role:
According to W3C, http-equiv value content-script-type attribute is unknown for HTML5 meta markup.
Learn more:
According to W3C, http-equiv value content-style-type attribute is unknown for HTML5 meta markup.
Learn more:
The action attribute on a <form> element is not a required attribute, but if specified, must be a valid, non-empty URL. For example:
<form action="register.php">
</form>
The id attribute is used to identify a single element within a document, it’s not required, but if used it must be unique, and must not be an empty string.
An <iframe> element allows to embed an HTML document inside another HTML document, and its src attribute is indicated the source URL of the embedded web page. The src attribute is a required attribute, so it cannot be blank.
Example:
<iframe src="https://example.com/map.html"></iframe>
Learn more:
The src attribute for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />
The target attribute on <a> elements can’t be blank.
This attribute defines the browsing context for links, that is, where should the linked documents be opened. This was used extensively on the now deprecated <frame> element, so you could give the name of the frame to open the document in, but is now more used to force links to open in a separate tab or window using target="_blank". Another option is using a name, so the new browsing context can be referred to on subsequent clicks on links with the same target.
For example, this will force the links to open on a new tab:
<a href="https://example.com" target="_blank">will open a blank tab</a>
Learn more:
<a> tags can be used to link to an email address using the mailto protocol in the href attribute. Ensure that there is no space in the email address.
<a href="mailto: liza@example.com">This is wrong as it contains an space</a>
<a href="mailto:liza@example.com">This is OK</a>
<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:
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.
A <meta> tag has been found in the document stating that the charset is windows-1251, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
A <meta> tag has been found in the document stating that the charset is windows-1252, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
The coordinates specified for an <area> element using the coords attribute are not in a valid format.
- For a rectangle (shape="rect"), the format X1,Y1,X2,Y2 is expected, where the top-left corner is specified by X1, Y1 and the bottom-right corner is specified by X2, Y2, therefore X1 must be lower than X2, and Y1 must be lower than Y2 because the coordinates 0, 0 start at the top-left.
- For a polygon (shape="poly"), the format X1,Y1,X2,Y2,...,Xn,Yn is expected to contain a list of coordinate pairs (at least 3, for a triangle).
- For a circle (shape="circle"), the format X,Y,R is expected where X, Y represents the coordinates of the center of the circle (from the top-left corner), and R is the radius.
Read more about the <area> element:
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 <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.
Check the iframe spec.
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/?s=some term">invalid</a>
<a href="https://example.com/?s=some%20term">valid</a>
The href attribute on an <a> tag contains an space, which is not allowed. Consider replacing space characters with “%20”.
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a % that has not been properly encoded to %25 which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<a href="https://example.com?width=48%">link</a>
<!-- This is valid as the percentage sign has been encoded as %25 -->
<a href="https://example.com?width=48%25">link</a>
Read more about the URI spec
An <iframe> element allows to embed an HTML document inside another HTML document, and its src attribute is indicated the source URL of the embedded web page. The query part of that URL contains one or more space characters, which are not allowed, for example:
<iframe src="https://maps.google.it/maps?q=2700 6th Avenue"></iframe>
You should properly escape all space characters as %20 like this:
<iframe src="https://maps.google.it/maps?q=2700%206th%20Avenue"></iframe>
Learn more:
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“.
The <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.
Check the iframe spec.
<img> elements accept a width attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS:
<img src="photo.jpg" alt="red car" style="width:100%;">
The width attribute on <img> elements expects a digit to indicate the number of pixels. Ensure that this attribute contains only digits.
For example:
<!-- This is invalid because width is not a digit -->
<img width="225px" alt="cat" src="cat.jpg" />
<!-- This is valid -->
<img width="225" alt="cat" src="cat.jpg" />
input elements can be of different types but zip is not one of the allowed. Consider using a generic type like text instead.
Always use a language attribute on the <html> tag to declare the default language of the text in the page, using the lang property.
Example:
<html lang="fr">
Learn more:
The HTML <h1> to <h6> elements represent headings for the different sections of a document, where <h1> is the highest section and <h6> is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1> in this way:
<section class="about">
<article>
<h1>Article heading</h1>
<p>Lorem</p>
</article>
</section>
this will raise a warning as it would be preferrable for example to leave the <h1> for the heading of the <section>, and <h2> for the heading of the article, like this:
<section class="about">
<h1>About heading</h1>
<article>
<h2>Article heading</h2>
<p>Lorem</p>
</article>
</section>
Learn more:
A CSS definition for background-image could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.
The specified CSS filter is not a standard one, and may only work in some browsers.
Check out the Filter Effects W3C Working Draft
Padding properties, unline margin properties, don’t accept negative values. Read more about the CSS box model
CSS styles could not be parsed, check the indicated line to find what caused the parser to fail. Common causes are unclosed curly brackets or comments, missing semicolons or unexpected or empty properties.
Read more about CSS: Cascading Style Sheets syntax
A CSS definition for an X property could not be understood by the parser. Check it to ensure that it’s well formed and that it contains an appropriate value.
Attributes in HTML elements must be unique. For example, <a id="one" id="two"> is invalid as the attribute id is repeated.
The id attribute is used to identify a single element within a document, and is required to be unique. Check the document for repeated IDs.
A <div> element is using ARIA attributes, but its role has not been defined. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Examples:
<!-- This div uses ARIA but its role is not clear, so it's invalid. -->
<div aria-expanded="true">...</div>
<!-- This div defines clearly its role, so it's valid. -->
<div role="navigation" aria-expanded="true">...</div>
<!-- Nav elements have an implicit navigation role so we don't need the role attribute. -->
<nav aria-expanded="true">...</nav>
Read about Using ARIA: Roles, states and properties.
A <div> tag has been found as a direct child of an <ul> tag, and this is not allowed. For example, <ul><div><li>item</li></div></ul> is not valid, but <ul><li><div>item</div></li></ul> is valid as the direct child of <ul> is <li>.
The <head> section of an HTML document contains metadata about the document, and as a minimum it must include a <title> tag defining the document title.
Common causes for this issue are forgetting to define the <title>, or duplicated <head> sections where one of them does not include the title.
Here’s an example of a minimal HTML document including the title:
<!DOCTYPE html>
<html>
<head>
<title>Don't panic! This is the title</title>
</head>
<body>
<p></p>
</body>
</html>
<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.
A <meta> tag has been found that is missing its required content. Example of a valid meta tag:
<meta name="description" content="Description of the page" />
A <meta> element without a itemprop or property attributes has been found in an unexpected place.
While the <meta> element is commonly used within the <head> section of the document, it can also be used within the <body> section, for example in the context of defining microdata, as in this example:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>
When used within the <body> section, the <meta> element is required to have a itemprop or property, and a content attribute, and it can’t have a http-equiv or charset attribute.
A common cause for this issue is including a <meta> element that was intended for the <head> section (for example one containing a http-equiv attribute in the <body> , for example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
...
</form>
Learn more:
An HTML tag could not be parsed, most probably because of a typo.
Drop-down lists can be defined in HTML by using the <select> tag, containing the different <option>s. Each <option> must have a name, which can be either contained between <option> and </option>, or alternatively using the label attribute.
Example:
<select name="size">
<option value="s">small</option>
<option value="m" label="medium"></option>
</select>
The element X requires an attribute Y, but it’s not present. Check that element and add the required attribute, like in <X Y="value" />.
The element X is not allowed as a child element of Y. For example, a <ul> element cannot have a <div> child element.
The <h1> through <h6> elements are headings for the sections with which they are associated. They should not be empty, for example <h1></h1> is invalid.
An </a> end tag has been found to violate nesting rules. <a> tags can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>
The <br> tag inserts a line break, and it’s self-closing so you can use either <br> or <br /> but </br> is invalid.
First line<br>
Second line<br />
Third line is invalid</br>
A closing </body> tag has been found, but there are unclosed elements before it. For example this has an unclosed <section> element:
<body>
<section>
</body>
An end tag has been implied from the context, but there were open elements. Check other issues in the same document for open tags that need to be closed.
For example, the following will raise a “end tag li implied” issue, because the span element inside the li has not been properly closed.
<ul>
<li><span>text<li>
</ul>
Instead, this is correct:
<ul>
<li><span>text</span><li>
</ul>
A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.
A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.
For example:
<li>
<span>example
</li>The above is invalid because you need to close the <span> tag before you close the <li>.
This would be valid:
<li>
<span>example</span>
</li>An end tag </strong> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <strong> tag was closed before the nested <a> tag -->
<strong><a href="#">link</strong></a>
<!--- This line is OK as every end tag respects the nesting rules -->
<strong><a href="#">link</a></strong>
Your HTML markup contains an end tag for X, but there are nested open elements that need to be closed first. For example, <li><span>example</li> is invalid because you need to close the <span> tag before you close the <li>. This would be valid: <li><span>example</span></li>.
Attribute values for HTML elements must be enclosed within quotes. Check for attributes whose values are missing quotes.
Example:
<!-- These are invalid -->
<div class=important></div>
<div class=important"></div>
<!-- This is valid -->
<div class="important"></div>
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 label element may only contain one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
In HTML5 you’re encouraged to use Unicode (UTF-8) character encoding rather than a legacy character encoding such as Latin1 (Windows-1252 or ISO 8859-1).
In short, it can be just a matter of using <meta charset="utf-8"/> in your document, but you should also ensure that your pages are also saved and served as UTF-8.
<meta> tags, used for defining metadata about HTML documents, must appear within the <head>...</head> section, but it has been found out of place. Check the document structure to ensure there are no <meta> tags outside the head section.
A common cause of this issue is having a duplicated, out of place <head>...</head> section. Ensure that this section appears in its proper place and is the only container for <meta> tags.
An end tag </p> has been found that cannot be matched for an opening tag <p>. Most of the times this is due to closing the same tag twice, for example:
<p>some text</p></p>
Attributes in HTML elements need to be separated by space, in this example the first line is invalid and the second one is valid:
<a href="page.php"class="big">link</a>
<a href="page.php" class="big">link</a>
And end tag for element X has been found with no corresponding opening tag for it. Most of the times this is due to closing the same tag twice.
Rocket Validator checks HTML on your sites using the latest version of W3C Validator Nu HTML Checker, which is intended for HTML5 documents.
The page scanned is using an obsolete doctype, instead of the expected <!DOCTYPE html>.
Learn more:
Quote characters used for attributes can use either single quotes (') or double quotes ("), and they must be properly matched, for example:
<p class="news">...</p>
A common cause for this issue is forgetting to use the equal sign (=), so the HTML parser wrongly believes the quote forms part of the attribute name, for example:
<p class "news">this is wrong</p>
A tag starting with <? has been found within the document, but it’s not supported. Probable causes can be:
- Copy-pasting the contents of an SVG file. If you do that, you should only paste the <svg>...</svg> part, but not the first line with <?xml...>.
- Unprocessed <?...> tags on server scripting languages like PHP, like <?php>
Learn more:
- [freeCodeCamp: How to Use SVG Images in CSS and HTML]https://www.freecodecamp.org/news/use-svg-images-in-css-html/)
Attributes for HTML elements must be defined like name="value". A common issue is missing the =, or repeating the " like in these examples:
<!-- Missing equal sign -->
<p name "value"></p>
<!-- Repeated quotes -->
<p name="value""></p>
The <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:
<h1>All about guitars</h1>
<section>
<h2>Guitar types</h2>
<p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
<h2>Amplifiers</h2>
<p>Analog, digital, portable...</p>
</section>
A slash character (/), normally used for self-closing tags, has been found in an unexpected place for a tag, and the validator has decided to ignore it and treat is as a start tag instead.
HTML tags can go in pairs (start tag, end tag) or be self-closing, for example:
<p>This is a paragraph with a start and end p tag</p>
<img src="image.jpg" alt="This is an image with a self-closing tag" />
In HTML5, the ending slash and the preceding space is optional for self-closing tags so all of these are valid:
<img src="image.jpg" alt="This is an image with a self-closing tag" />
<img src="image.jpg" alt="This is an image with a self-closing tag"/>
<img src="image.jpg" alt="This is an image with a self-closing tag">
A common mistake is including a slash tag on a start tag, as in the following example. If the Nu HTML checker encounters that, it will ignore the slash and just treat the tag as a start tag.
<select />
<option value="1">one</option>
</select>
An <a> tag can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>
An opening <body> tag has been found in an incorrect place. Check that it appears only once in the document, right after the closing </head> tag, and that the whole document content is contained within <body> and </body> tags.
HTML documents are expected to start with a first line containing the Document Type Declaration, that defines the HTML version used. Since HTML5, it’s just <!DOCTYPE html>, which must appear before the start <html> tag.
Here’s an example of a minimal HTML5 document:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
All HTML documents must start with a <!DOCTYPE> (Document Type Declaration), that informs browsers about the type and version of HTML used to build the document. In HTML5, this is simply <!DOCTYPE html> and must appear at the start of the document.
Here is an example of a minimal HTML document, including the Document Type Declaration at its start:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
An end tag for X has been found that does not correspond to a previous open tag. This usually happens when you close the same tag twice, for example:
<ul>
<li>item</li>
</ul>
</ul>
A <head> start tag has been found in an unexpected place in the document structure. Check that the <head> section appears before the <body> section, and that is not duplicated.
The <head> section of an HTML document is the container of metadata about the document, and must appear before the <body> section. A common cause of this issue is duplicated <head> sections.
Here is an example of a minimal HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
A stray start tag <html> has been found in the document. As this tag defines the start of the whole HTML document, it should appear only once.
<iframe> tags are used to embed another document within the current document. To indicate the contents of that nested document, you can either use the src attribute with an URL, or directly provide the contents with the srcdoc attribute. Examples:
<!-- This will embed a document by its URL -->
<iframe src="https://example.com"></iframe>
<!-- This will embed the contents provided in the srcdoc attribute -->
<iframe srcdoc="<p>some content</p>"></iframe>
<!-- This is invalid -->
<iframe><p>some content</p></iframe>
The <ul> element is used to define unordered lists, where each element must be contained within a <li> element, like in this example:
<ul>
<li>first element</li>
<li>second element</li>
<li>third element</li>
</ul>
Ensure that there’s no content inside the <ul> element that is not contained within a <li> element.
Sometimes this error comes when trying to give a title to the list, for example:
<ul>
Fruits
<li>Apple</li>
<li>Orange</li>
</ul>
Instead, that title text should be outside the list, like:
<span>Fruits</span>
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Other times, this can come as the concatenation of <li> elements which results in something like:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Note how in this case that used to join the <li> is causing the problem, as it’s content that is not contained by a <li> element, as required by the <ul> element.
Learn more:
Read about Normalization in HTML and CSS.
The old <acronym> element in previous versions is now obsolete, in HTML5 you must use <abbr> instead.
Learn more:
<td> elements no longer accept an align attribute. This can be achieved using CSS like this:
<td style="text-align:center;">content</td>
The aria-controls attribute identifies an element or elements in the same document whose contents or presence are controlled by the current element. It must point to existing elements by their ID. Check that the IDs contained in that property exist within the same document.
ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region, for example:
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
Learn more:
The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It should reference an existing ID on the same document, but that id was not found.
<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:
<img src="..." alt="..." style="border:0;" />
The <center> tag is no longer valid in HTML, you should use CSS instead, for example:
<p style="text-align:center">this text will be centered</p>
Using the <aside> element will automatically communicate a section has a role of complementary, so specifying the role="complementary" is redundant.
A <footer> can’t include other <footer>s inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.
A <label> element cannot contain other <label> as a descendant. Check for nested elements or closing tags that may have been misinterpreted, for example:
<label>name</label></label>
The <caption> element specifies the caption (or title) of a table. It’s not allowed for a <caption> to contain another table.
<select> elements that are required and are not multiple need a placeholder option that has no value, for example:
<select required>
<option value="">choose size</option>
<option value="s">small</option>
<option value="l">large</option>
</select>
Element IDs in an HTML document must be unique. The HTML validator is indicating the first occurrence of an ID that is repeated. Check the details for that issue to see web pages affected, and the elements within them, to fix that ID repetition.
The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.
For example, you can define a font size of 12px, bold text with inline styles like this:
<p style="font-size: 12px; font-weight: bold;">some text</p>
Learn more about CSS fonts:
A single <img> element is used to embed an image, so adding the img role to it is redundant.
The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:
<div role="img" aria-label="Description of the overall image">
<img src="graphic1.png" alt="">
<img src="graphic2.png">
</div>
Learn more:
The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the form control. This attribute is not supported in all browsers, so it’s advised to use with caution and consider alternatives for older browsers.
An itemprop attribute has been found in the document, but it cannot be associated to any item. Most probable cause is the lack of an itemscope attribute defining an item.
Microdata allows nested groups of properties, which must be scoped to the item they belong to, as in this example:
<div itemscope>
<p>My name is <span itemprop="name">Liza</span> and I'm <span itemprop="age">48</span> years old.</p>
</div>
The label element may contain only one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
The <script> tag allows authors to include dynamic scripts and data blocks in their documents. This tag accepts two optional attributes, type (which is unnecessary if it’s JavaScript, as that’s the default), and src to indicate the URL of the external script to use.
The language attribute is now obsolete and should not be used.
Read more about:
In the days before HTML5, named anchors were used as a way to provide a link to a specific section of a document, for example:
<h2>
<a name="section-5">Section 5</a>
</h2>
Now in HTML5, the name attribute is obsolete for <a> tags, and instead, you can use the id attribute of any element (not just <a>) as a way to navigate directly to it, for example:
<h2 id="section-5">Section 5</h2>
Read more about:
The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using role="navigation", but instead it’s preferable to just use the <nav> element. In that case, it’s unnecessary to make the navigation role explicit. Examples:
<div role="navigation">
<!-- this is a valid way to define a navigation role -->
</div>
<nav>
<!-- but this is shorter and uses correct semantic HTML -->
</nav>
Read more about the nav element and the ARIA Navigation Role.
The sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images, therefore it’s not valid if srcset is missing. Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset and sizes attributes.
The default type for <script> tags is JavaScript, so you don’t need to include the type for JS resources.
<td> elements no longer accept a valign attribute. This can be achieved using CSS like this:
<td style="vertical-align:middle;">content</td>
<label> tags are used to label inputs in form, which need to be present and visible in the document, for example:
<label for="age">Age</label>
<input id="age" />
In HTML5, there’s no need to specify the version attribute - it is now obsolete. Here’s an example minimal HTML document to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
Learn more:
Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:
<table style="width:100%;">
<tr>
<td style="width:50px;">Name</td>
</tr>
</table>
You’re using an attribute X that is no longer valid for element Y, but you can use CSS to achieve the same effect.
Based on the content of the document, the W3C validator thinks that it’s written in English. Consider explicitly specifying the language using the lang property.
Example:
<html lang="en">
Learn more:
A <span> tag has not been closed. Example:
<p><span>I'm forgetting something</p>
<p>Life goes on</p>
An open tag has not been properly closed.
Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset and sizes attributes.