HTML Checking for Large Sites

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.

Learn more:

• MDN: tabindex

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

• HTML Living Standard: Browsing context names

The href attribute on an a tag expects a valid URL, but only http:// was found.

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

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

The value used in the target property of an <a> element has been identified as a keyword because it starts with an underscore _, but it’s not a valid keyword.

Values starting with an underscore for the target property are used for reserved keywords like _blank, _self, _parent or _top.

Learn more:

• HTML Spec: links created by a elements
• HTML Spec: valid browsing content or keyword

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 <a> element requires either a href attribute, or a role attribute.

Learn more:

• HTML Spec: the a element

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 element X is not allowed as a child element of Y. For example, a <ul> element cannot have a <div> child element.

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>

An end tag </code> has been found violating nesting rules. Check other errors in the same document related to the <code> element, and fix the unallowed nested elements.

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>

And end tag has been found that does not match the current open element. Check the context to fix the start and end tags.

An <a> element has been found in an invalid place within a <table> element.

For example, the following code would cause this issue:

<table>
  <tr>
    <a href="#">link</a>
  </tr>
</table>

Instead, the <a> element should be inside a <td> element, as a <tr> can’t hold content directly:

<table>
  <tr>
    <td>
      <a href="#">link</a>
    </td>
  </tr>
</table>

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>

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.

A <script> start tag has been found in an unexpected place in the document structure. Check that the <script> section appears within the <head> or <body> sections.

Here’s an example of a script inserted in the head of the document:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script>
      console.log("Hello from the head");
    </script>
  </head>
  <body>
    <p></p>
  </body>
</html>

Learn more:

• MDN: script element

A <style> start tag has been found in an unexpected place in the document structure. Check that the <style> section appears within the <head> section.

Although in general it’s better to put your styles in external stylesheets and apply them using <link> elements, CSS styles can also be included inside a document using the <style> tag. In this case, it should be placed within the <head> section, like in this example:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style>
      p {
        color: #26b72b;
      }
    </style>
  </head>
  <body>
    <p>This text will be green.</p>
  </body>
</html>

Learn more:

• MDN: style element

A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.

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.

Links created with the <a> element no longer accept a shape attribute. In order to define image maps, use the <area> element instead.

Learn more:

• MDN: area element