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 renderizarían alrededor de las imágenes envueltas en enlaces <a>. Aunque esto funcionaba, mezclaba presentación con marcado — algo que HTML5 desaconseja a favor de una separación limpia entre estructura (HTML) y estilo (CSS).

El W3C HTML Validator marca este atributo como obsoleto porque fue eliminado de la especificación HTML5. Los navegadores modernos aún lo entienden para 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 los validadores y otros desarrolladores que el marcado está desactualizado.

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

Cómo solucionarlo

Elimina el atributo border de todos los elementos <img>.
Añade una regla CSS para lograr el mismo efecto. Para quitar 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 quita los 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 (por ejemplo, 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.