0Pricing
HTML Academy · Aula

Abrir ligações em novos separadores e o atributo download

Utilizar os atributos target e download para definir o comportamento das ligações.

Abrir ligações em novos separadores e o atributo download é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Abrindo em uma nova aba

O atributo target controla onde o documento vinculado será aberto:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

O risco de segurança de _blank

target="_blank" sem precauções cria uma vulnerabilidade de segurança:

  • A nova página pode acessar a página de origem por meio de window.opener
  • Uma página maliciosa poderia redirecionar a aba original
  • Esse ataque é chamado de sequestro reverso de aba

rel=noopener noreferrer

Sempre adicione rel="noopener noreferrer" ao usar target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Quando abrir novas abas

Diretrizes de experiência do usuário para target="_blank":

  • Use para sites externos quando os usuários não esperarem sair do seu aplicativo
  • Use para documentos de referência, como PDFs e guias
  • Não use para navegação entre páginas internas
  • Sempre avise os usuários — adicione um ícone ou título informando "abre em uma nova aba"

Indicando uma nova aba aos usuários

Informe aos usuários que o link será aberto em uma nova aba:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

O atributo download

O atributo download informa ao navegador que deve baixar o arquivo vinculado em vez de navegar até ele:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Restrições do atributo download

O atributo download tem algumas restrições:

  • Funciona apenas para URLs da mesma origem
  • Downloads de origens diferentes exigem que o servidor envie Content-Disposition: attachment
  • O nome do arquivo em download é apenas uma sugestão — os cabeçalhos do servidor podem substituí-lo

Downloads com URIs de dados

Você pode baixar conteúdo gerado usando URIs de dados:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript e destinos de links

Quando JavaScript controla a navegação, evite o uso abusivo de target="_blank":

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Atributo ping

O atributo ping envia uma solicitação POST quando o link é clicado, para fins de análise:

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Atributo type em links

O atributo type indica o tipo MIME do recurso vinculado:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Verificação rápida

Qual atributo de segurança deve sempre acompanhar target="_blank"?

Recapitulação: target e download

Atributos que controlam o comportamento dos links:

  • target="_blank" — abre em uma nova aba
  • Sempre adicione rel="noopener noreferrer" com _blank
  • Avise visualmente os usuários quando um link abrir em uma nova aba
  • download — inicia o download do arquivo em vez da navegação
  • download="filename" — sugere um nome de arquivo para o download

Perguntas Frequentes

A aula “Abrir ligações em novos separadores e o atributo download” é grátis?

Sim — o texto completo de “Abrir ligações em novos separadores e o atributo download” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Abrir ligações em novos separadores e o atributo download”?

Utilizar os atributos target e download para definir o comportamento das ligações. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Abrir ligações em novos separadores e o atributo download”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento anchor e o atributo href
  2. URLs absolutas vs relativas
  3. Abrir ligações em novos separadores e o atributo download
  4. Ligações para secções e identificadores de fragmentos
← Voltar para HTML Academy