Atributo href para links em JavaScript: # ou javascript:void(0)

Neste artigo você vai ver as diferenças para o valor do atributo href para links em JavaScript – devemos utilizar “#” ou “javascript:void(0)”?

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre o atributo href para links e o valor dele com JavaScript!

As duas abordagens tem alguns problemas, que vamos discutir mais tarde, e devem ser evitadas

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Veja os exemplos:

<a href="#">Clique em mim!</a>
<a href="javascript:void(0)">Clique em mim!</a>

Os problemas destas abordagens são:

• O código fica difícil de manter, por conter código inline;
• O javascript:void(0) não permite que usuário abra o link em nova aba;
• O # funciona como uma âncora, voltando o usuário par ao topo da página;

O que pode ser feito então?

A tag button é uma ótima forma de contornar isso, pois você pode atrelar a um evento de clique a sua função de JS que colocaria em um link

Além de que qualquer elemento pode ter seu CSS alterado para que atinja as necessidades do layout, fazendo então desnecessário o uso de uma tag a com href

Ou também o que pode ser feito é a remoção do atributo href, utilizando apenas o elemento como um disparador de outro evento em JS

Porém a ideia principal é não utilizar um handler inline, ou seja, separe o evento do HTML para um arquivo de JavaScript

E caso seja possível faça o uso de um elemento adequado, para que não precise ‘burlar’ o funcionamento padrão de um elemento, como a tag a

Conclusão

Neste artigo vimos por que não devemos utilizar o Atributo href para links em JavaScript com valores como # ou javascript:void(0)

O código ficará pior para manutenção, com mudança de comportamento padrão de um elemento e também event handler inline

A abordagem mais correta seria adicionar uma outra tag, que não seja necessário colocar valores inválidos em seus atributos

E criar os eventos todos na seção de JS do site ou arquivo externo, com foco apenas para esta ação

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube