Sobre este problema HTML
O elemento <area> define uma região clicável dentro de um elemento <map>, que é usado com imagens para criar mapas de imagem. Quando um elemento <area> inclui um atributo href, o navegador trata-o como um hiperligação. O valor de href deve ser um URL válido, e http:// sozinho falha a validação porque a especificação de URL requer um host após o separador ://. Um host vazio não é permitido.
Isto importa por várias razões. Os navegadores podem lidar com URLs mal formados de forma imprevisível — alguns podem ignorar o link, outros podem tentar navegar para um destino sem sentido, e outros podem lançar um erro de rede. Os leitores de ecrã e outras tecnologias assistivas dependem de valores href válidos para anunciar links corretamente e fornecer navegação significativa aos utilizadores. Do ponto de vista da conformidade com normas, a WHATWG URL Standard rejeita explicitamente URLs com hosts vazios, e o validador W3C sinaliza isto como um erro.
Este problema aparece frequentemente quando URLs placeholder são deixados durante o desenvolvimento, quando ferramentas CMS geram markup incompleto, ou quando um valor URL é construído dinamicamente mas a parte do host acaba vazia.
Como corrigir
-
Se a área deve apontar para algum lugar, substitua
http://pelo URL completo pretendido incluindo o host (por exemplo,https://example.com/page). -
Se a área é um placeholder temporário, use
href="#"para criar um link válido sem ação, embora esteja ciente de que isto fará a página subir até ao topo quando clicado. -
Se a área não deve ser interativa, remova completamente o atributo
href. Semhref, o elemento<area>não é uma hiperligação e não será clicável.
Exemplos
Inválido: host vazio no URL
O valor http:// não tem host, o que desencadeia o erro de validação.
<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>Corrigido: URL completo com um host válido
Fornecer um URL completo com um host resolve o erro.
<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>
Corrigido: link placeholder com #
Se precisa que a área permaneça clicável mas ainda não tem um destino, href="#" é um placeholder 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>
Corrigido: área não-interativa sem href
Se a área não precisa de ser um link, simplesmente omita o 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>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.