HTML Guides for whitespace

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.

The <label> element represents a caption for a form control. When you use the for attribute, its value must match the id of the form control it labels. According to the HTML specification, an id attribute value must not contain any whitespace characters — this includes spaces, tabs, line feeds, carriage returns, and form feeds. Since for must reference a valid ID, the same restriction applies to its value.

This error typically occurs when a developer uses a space-separated name (like "user name" or "first name") instead of a single continuous token. Browsers may fail to establish the programmatic association between the label and its form control when the for value contains whitespace. This directly impacts accessibility: screen readers rely on this association to announce the label text when a user focuses on the input. It also breaks the click-to-focus behavior where clicking a label moves focus to its associated control.

To fix this issue, replace any whitespace in the for attribute value with a valid character such as a hyphen (-), underscore (_), or camelCase. Make sure the id on the corresponding form control matches exactly.

Examples

Incorrect — whitespace in the for attribute

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

The value "user name" contains a space, which makes it an invalid ID reference. The validator will report: Bad value “user name” for attribute “for” on element “label”: An ID must not contain whitespace.

Correct — using an underscore instead of a space

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

Correct — using a hyphen instead of a space

<form>
  <label for="user-name">Name</label>
  <input type="text" id="user-name">
</form>

Correct — using camelCase

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

Incorrect — leading or trailing whitespace

Whitespace doesn’t have to be in the middle of the value to trigger this error. Leading or trailing spaces also make the ID invalid:

<form>
  <label for=" email">Email</label>
  <input type="text" id=" email">
</form>

This can be easy to miss when values are generated dynamically or copied from another source. Trim the value to fix it:

<form>
  <label for="email">Email</label>
  <input type="text" id="email">
</form>

Alternative — wrapping the input inside the label

If you wrap the form control inside the <label> element, you don’t need the for attribute at all. The association is implicit:

<form>
  <label>
    Name
    <input type="text">
  </label>
</form>

This approach avoids potential ID mismatches entirely, though explicit for/id pairing is often preferred for flexibility in layout and styling.