HTML Checking for Large Sites

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.

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

Here’s an example of using the rel attribute to link a document to a CSS stylesheet:

<link rel="stylesheet" href="default.css" />

Here’s an example os using the rel attribute to tell search engine spiders to ignore the link relationship with another document:

<a href="https://example.com" rel="nofollow">more info</a>

The <dl> element, used to create a definition lists that matches some terms with their definitions, has nesting issues related to <div> elements used with it.

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>

A heading element (h1, h2, h3, etc.) can’t be nested inside another heading element.

Here’s an example of invalid HTML code:

<h1>Main heading
  <h2>Sub heading</h2>
</h1>

To fix this issue, you should ensure that each heading element is properly nested within the document hierarchy. Headings should only be used to indicate the structure of your content, not to style it.

Here’s an example of valid HTML code that properly uses heading elements:

<main>
  <h1>Main heading</h1>
  <section>
    <h2>Section heading</h2>
    <p>Paragraph content</p>
  </section>
</main>

In this example, the heading elements are used to denote the structure of the document, with the h1 element indicating the highest level heading and the h2 element indicating a subheading within a section. Notice that in the valid example, each heading element is only used once and is not nested within another heading element.

Some times this can be caused by a typo in the end tag for a heading, for example:

<h3>Meet the Feebles<h3>

In order to fix this issue, the end tag should be </h3> in the example above.

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>

A <button> tag can’t include other <button> tags inside. Most probable cause is an unclosed <button> tag, like in this example:

<button>Submit
<button>Cancel</button>