11.03.2025

Abrindo Links em uma Nova Janela: Sintaxe e Métodos Markdown

Resposta Rápida

Precisa de uma resposta rápida? Use a tag HTML <a> com o atributo target="_blank" diretamente no Markdown:

<a href="https://exemplo.com" target="_blank">Link que abre em uma nova aba</a>

Essa é a solução mais simples. Copie o código, cole no seu documento e você terá um link que abre em uma nova janela do navegador.

Recursos Avançados do Markdown e Seu Uso Personalizado

Usando target="_blank" na Prática

HTML é ótimo, mas e se quisermos usar capacidades adicionais do Markdown? Parsers como pandoc e Kramdown oferecem sintaxe para adicionar atributos, incluindo target="_blank":

• Kramdown: [Link Incrível](http://incrivel.com){:target="_blank"}
• Pandoc: Ative +link_attributes para adicionar [Link Incrível](http://incrivel.com){target="_blank"}

Antes de usar, certifique-se de que seu parser Markdown suporta o atributo target="_blank".

Proteção Contra Script de Sites Cruzados (XSS)

É importante manter a segurança do código ao combinar HTML e Markdown. Sanitizar os dados para potenciais vulnerabilidades ajuda a prevenir ataques XSS. Siga diretrizes para filtragem de HTML, especialmente ao lidar com conteúdo gerado por usuários.

Usando JavaScript para Adicionar Atributos Dinamicamente

JavaScript permite que você defina o atributo target="_blank" para os links após o carregamento da página, liberando-o da necessidade de editar o código Markdown original:

// Mudar sem reescrever o código original? Fácil! 😉
document.querySelectorAll('a[href^="http://"], a[href^="https://"]').forEach(link => {
  if(link.hostname !== location.hostname) {
    link.target = '_blank';
  }
});

Esse script funciona sem jQuery e modifica automaticamente todos os links externos para abrir em novas abas.

Visualização

Usar target="_blank" no Markdown parece introduzir novos recursos enquanto preserva o calor familiar do que já é conhecido: 🚪✨

[Visite o País das Maravilhas](https://wonderland.exemplo "País das Maravilhas")

Aqui está um link simples em Markdown. Agora, vamos adicionar o atributo target="_blank":

[Visite o País das Maravilhas](https://wonderland.exemplo){:target="_blank"}

E agora você se sente como se estivesse em outra dimensão enquanto o portal original permanece aberto. 🌐↗️

Mais Sobre Abrir Links em Novas Abas

Tornando o Uso Ainda Mais Conveniente

Usuários do R Markdown, temos boas notícias! Basta usar [Texto do Link](URL){target="_blank"}, e funcionará "na boa".

Sabia Que?

Os usuários podem abrir links em novas abas simplesmente realizando Ctrl+Clique ou ⌘+Clique (no Mac), sem usar nenhum código adicional. Aí está o poder da escolha do usuário.

Alternativas: jQuery e Extensões Customizadas

Os entusiastas do jQuery podem usar seu framework para adicionar automaticamente target="_blank" para links externos com um script simples:

// O jQuery entra em cena
$(document.links).filter(function() {
  return this.hostname !== window.location.hostname;
}).attr('target', '_blank');

E se você precisar de uma solução personalizada, sempre pode desenvolver sua própria extensão Markdown!

Principais Recursos

Design de UX e Uso de target="_blank"

Abrir todos os links em uma nova aba pode ser tentador, mas essa abordagem pode degradar a experiência do usuário (UX). Use essa opção com cautela para evitar complicar a percepção do seu conteúdo para os usuários.

Acessibilidade e Desempenho: Um Duplo Benefício

Combinar target="_blank" com rel="noopener noreferrer" garante um carregamento seguro e rápido em navegadores modernos:

<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Link que abre em uma nova aba</a>

Recursos Úteis

1. Folha de Dicas Markdown no GitHub — acesso rápido à sintaxe Markdown.
2. Discussão sobre a Criação de Links que Abrem em Novas Abas no Stack Overflow — dicas e exemplos úteis.
3. Documentação de Sintaxe Markdown por Daring Fireball — conselhos do criador do Markdown.
4. Especificação CommonMark — especificação unificada para Markdown.
5. Sintaxe Markdown Avançada — detalhes sobre recursos avançados do Markdown.
6. Quando Usar target="_blank" no CSS-Tricks — recomendações para o uso de target="_blank".

Video

Navigation