HTML Guide

Text not allowed in element “select” in this context.

This W3C HTML Validator issue indicates that you’ve placed text content directly inside a <select> element. According to the HTML specification, a <select> element can only contain <option> or <optgroup> elements, and no direct text nodes.

Here’s how to resolve this issue:

Steps to Fix:

Remove Text Nodes: Ensure that you remove any text that exists directly inside the <select> tags.
Use <option> Elements: If you want to display text as an option, use <option> tags for each selectable item.

Example of Incorrect Usage:

Here’s an example that generates the validator issue:

<select>
  Please select an option:
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Corrected Example:

Here’s how to correct this by moving the text outside of the <select> element:

<label for="options">Please select an option:</label>
<select id="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Summary:

Always wrap any instructional or descriptive text outside of the <select> element.
Use <option> tags to define the choices within the <select>.

Related W3C validator issues

Any “select” descendant of a “label” element with a “for” attribute must have an ID value that matches that “for” 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>

Bad value “true” for attribute “multiple” on element “select”.

The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.

Instead of:

<select multiple="true">

You should use:

<select multiple>

Here is an example of the correct usage of the multiple attribute:

<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

Element “option” without attribute “label” must not be empty.

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>

Text not allowed in element “ul” in this context.

The <ul> element is used to define unordered lists, where each element must be contained within a <li> element, like in this example:

<ul>
  <li>first element</li>
  <li>second element</li>
  <li>third element</li>
</ul>

Ensure that there’s no content inside the <ul> element that is not contained within a <li> element.

Sometimes this error comes when trying to give a title to the list, for example:

<ul>
  Fruits
  <li>Apple</li>
  <li>Orange</li>
</ul>

Instead, that title text should be outside the list, like:

<span>Fruits</span>
<ul>
  <li>Apple</li>
  <li>Orange</li>
</ul>

Other times, this can come as the concatenation of <li> elements which results in something like:

<ul>
   <li>First item</li>
   &nbsp;
   <li>Second item</li>
  &nbsp;
   <li>Third item</li>
</ul>

Note how in this case that   used to join the <li> is causing the problem, as it’s content that is not contained by a <li> element, as required by the <ul> element.

The first child “option” element of a “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have either an empty “value” attribute, or must have no text content. Consider either adding a placeholder option label, or adding a “size” attribute with a value equal to the number of “option” elements.

<select> elements that are required and are not multiple need a placeholder option that has no value, for example:

<select required>
  <option value="">choose size</option>
  <option value="s">small</option>
  <option value="l">large</option>
</select>