Validación HTML: El atributo "border" está obsoleto. Considera especificar "img { border: 0; }" en CSS en su lugar.

Acerca de este problema HTML

En versiones anteriores de HTML, el atributo border en <img> se usaba comúnmente para controlar el ancho del borde en píxeles. Su uso más frecuente era border="0" para suprimir el borde azul predeterminado que los navegadores renderizaban alrededor de imágenes envueltas en enlaces <a>. Aunque esto funcionaba, mezclaba presentación con marcado — algo que HTML5 desaconseja en favor de una separación clara entre estructura (HTML) y estilado (CSS).

El validador HTML del W3C marca este atributo como obsoleto porque fue eliminado de la especificación HTML5. Los navegadores modernos aún lo entienden por compatibilidad hacia atrás, pero depender de características obsoletas es una mala práctica. Puede llevar a inconsistencias entre navegadores, hace que tu código sea más difícil de mantener, y señala a validadores y otros desarrolladores que el marcado está desactualizado.

El enfoque recomendado es manejar los bordes de imagen completamente en CSS. Si anteriormente usabas border="0" para eliminar bordes de imágenes enlazadas, la mayoría de los resets CSS modernos y hojas de estilo de normalización ya manejan esto. Si no estás usando un reset, una sola regla CSS se encarga de esto globalmente — no necesitas repetir el atributo en cada etiqueta <img>.

Cómo corregirlo

Elimina el atributo border de todos los elementos <img>.
Añade una regla CSS para lograr el mismo efecto. Para eliminar bordes, usa img { border: 0; } en tu hoja de estilo. Para añadir un borde visible, usa propiedades como border: 2px solid #333;.

Ejemplos

❌ Atributo `border` obsoleto

<a href="/products">
  <img src="product.jpg" alt="Our product" border="0">
</a>

Esto activa la advertencia del validador porque border ya no es un atributo válido en <img>.

✅ Corregido con CSS (hoja de estilo externa/interna)

<style>
  img {
    border: 0;
  }
</style>

<a href="/products">
  <img src="product.jpg" alt="Our product">
</a>

Una sola regla en tu hoja de estilo elimina bordes de todas las imágenes, lo cual es más limpio y fácil de mantener que repetir el atributo en cada elemento.

✅ Corregido con CSS inline (si es necesario)

<a href="/products">
  <img src="product.jpg" alt="Our product" style="border: 0;">
</a>

Los estilos inline funcionan pero no son ideales para correcciones a gran escala. Prefiere una regla de hoja de estilo cuando sea posible.

✅ Añadiendo un borde decorativo con CSS

Si tu intención era añadir un borde visible (ej., border="2"), reemplázalo con un equivalente CSS más flexible:

<style>
  .bordered {
    border: 2px solid #333;
  }
</style>

<img src="photo.jpg" alt="A scenic landscape" class="bordered">

CSS te da mucho más control — puedes especificar el estilo del borde, color, lados individuales, e incluso usar border-radius para esquinas redondeadas, nada de lo cual era posible con el antiguo atributo border.