Validación HTML: Texto no permitido en el elemento "select" en este contexto.

Acerca de este problema HTML

Los nodos de texto directo dentro de select no son contenido permitido. Los navegadores típicamente ignoran o alteran ese texto, lo que lleva a una renderización inconsistente y experiencias confusas para los usuarios de lectores de pantalla. También rompe la conformidad, lo que puede impactar la mantenibilidad y las herramientas automatizadas. El enfoque correcto es mantener el texto instructivo en un label correspondiente, o proporcionar un mensaje no seleccionable usando una option deshabilitada y seleccionada. Las etiquetas de grupo deben proporcionarse con elementos optgroup, no texto libre.

Para solucionarlo, elimina cualquier texto sin procesar dentro del select. Si necesitas un mensaje, añade una primera option con value="" y disabled selected hidden para una experiencia similar a un marcador de posición, o utiliza un label visible. Asegúrate de que todos los elementos seleccionables estén envueltos en option, y cualquier agrupación use optgroup con su atributo label. Siempre asocia el select con un label mediante for/id para accesibilidad.

Ejemplos

Desencadena el error (nodo de texto dentro de `select`)

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

Correcto: mover las instrucciones a un `label`

<label for="flavor">Please select a flavor:</label>
<select id="flavor" name="flavor">
  <option value="vanilla">Vanilla</option>
  <option value="chocolate">Chocolate</option>
</select>

Correcto: proporcionar un mensaje no seleccionable dentro de `select`

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="" disabled selected hidden>Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Correcto: usar `optgroup` para agrupar, no texto libre

<label for="city">City</label>
<select id="city" name="city">
  <optgroup label="USA">
    <option value="nyc">New York</option>
    <option value="la">Los Angeles</option>
  </optgroup>
  <optgroup label="Canada">
    <option value="toronto">Toronto</option>
    <option value="vancouver">Vancouver</option>
  </optgroup>
</select>

Correcto: documento completo (para contexto)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Select without stray text</title>
  </head>
  <body>
    <form>
      <label for="size">Choose a size:</label>
      <select id="size" name="size">
        <option value="" disabled selected hidden>Select a size</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </form>
  </body>
</html>

Consejos:

Coloca las instrucciones en un label o texto circundante, no dentro de select.
Cada opción debe ser una option; usa optgroup con label para nombrar grupos.
Para marcadores de posición, prefiere una primera option deshabilitada y seleccionada; evita nodos de texto sin procesar.