สรุปลิงก์และรูปภาพ

ไวยากรณ์ลิงก์

ลิงก์แบบอินไลน์

[ข้อความลิงก์](https://www.markdownlang.com)
[ลิงก์พร้อมชื่อเรื่อง](https://www.markdownlang.com "ชื่อเรื่องลิงก์")

ลิงก์แบบอ้างอิง

[ข้อความลิงก์][ref]
[ข้อความลิงก์][]

[ref]: https://www.markdownlang.com "ชื่อเรื่อง (ไม่บังคับ)"
[ข้อความลิงก์]: https://www.markdownlang.com

ลิงก์อัตโนมัติ

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

ลิงก์สมอ (Anchor)

[ไปยังหัวเรื่อง](#ชื่อหัวเรื่อง)
[กลับขึ้นด้านบน](#top)

ไวยากรณ์รูปภาพ

รูปภาพแบบอินไลน์

![ข้อความทดแทน](image.jpg)
![ข้อความทดแทน](image.jpg "ชื่อรูปภาพ")

รูปภาพแบบอ้างอิง

![ข้อความทดแทน][img-ref]

[img-ref]: image.jpg "ชื่อเรื่อง (ไม่บังคับ)"

รูปภาพที่เป็นลิงก์

[![ข้อความทดแทนของรูปภาพ](image.jpg)](https://www.markdownlang.com)

ระบุขนาดด้วย HTML

<img src="image.jpg" alt="ข้อความทดแทน" width="300" height="200">

การใช้งานร่วมกันที่พบบ่อย

รูปภาพที่มีลิงก์

[![โลโก้โครงการ](logo.png)](https://github.com/user/repo)

จัดรูปภาพกึ่งกลาง

<div align="center">
  <img src="image.jpg" alt="คำอธิบาย">
</div>

วางรูปภาพเรียงข้างกัน

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

แนวปฏิบัติที่ดี

ประเภท	คำแนะนำ	ตัวอย่าง
ข้อความลิงก์	ใช้ข้อความบรรยาย	✅ [คู่มือผู้ใช้]()
ข้อความลิงก์	เลี่ยงคำว่า "คลิกที่นี่"	❌ [คลิกที่นี่]()
ไฟล์รูปภาพ	ใช้พาธแบบสัมพัทธ์	✅ ./images/pic.jpg
ข้อความทดแทน	บรรยายสิ่งที่เห็น	✅ ![ภาพหน้าจอ UI]()
รูปแบบไฟล์	ใช้รูปแบบเหมาะกับเว็บ	✅ JPG, PNG, WebP

เอาต์พุต HTML

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

ข้อผิดพลาดที่พบบ่อย

❌ ตัวอย่างที่ผิด:
[ลิงก์(https://www.markdownlang.com)     ← ขาดวงเล็บปิด
![รูปภาพ](image.jpg             ← ขาดวงเล็บปิด
[ ลิงก์ ]( https://www.markdownlang.com ) ← มีช่องว่างที่ไม่จำเป็น

✅ ตัวอย่างที่ถูกต้อง:
[ลิงก์](https://www.markdownlang.com)
![รูปภาพ](image.jpg)
[ลิงก์](https://www.markdownlang.com)