Cara são tantas diferenças que fica até complicado entrar em muitos detalhes, mas vamos falar dessa imagem
Na imagem acima vc consegue perceber que a primeira frase é um link? Muito provavelmente não, a não ser que o texto fosse clique aqui ou algo do tipo. Além disso, os leitores de tela tb não conseguem ler o caminho do link, então do ponto de vista da acessibilidade tb é ruim. Pois o link com JS, nem o focus ao apertar o tab
ele recebe, assim como te não muda o tipo do cursor para pointer quando vc coloca o mouse encima.
Então um link em JS é menos acessível, provavelmente deve prejudicar o SEO, e é pouco intuitivo para o usuário comum, pois mesmo ele pode ter dificuldades em identificar um elemento clicável deito dessa forma prejudicando a UX
Veja por conta própria o comportamento de um e do outro, e como o usuário tem os feedback de um e do outro.
<p onclick="window.location.href='http://pt.stackoverflow.com'">link na tag "<" p ">" com onclick</p>
<a href="//pt.stackoverflow.com">link padrão com tag "<" a ">"</a>
Tirando isso ainda tem todas as outra propriedades que um elemento <a>
tem por default, configurações de estilo do user-agente
e pseudo classes como :active
e :focus
, vários atributos globais, e retro-compatibilidade e comportamento esperado em dispositivos mobile.
Então podendo usar um link normal, com a tag <a>
, evite ao máximo usar window.location.href
, a não ser que seja para um componente de slider ou galeria de imagem, que são componentes pouco acessíveis de qualquer forma e que pode não ser interessante para pessoas com deficiência visual etc. A preferencia sempre é do <a>
E por último, mas não menos importante, se optar por usar window.location.href
lembre-se sempre de usar no elemento que vai ser clicável os atributos role
e/ou aria-label
para manter a acessibilidade, e adicionar tb um tabindex="0
" para pode focar com o tab. Vc pode ler mais sobre esse nessa documentação da própria Mozilla https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role#Examples
Então se for fazer com JS seu HTML deveria ficar mais ou menos assim.
document.querySelector('div').onclick = function() {
window.location.href = 'http://pt.stackoverflow.com'
}
div {
color: blue;
text-decoration: underline;
}
div:hover {
cursor: pointer;
}
<div role="link" tabindex="0">isso é uma DIV clicável pelo JS e acessível</div>