Títulos e alvos de links HTML

A sessão Links deu a você elementos a funcionando com valores href claros. Dois extras comuns mudam a experiência sem substituir o href: um atributo title para uma dica curta ao passar o mouse, e um target que pode abrir o destino em uma nova aba do navegador. Usados com cuidado, ajudam. Em cada item de menu, irritam as pessoas e criam armadilhas de segurança.

O que esses atributos fazem

O href ainda decide para onde o link vai. title, target e rel ajustam dicas e como o navegador abre esse destino. Aprenda-os como ferramentas opcionais sobre um texto de link sólido — não como substitutos de um texto descritivo.

Resposta direta

• title="…" — texto de tooltip consultivo opcional ao passar o mouse (o suporte e a utilidade variam; nunca dependa só dele)
• target="_blank" — abrir em uma nova aba ou janela
• Com _blank, defina também rel="noopener noreferrer" para que a nova página não possa assumir o controle total da sua aba original por meio de window.opener (padrão mais seguro no dia a dia)
  Mantenha a navegação dentro do site na mesma aba por padrão. Reserve _blank para casos em que permanecer na sua página realmente ajuda — muitas vezes referências externas ou downloads.

title, target e rel em um relance

Um tooltip title útil

Use title quando uma dica curta agrega valor além do texto visível do link. Não cole a mesma frase nos dois lugares esperando dobrar a clareza — as experiências de leitores de tela e de hover diferem, e a repetição vazia desperdiça atenção.

Lendo o exemplo de title

• O texto visível Beginner guide permanece o rótulo principal
• title adiciona uma string consultiva breve ao passar o mouse em muitos navegadores de desktop
• Celular e tecnologias assistivas podem não expor title da mesma forma — mantenha o texto visível forte
• O href ainda aponta para guide.html; title não navega sozinho

Nova aba com um rel mais seguro

Abrir um site externo em uma nova aba pode deixar sua lição aberta. Combine _blank com rel="noopener noreferrer" como hábito mais seguro padrão nesses casos.

Por que noopener e noreferrer

• noopener reduz o risco de a nova página manipular sua aba original via window.opener
• noreferrer também evita enviar um referrer em muitos navegadores (efeito colateral de privacidade; ainda comumente ensinado com este padrão)
  Você não precisa de teoria profunda de segurança de navegador neste curso — memorize os atributos emparelhados para links externos _blank e siga em frente.

Não use blank em tudo

Novas abas se multiplicam. Se cada link da barra lateral abre _blank, os usuários perdem a história simples do botão Voltar e acabam com uma pilha de abas. Prefira links na mesma aba para suas próprias páginas (about.html, próxima lição, início). Use _blank ao sair do seu site ou quando o requisito do produto pedir claramente.

title não é o título da página

O <title> do documento em head rotula a aba inteira. O atributo title em um a é só uma dica naquele link. Funções diferentes, palavra semelhante em inglês — não os confunda.

Pratique no seu editor

1. Adicione um link local com texto visível claro e um title útil que acrescente um detalhe extra.
2. Adicione um link externo com target="_blank" e rel="noopener noreferrer".
3. Passe o mouse (no desktop) para ver o tooltip; clique para confirmar uma nova aba.
4. Mantenha um terceiro link interno sem _blank e confirme que ele substitui a aba atual normalmente.
5. Reescreva qualquer title que apenas repita o texto do link sem nenhuma informação nova.

Erros fáceis

• Usar _blank em cada item de menu interno
• Esquecer rel="noopener noreferrer" em links externos _blank
• Escrever um title inútil que só ecoa o texto do link
• Achar que title ou target podem substituir um href ausente
• Confundir o atributo title do link com o elemento <title> do documento

Resumo

• title pode adicionar uma dica curta ao passar o mouse; o texto visível do link permanece principal
• target="_blank" abre uma nova aba ou janela
• Combine _blank com rel="noopener noreferrer" para links externos mais seguros
• Prefira navegação na mesma aba para suas próprias páginas
• O href permanece o destino; esses atributos só refinam a experiência