HTML Guide
The <meta charset> is expected to appear at the beginning of the document, within the first 1024 bytes. Consider moving it to the beginning of the <head> section, as in this example:
<head>
<meta charset="utf-8">
...
</head>A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. For HTML documents, the standard way to declare a document character encoding is by including a <meta> tag with a charset attribute, typically <meta charset="utf-8">.
According to the W3C standard:
The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.
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">The <meta charset> tag, used to define the character encoding, must appear only once in a document, within the <head> section.
There can only be one visible <main> element in a document. If more are needed (for example for switching between them with JavaScript), only one can be visible, the others should be hidden toggling the hidden attribute.
Example of 2 main elements, where only one is visible:
<main>
<h1>Active main element</h1>
<!-- content -->
</main>
<main hidden>
<h1>Hidden main element</h1>
<!-- content -->
</main>A <link> element has been found in an invalid body context. Check the attributes of the <link> element and ensure it’s not within the <body> section.
If the element is within the <head> section, it may have been interpreted as a body context depending on previous elements. For example, while this <link> element is valid per se and is in the <head> section, it is deemed invalid because the previous <img> element made the validator consider it a body context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<link rel="canonical" href="https://example.com/" />
</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>
<link rel="canonical" href="https://example.com/" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>A <link> element that is using the preload value in the rel attribute is missing the as attribute, used to indicate the type of the resource.
The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.
The as attribute specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.
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.
According to the HTML specification, text must not contain control characters other than space characters.
In particular, the control character 
escapes the Unicode control character “CARRIAGE RETURN” are not allowed.
An alternative is using the character reference which escapes the Unicode control character “LINE FEED” that is defined to be a space character, so it’s allowed in HTML text.
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>An HTML tag could not be parsed, most probably because of a typo.
Table rows on the same <table> element must have the same number of columns, which comes determined by the first tr row.
For example, this table is wrong as the first row defines 2 columns, while the second row tries to use 4 columns:
<table>
<tr>
<td>Liza</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>A <table> contains a <tr> row that has less <td> columns than the column count established by the first row. Check the table to ensure all rows have the same number of columns.
For example, in the following table, the first <tr> row defines that it’s 2 columns wide, but the second <tr> row tries to use only 1 column:
<table>
<!-- This first row sets the table as 2 columns wide -->
<tr>
<td>First</td>
<td>Second</td>
</tr>
<!-- This second row has only 1 column -->
<tr>
<td>Wrong</td>
</tr>
</table>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.
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>A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.
An <a> element cannot contain a descendant element with the attribute tabindex.
A button element cannot contain a descendant element with the attribute tabindex.
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.
<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 an img element has an empty alt attribute, its role is implicitly decorative, so it must not specify a role attribute.
The autocomplete attribute is used to control if the browser can provide assistance in filling out form field values, and it only makes sense for visible, not hidden, inputs.
It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.
To fix this issue, you can remove the autocomplete attribute from the input element with type=hidden. Here is an example:
<!-- Wrong code -->
<input type="hidden" name="phone" value="12345" autcomplete="off">
<!-- Correct code -->
<input type="hidden" name="phone" value="12345">The aria-* attributes are part of the WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications) suite. They are used to improve the accessibility of web pages. However, when we use an input element with a type attribute whose value is hidden, we imply that the element is invisible and has no interaction with the user. Therefore, it doesn’t make sense to add aria-* attributes to it.
To fix this issue, you need to remove the aria-* attributes from the input element with type=hidden. Here is an example:
<!-- Wrong code -->
<input type="hidden" name="referer" value="https://example.com" aria-invalid="false">
<!-- Correct code -->
<input type="hidden" name="referer" value="https://example.com">When nesting an input element inside a label that has a for attribute, the id attribute of the input 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 input is inside the label, there’s no need to specify a for attribute as there can only be one input, as in this example:
<label>
Age
<input type="text" name="age">
</label>However, if the for attribute is specified, then it must match the id of the input like this:
<label for="user_age">
Age
<input type="text" name="age" id="user_age">
</label>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>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>