Como personalizar links e dicas de ferramentas no Markdown

O editor Markdown suporta sintaxe padrão de links e, por meio de HTML inline, uma série de melhorias — dicas de ferramenta para passar o mouse de texto, estilo de link, abertura de links em novas abas e ícones ou emojis personalizados. Este artigo aborda todas essas técnicas.

Quando usar essas técnicas

Links âncora internos — ajudam os leitores a saltar para uma seção específica dentro de um artigo longo sem precisar rolar a página.
Links entre artigos — conecte artigos relacionados na sua base de conhecimento para guiar os leitores por um tema.
Dicas — explique abreviações, termos técnicos ou detalhes opcionais em linha sem sobrecarregar a página.
Links estilizados — use texto em negrito ou itálico para chamar atenção para referências importantes.
Abrir em uma nova aba — mantenha os leitores no artigo atual enquanto permite que abram uma referência em segundo plano.
Ícones e emojis — adicione sinais visuais a chamadas, rótulos ou indicadores de status.

Referência rápida

Objetivo	Sintaxe
Elo âncora interno	`[Link text](#heading-slug)`
Link cruzado entre artigos	`[Link text](../article-slug)`
Link com dica de ferramenta	`[Link text](#section "Tooltip text")`
Texto do link em negrito	`[Bold text](url)`
Texto do link itálico	`[_Italic text_](url)`
Abrir em uma nova aba	`<a href="url" target="_blank">Link text</a>`
Passe o mouse sobre a dica de texto	`<span title="Full term">Abbreviation</span>`
Emoji inline	Cole diretamente — 📌 ⚠️ ✅
Ícone inline a partir da URL	`<img src="icon-url" width="16" height="16"> Label`

Como adicionar links no Markdown

Links âncora internos

Um link âncora interno leva os leitores a um título específico dentro do mesmo artigo.

Adicione um título ao seu artigo. Por exemplo:
```
## How it works
```
Crie o link usando este padrão:
- Texto do link dentro de colchetes quadrados [ ]
- # seguido pelo texto do título entre parênteses ( )
- Converta o cabeçalho para minúsculas e substitua os espaços por hífens
```
[Jump to How it works](#how-it-works)
```
Quando um leitor clica neste link, ele é levado diretamente para a ## How it works seção.

DICA PROFISSIONAL

Links âncora são insensíveis a maiúsculas minúsculas e espaços se tornam hífens automaticamente. Remova quaisquer caracteres especiais do rumo antes de construir o slug âncora.

Links entre artigos

Para linkar para outro artigo na sua base de conhecimento, use o prefixo do artigo slug com ../ para avançar um nível em relação à posição atual do artigo.

[Go to Getting Started](../getting-started)

Este link sobe um nível em relação ao artigo atual e abre o Getting Started artigo.

Adicionando uma dica de ferramenta a um link

Adicione uma dica de ferramenta que apareça ao passar o curso, colocando o texto da dica entre aspas após o alvo do link, dentro dos parênteses.

[Troubleshooting guide](#troubleshooting "Click to view troubleshooting section")

Passando o mouse sobre o link exibe: Clique para ver a seção de solução de problemas.

Texto do link de estilo

Aplique formatação em negrito ou itálico ao texto de link, envolvendo o texto dentro dos colchetes quadrados com a sintaxe padrão do Markdown.

[**Important update**](../release-notes)
[_Read the guide_](../setup-guide)

Markdown editor showing a bold link and an italic link rendered in the article preview.

Abrindo um link em uma nova aba

Por padrão, os links do Markdown abrem na mesma aba. Use uma tag HTML <a> com target="_blank" para abrir o link em uma nova aba.

<a href="https://docs.document360.com/docs/getting-started" target="_blank">Go to Getting Started</a>

Como adicionar dicas de hover ao texto

Use a tag HTML <span> com um title atributo para exibir uma dica de ferramenta quando um leitor pairar sobre qualquer palavra ou frase — não apenas links.

<span title="display-text">term</span>

Exemplo — expanda uma abreviação para o hover:

<span title="Search Engine Optimization">SEO</span>

Passando o mouse sobre os displays SEO : Otimização para Mecanismos de Busca.

Markdown editor showing the span title code snippet for the SEO tooltip example.

Desfecho:

Rendered article showing the SEO abbreviation with a tooltip displaying Search Engine Optimization on hover.

Como adicionar ícones e emojis

Usando emojis

Copie e cole emojis diretamente no seu conteúdo. Eles renderizam em linha sem nenhuma sintaxe adicional.

📌 Important note
⚠️ Caution
✅ Completed

Usando ícones de uma URL

Use uma tag HTML <img> para inserir um ícone de uma URL externa alinhada com seu texto.

<img src="https://img.icons8.com/color/48/000000/info.png" width="16" height="16"> Information

Substitua a src URL, width, height, e rotule o texto pelos valores necessários.

Markdown editor showing an inline icon rendered next to text using an HTML img tag with an external URL.

Melhores práticas

Use texto descritivo do link — evite "clique aqui" ou "leia mais". Use texto que indique aos leitores para onde o link vai, como "Guia de Iniciação" ou "Referência da API".
Teste links âncora após editar títulos — se você renomear um título, qualquer link âncora apontando para ele vai quebrar. Atualize o slug em todos os links que referenciam o título.
Use tooltips para abreviações, não definições — tooltips são lidos apenas no passa-mouse e não são acessíveis a todos os usuários. Para definições essenciais, inclua a explicação no texto principal.
Mantenha o uso consistente de emojis e ícones — concorde com um pequeno conjunto de ícones ou emojis para sua base de conhecimento (por exemplo, ⚠️ para avisos, ✅ para etapas concluídas) e use-os de forma consistente entre os artigos.

Documentation Index