Ligações e imagens — folha rápida

Sintaxe de ligações

Ligações inline

[texto do link](https://www.markdownlang.com)
[link com título](https://www.markdownlang.com "título do link")

Ligações por referência

[texto do link][ref]
[texto do link][]

[ref]: https://www.markdownlang.com "título opcional"
[texto do link]: https://www.markdownlang.com

Auto‑links

<https://www.markdownlang.com>
<email@example.com>

Ligações âncora

[Ir para o título](#nome-do-titulo)
[Voltar ao topo](#top)

Sintaxe de imagens

Imagem inline

![texto alternativo](image.jpg)
![texto alternativo](image.jpg "título da imagem")

Imagem por referência

![texto alternativo][img-ref]

[img-ref]: image.jpg "título opcional"

Imagem com link

[![texto alternativo da imagem](image.jpg)](https://www.markdownlang.com)

Tamanho específico

<img src="image.jpg" alt="texto alternativo" width="300" height="200">

Combinações comuns

Imagem com link

[![Logótipo do projeto](logo.png)](https://github.com/user/repo)

Imagem centrada

<div align="center">
  <img src="image.jpg" alt="descrição">
</div>

Imagens lado a lado

<img src="img1.jpg" width="48%"> <img src="img2.jpg" width="48%">

Boas práticas

Tipo	Sugestão	Exemplo
Texto do link	Usa texto descritivo	✅ [Guia do utilizador]()
Texto do link	Evita "clique aqui"	❌ [clique aqui]()
Ficheiro de imagem	Usa caminho relativo	✅ ./images/pic.jpg
Texto alternativo	Descreve o conteúdo	✅ ![captura da interface]()
Formato	Formatos web‑friendly	✅ JPG, PNG, WebP

HTML 输出

Markdown	HTML
[text](url)	<a href="url">text</a>
	<img src="img" alt="alt">
<url>	<a href="url">url</a>

Erros comuns

❌ Exemplo incorreto:
[link(https://www.markdownlang.com)     ← falta parêntese direito
![imagem](image.jpg             ← falta parêntese direito
[ link ]( https://www.markdownlang.com ) ← espaços desnecessários

✅ Exemplo correto:
[link](https://www.markdownlang.com)
![imagem](image.jpg)
[link](https://www.markdownlang.com)