Acerca de este problema HTML
La especificación HTML requiere que los atributos de un elemento estén separados por uno o más caracteres de espacio en blanco ASCII. Cuando omites el espacio —típicamente entre una comilla de cierre del valor de un atributo y el nombre del siguiente atributo— el navegador puede tener dificultades para determinar dónde termina un atributo y dónde comienza el siguiente. Aunque algunos navegadores pueden intentar analizar el elemento correctamente, este comportamiento no está garantizado y puede llevar a resultados inesperados.
Este problema ocurre comúnmente cuando se edita HTML a mano, especialmente al copiar y pegar atributos de diferentes fuentes o cuando un motor de plantillas concatena cadenas de atributos sin el espaciado adecuado. También puede suceder cuando una comilla de cierre va seguida inmediatamente de otro nombre de atributo, haciendo que el marcado sea difícil de leer y mantener.
Más allá de la validación, la falta de espacios entre atributos perjudica la legibilidad del código. Otros desarrolladores (o tu yo futuro) que revisen el marcado pueden malinterpretar los límites de los atributos, llevando a errores que son difíciles de rastrear. Un espaciado consistente también asegura que las tecnologías de asistencia y los analizadores de navegadores interpreten tus elementos exactamente como se pretende.
Cómo solucionarlo
Revisa tu HTML y asegúrate de que cada atributo esté separado de los atributos adyacentes por al menos un carácter de espacio. Presta especial atención a:
-
Atributos colocados inmediatamente después de un valor entre comillas (ej.,
"value"classdebería ser"value" class). - Atributos colocados después de valores sin comillas, que pueden ser aún más ambiguos.
- Marcado generado dinámicamente desde motores de plantillas o JavaScript, donde la concatenación podría eliminar espacios en blanco.
Ejemplos
Incorrecto: no hay espacio entre atributos
<a href="page.php"class="big">link</a>
Aquí, class está colocado directamente después de la comilla de cierre del valor de href sin espacio entre ellos. El validador marcará esto como un error.
Correcto: espacio entre atributos
<a href="page.php" class="big">link</a>
Un solo espacio entre "page.php" y class resuelve el problema.
Incorrecto: múltiples espacios faltantes
<img src="photo.jpg"alt="A sunset"width="600"height="400">
Los cuatro atributos están unidos sin ningún espacio en blanco que los separe.
Correcto: todos los atributos con espaciado adecuado
<img src="photo.jpg" alt="A sunset" width="600" height="400">
Correcto: usar saltos de línea como espacios en blanco
Cuando un elemento tiene muchos atributos, puedes usar saltos de línea para la separación, lo que también mejora la legibilidad:
<img
src="photo.jpg"
alt="A sunset"
width="600"
height="400">
Los saltos de línea y la indentación cuentan como espacios en blanco válidos entre atributos y son perfectamente aceptables en HTML. Este estilo multilínea es especialmente útil para elementos con numerosos atributos, como campos <input> en formularios o componentes con atributos de datos.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.