Como fazer um link de voltar com HTML

Neste artigo você vai aprender a como fazer um link de voltar com HTML, ou seja, criar um link que faz a ação de voltar nas páginas

Fala programador(a), beleza? Bora aprender mais sobre HTML e JavaScript!

Tudo que faremos aqui será no campo do HTML, mas vamos utilizar JavaScript para criar a funcionalidade

Basicamente temos um objeto em JavaScript chamado history, que nos ajuda a trabalhar com o que acontece na URL

Ele contém o histórico da última URL acessada, por meio do método back

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Então vamos atrelar ele a um href de uma tag a, e teremos nosso resultado final

Veja um exemplo prático:

<a href="javascript:history.back()">Voltar</a>

Simples, não é?

A técnica pode ser aplicada para botões também, veja:

<button onclick="javascript:history.back()">Voltar</button>

Aqui estamos utilizando o evento onclick, que responde ao click do usuário

Assim temos o mesmo efeito da tag a

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como criar um link de voltar com HTML

Utilizamos a tag a e o atributo href com um pouco de JavaScript

Você pode fazer a mesma ação com botões também

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

E se eu quiser voltar para uma página específica?

Aí a lógica muda um pouco

O history.back() volta pra ÚLTIMA página que a pessoa visitou, seja ela qual for

Mas as vezes você não quer isso, você quer mandar o usuário sempre pro mesmo lugar, tipo a página inicial

Nesse caso não precisa de JavaScript, é só um link comum com o href apontando pro destino:

<a href="index.html">Voltar para a página inicial</a>

Ou se for pra raiz do site:

<a href="/">Voltar para a home</a>

Simples né? 🙂 Um volta pro histórico, o outro volta pra um lugar fixo, escolhe conforme a necessidade

E se não tiver histórico pra voltar?

Se liga nisso, porque já me confundiu uma vez

Quando a pessoa abre sua página direto (digitou a URL, ou é a primeira aba), não existe página anterior no histórico

Aí o history.back() simplesmente não faz nada, o usuário clica e continua parado

Por isso, se o ‘voltar’ é importante pro seu fluxo, vale ter um destino fixo de reserva com um href normal, assim o botão nunca fica ‘morto’

history.back() ou history.go(-1)?

Você vai ver os dois por aí e pode bater aquela dúvida

Os dois voltam uma página, o resultado é o mesmo:

<a href="javascript:history.go(-1)">Voltar</a>

A diferença é que o go() aceita um número, então dá pra voltar mais de uma página de uma vez, tipo history.go(-2) pra voltar duas

Já o back() é o atalho pronto pra voltar só uma

Usa o que ficar mais claro pra ti

Um detalhe: no onclick você não precisa do prefixo javascript:, ele já entende que é código

Então isso aqui também funciona e fica mais limpo:

<button onclick="history.back()">Voltar</button>