HTML Checking for Large Sites

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.

Learn more:

• MDN: the id global attribute

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:

• HTML Living Standard: the label element
• HTML Living Standard: the select element

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.

IDs for HTML elements can’t be blank.

A <pattern> element has been found with an invalid ID. Check the format of the ID and ensure it does not start with a digit, full stop (.) or hyphen (-).

The <pattern> element is used within <svg> elements, which use XML 1.0 syntax. That syntax specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.

Learn more:

• MDN: pattern element
• MDN: SVG id

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.

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

• HTML Living Standard: the label element

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

A label element is not allowed as a descendant of a button element.

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.

Learn more:

• HTML Spec: the label element

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>

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

• HTML Living Standard: the label element

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:

• W3C: name attribute is obsolete

The <option> element no longer accepts a name attribute, which is now obsolete.

Example:

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>

Learn more:

• MDN: option element

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