Sobre este problema HTML
O atributo target no elemento <area> indica ao navegador onde exibir o recurso ligado — no separador atual, num novo separador, numa frame principal ou numa <iframe> nomeada. De acordo com o padrão vivo HTML do WHATWG, um alvo navegável válido deve ser uma palavra-chave que comece por um underscore (_self, _blank, _parent, _top) ou um nome com pelo menos um caractere. Uma string vazia ("") não satisfaz nenhuma destas condições, pelo que o validador W3C reporta:
Bad value “” for attribute “target” on element “area”: Browsing context name must be at least one character long.
Isto acontece frequentemente quando motores de templates ou plataformas CMS produzem target="" como predefinição, ou quando um valor é definido condicionalmente mas a lógica falha em produzir um resultado.
Porque é que isto importa
-
Conformidade com padrões. Um
targetvazio viola a especificação HTML e produz um erro de validação. -
Comportamento imprevisível do navegador. Embora a maioria dos navegadores trate um
targetvazio da mesma forma que_self, isto não é garantido pela especificação. Confiar em comportamento indefinido pode levar a inconsistências entre navegadores ou versões futuras. -
Clareza do código. Um
targetvazio sinaliza uma intenção pouco clara. Removê-lo ou usar uma palavra-chave explícita torna o código mais fácil de compreender e manter.
Como corrigir
-
Remova o atributo
targetse quiser que a ligação abra no mesmo contexto de navegação. Este é o comportamento predefinido, equivalente atarget="_self". -
Use uma palavra-chave válida como
_self,_blank,_parentou_topse precisar de um comportamento de navegação específico. -
Use um contexto de navegação nomeado (por exemplo,
target="contentFrame") se quiser direcionar a ligação para uma<iframe>ou janela específica. O nome deve ter pelo menos um caractere. -
Corrija a lógica do seu template se o valor vazio estiver a ser gerado dinamicamente. Assegure-se de que o atributo
targetsó é renderizado quando está disponível um valor não-vazio.
Exemplos
Inválido: atributo target vazio
Isto desencadeia o erro de validação porque target está definido como uma string vazia:
<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="">
</map>
Corrigido: remover target para comportamento predefinido
Se quiser que a ligação abra no mesmo separador (o predefinido), simplesmente remova o atributo target:
<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen">
</map>
Corrigido: usar uma palavra-chave válida
Use _self para ser explícito sobre navegação no mesmo separador, ou _blank para abrir num novo separador:
<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="_self">
<area shape="rect" coords="110,10,200,60" href="/bedroom" alt="Bedroom" target="_blank">
</map>
Corrigido: direcionar para uma <iframe> nomeada
Se quiser carregar o recurso ligado numa <iframe> específica, dê à <iframe> um atributo name e referencie-o em target:
<iframe name="detailView" src="about:blank" title="Room details"></iframe>
<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="detailView">
</map>
Corrigido: renderizar condicionalmente target em templates
Se o seu valor target vier de uma variável, certifique-se de que o atributo só é produzido quando o valor não está vazio. Por exemplo, num template estilo Jinja:
<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen"
{% if target_value %} target="{{ target_value }}"{% endif %}>
Isto previne que target="" apareça no seu HTML quando não há valor definido.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.