Valor incorrecto “http://“ para el atributo “href” en el elemento “area”: Host inválido: host vacío.

El elemento <area> define una región clicable dentro de un elemento <map>, que se usa con imágenes para crear mapas de imagen. Cuando un elemento <area> incluye un atributo href, el navegador lo trata como un hipervínculo. El valor de href debe ser una URL válida, y http:// por sí solo falla la validación porque la especificación de URL requiere un host después del separador ://. No se permite un host vacío.

Esto importa por varias razones. Los navegadores pueden manejar URLs malformadas de manera impredecible — algunos podrían ignorar el enlace, otros podrían intentar navegar a un destino sin sentido, y otros podrían lanzar un error de red. Los lectores de pantalla y otras tecnologías asistivas dependen de valores href válidos para anunciar los enlaces correctamente y proporcionar navegación significativa a los usuarios. Desde la perspectiva del cumplimiento de estándares, el WHATWG URL Standard rechaza explícitamente las URLs con hosts vacíos, y el validador de W3C marca esto como un error.

Este problema comúnmente aparece cuando las URLs de marcador de posición se dejan durante el desarrollo, cuando las herramientas CMS generan marcado incompleto, o cuando un valor de URL se construye dinámicamente pero la parte del host termina vacía.

Cómo solucionarlo

• Si el área debería enlazar a algún sitio, reemplaza http:// con la URL completa e intencionada incluyendo el host (por ejemplo, https://example.com/page).
• Si el área es un marcador de posición temporal, usa href="#" para crear un enlace válido sin operación, aunque ten en cuenta que esto hará que la página se desplace hacia arriba cuando se haga clic.
• Si el área no debería ser interactiva, elimina completamente el atributo href. Sin href, el elemento <area> no es un hipervínculo y no será clicable.

Ejemplos

Inválido: host vacío en URL

El valor http:// no tiene host, lo que desencadena el error de validación.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="http://" alt="Home page">
</map>

Solucionado: URL completa con un host válido

Proporcionar una URL completa con un host resuelve el error.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="https://example.com/" alt="Home page">
</map>

Solucionado: enlace marcador de posición con #

Si necesitas que el área permanezca clicable pero no tienes un destino aún, href="#" es un marcador de posición válido.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="#" alt="Home page">
</map>

Solucionado: área no interactiva sin href

Si el área no necesita ser un enlace, simplemente omite el atributo href.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" alt="Home page">
</map>

Más información:

MDN Reference

MDN Web Docs: area - HTML

→

MDN Reference

MDN: Invalid URL — Web HTML Reference

→

WHATWG Spec

WHATWG: Image maps

→