Como Redirecionar uma Página HTML Automaticamente (Meta Refresh)

Conforme avançamos em nosso curso online de HTML, é hora de sair um pouco da teoria pura e começar a ver a mágica acontecer na tela.

Criar sites não precisa ser uma leitura chata e cansativa. Por isso, vamos começar a introduzir efeitos úteis e dinâmicos, como já fizemos no tutorial sobre como fazer um texto deslizar pela tela (efeito marquee).

Neste tutorial curto e prático, você vai aprender como redirecionar automaticamente o usuário de uma página para outra. Para isso, vamos utilizar os conhecimentos que acabamos de adquirir sobre o "cérebro" do site: as poderosas <meta> tags.

O que é o Redirecionamento de Sites?

Certamente você já acessou um link antigo e, de repente, a tela piscou e você foi levado para um endereço completamente novo, certo? Ou talvez tenha visto aquela clássica mensagem: "Se você não for redirecionado em 5 segundos, clique aqui."

Isso é o que chamamos de Redirecionamento. É uma técnica incrivelmente comum na internet, utilizada para:

Enviar usuários para o novo endereço de um site que mudou de domínio.
Exibir uma página de carregamento ou propaganda temporária.
Atualizar páginas de notícias em tempo real (fazendo a página recarregar a si mesma).

Quer Entrar no Mercado de Trabalho?

Torne-se um Webmaster Profissional. Estude no seu ritmo, aprenda truques avançados de front-end e conquiste seu certificado.

🎓 Obter Certificado HTML 📥 Baixar Apostila PDF

Como redirecionar usando a meta tag "Refresh"

A palavra Refresh, em inglês, significa "atualizar" ou "recarregar". Através do atributo http-equiv da nossa meta tag, podemos dar uma ordem direta ao navegador do usuário.

A sintaxe HTML é simples e vai direto dentro da tag <head>:

    <meta http-equiv="refresh" content="TEMPO_EM_SEGUNDOS; url=URL_DE_DESTINO">
  

Entendendo o código:

http-equiv="refresh": Avisa ao navegador que uma ação de recarregamento/redirecionamento vai acontecer.
content="5; url=...": O número "5" é o tempo de espera em segundos. O link após o `url=` é o destino final.

💡 Nota de Webmaster: Se você quiser que a própria página se atualize sozinha (como um placar de futebol ao vivo), basta omitir a URL ou colocar o endereço da própria página.

Exemplo Prático: Código HTML de Redirecionamento

Vamos criar uma página de espera que, após 5 segundos, envia o usuário automaticamente para a página inicial do HTML Progressivo.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
      <meta charset="UTF-8">
      <title>Redirecionando...</title>
      
      <!-- A Mágica Acontece Aqui: -->
      <meta http-equiv="refresh" content="5; url=http://www.htmlprogressivo.net">
      
  </head>
  <body style="text-align: center; font-family: Arial, sans-serif; margin-top: 50px;">
      
      <h2>Aguarde um momento...</h2>
      <p>Você será redirecionado ao site HTML Progressivo em 5 segundos.</p>
      <p>Se nada acontecer, <a href="http://www.htmlprogressivo.net">clique aqui</a>.</p>

  </body>
</html>

Salve esse código no seu editor (Bloco de Notas, VS Code) com a extensão .html e abra no seu navegador. Conte até 5 e veja você mesmo viajando pela internet!

🤡 Exercício Prático: A Pegadinha do Redirecionamento

Hora de testar seus conhecimentos e pregar uma peça em um amigo(a) ou parente!

Clique com o botão direito na imagem abaixo e selecione "Copiar endereço da imagem".
Crie um arquivo HTML novo usando a estrutura básica que aprendemos (html, head, body).
No corpo (body) do site, escreva uma mensagem curiosa, como: "Preciso te contar um segredo... espere 3 segundos."
Use a tag <meta refresh> para redirecionar a página exatamente para a URL da imagem que você copiou, após 3 segundos.
Mande o arquivo para sua vítima e espere a reação!

"Rá! Pegadinha do Webmaster!"

Como Redirecionar uma Página em HTML (Meta Refresh)