Acerca de este problema HTML
El analizador HTML espera que una barra dentro de una etiqueta señale el final de un elemento de auto-cierre (void), como <br /> o <img />. Cuando el analizador encuentra una / que no está inmediatamente seguida por >, no puede interpretar la etiqueta correctamente y genera este error. Esto puede suceder en varios escenarios:
-
Un error tipográfico en un nombre de atributo o valor, como escribir accidentalmente una
/en lugar de otro carácter. - Un valor de atributo sin comillas que contiene una barra, como una ruta URL.
- Una barra mal colocada en algún lugar en el medio de una etiqueta.
Aunque los navegadores generalmente son tolerantes y pueden aún renderizar la página, depender de la recuperación de errores lleva a comportamientos impredecibles entre diferentes navegadores. Corregir estos problemas asegura que tu marcado sea inequívoco, compatible con estándares y más fácil de mantener.
Ejemplos
Barra perdida en una etiqueta (error tipográfico)
Un error tipográfico común donde aparece una barra entre atributos:
<!-- ❌ Barra no seguida inmediatamente por ">" -->
<input type="text" / name="username">Elimina la barra perdida:
<!-- ✅ Correcto -->
<input type="text" name="username">Valor de atributo sin comillas que contiene una barra
Si un valor de atributo contiene una / y no está envuelto en comillas, el analizador ve la barra como parte de la sintaxis de la etiqueta en lugar del valor:
<!-- ❌ Valor sin comillas con barra confunde al analizador -->
<img src=images/photo.jpg alt="Photo">Siempre entrecomilla los valores de atributos, especialmente aquellos que contienen barras:
<!-- ✅ Correcto: valor de atributo entrecomillado -->
<img src="images/photo.jpg" alt="Photo">Barra en la posición incorrecta para etiquetas de auto-cierre
Colocar la barra antes del atributo final en lugar de al final de la etiqueta:
<!-- ❌ La barra no está inmediatamente antes de ">" -->
<img src="logo.png" / alt="Logo">Mueve la barra de auto-cierre al final, o simplemente elimínala (la sintaxis de auto-cierre es opcional en HTML5 para elementos void):
<!-- ✅ Correcto: barra al final -->
<img src="logo.png" alt="Logo" />
<!-- ✅ También correcto: no se necesita barra de auto-cierre en HTML -->
<img src="logo.png" alt="Logo">Barra doble accidental
A veces una etiqueta de auto-cierre termina con una barra extra:
<!-- ❌ Barra doble antes de ">" -->
<br //>Usa una sola barra o omítela completamente:
<!-- ✅ Correcto -->
<br />
<!-- ✅ También correcto -->
<br>Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.