HTML Checking for Large Sites

A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.

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 <label> element represents a caption in a document, and it can be associated with a form input using the for attribute, which must be an ID. Document IDs cannot contain whitespace.

Example:

<form>
  <label for="user_name">Name</label>
  <input type="text" id="user_name" />
</form>

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

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