Validación HTML: Al elemento X le falta el atributo requerido Y.

Acerca de este problema HTML

Los atributos requeridos existen porque proporcionan información que es fundamental para el propósito del elemento. Por ejemplo, un elemento <img> sin un atributo src no tiene imagen que mostrar, y sin un atributo alt, las tecnologías asistivas no tienen texto alternativo para describir la imagen. Un elemento <link> sin rel no le da al navegador forma de entender la relación del recurso vinculado. Cuando omites un atributo requerido, pueden salir mal varias cosas:

Problemas de accesibilidad: Los lectores de pantalla y otras tecnologías asistivas dependen de atributos específicos para transmitir significado. Un alt que falte en <img> deja a los usuarios con discapacidad visual sin ninguna descripción del contenido.
Funcionalidad rota: Algunos elementos simplemente no funcionarán sin sus atributos requeridos. Un <form> con un <input> al que le falta un atributo type puede que se renderice igualmente (los navegadores por defecto usan type="text"), pero otros elementos como <map> sin name no funcionarán como se pretende.
No cumplimiento de estándares: Omitir atributos requeridos produce HTML inválido, lo que puede llevar a renderizado impredecible en diferentes navegadores.

Para arreglar este problema, identifica qué atributo le falta al elemento señalado por el validador, luego agrégalo con un valor apropiado. Aquí tienes elementos comunes y sus atributos requeridos:

Elemento	Atributo(s) requerido(s)
`<img>`	`src`, `alt`
`<link>`	`rel`
`<script>`	`src` (si no hay contenido inline)
`<input>`	`type` (recomendado)
`<meta>`	`charset`, `name`, o `http-equiv` (al menos uno)
`<map>`	`name`
`<bdo>`	`dir`
`<style>`	Ninguno en HTML5, pero `type` era requerido en HTML4

Ejemplos

Atributo `alt` faltante en `<img>`

Este es uno de los errores de validación más comunes. El atributo alt es requerido en cada elemento <img>.

❌ Incorrecto — falta el atributo alt:

<img src="photo.jpg">

✅ Correcto — atributo alt proporcionado:

<img src="photo.jpg" alt="Un atardecer sobre el océano">

Si la imagen es puramente decorativa y no lleva contenido significativo, usa un atributo alt vacío:

<img src="decorative-border.png" alt="">

Atributo `rel` faltante en `<link>`

El atributo rel le dice al navegador para qué es el recurso vinculado.

❌ Incorrecto — falta el atributo rel:

<link href="styles.css">

✅ Correcto — atributo rel proporcionado:

<link rel="stylesheet" href="styles.css">

Atributo `name` faltante en `<map>`

El elemento <map> requiere un atributo name para que pueda ser referenciado por el atributo usemap de un elemento <img>.

❌ Incorrecto — falta el atributo name:

<map>
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Sección">
</map>

✅ Correcto — atributo name proporcionado:

<map name="navigation">
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Sección">
</map>
<img src="nav.png" alt="Navegación del sitio" usemap="#navigation">

Atributo `dir` faltante en `<bdo>`

El elemento <bdo> (anulación bidireccional) existe específicamente para anular la dirección del texto, por lo que el atributo dir es esencial.

❌ Incorrecto — falta el atributo dir:

<p>La palabra en árabe es <bdo>مرحبا</bdo>.</p>

✅ Correcto — atributo dir proporcionado:

<p>La palabra en árabe es <bdo dir="rtl">مرحبا</bdo>.</p>

Cuando encuentres este error de validación, lee el mensaje del validador cuidadosamente — te dirá exactamente qué elemento y qué atributo falta. Agrega el atributo con un valor significativo apropiado para tu contenido, y revalida para confirmar que el problema está resuelto.