Links

ลิงก์คือเส้นใยที่ถักทอเว็บขึ้นมา ทุก navigation bar ทุกปุ่ม call-to-action ทุกข้อความ “อ่านเพิ่มเติม” — ภายใต้พื้นผิวแล้วล้วนเป็น HTML element เดียวกันทั้งหมด นั่นคือ <a> หรือ anchor element

ลองนึกถึงลิงก์เหมือน prototype connection ใน Figma คุณกำหนดต้นทาง (ข้อความหรือรูปภาพสักชิ้น) ปลายทาง (URL หรือ frame อื่น) แล้ว browser จัดการ transition ให้เมื่อผู้ใช้คลิก

Anchor element

<a href="https://example.com">Visit Example</a>

attribute href — ย่อมาจาก hypertext reference — เก็บ URL ปลายทางเอาไว้ ส่วนข้อความที่อยู่ระหว่าง opening tag และ closing tag คือสิ่งที่ผู้ใช้มองเห็นและคลิก

ลิงก์ภายในกับลิงก์ภายนอก

ลิงก์ภายนอก (External links) ชี้ไปยังเว็บไซต์อื่น ให้ใช้ URL เต็มที่ขึ้นต้นด้วย https://:

<a href="https://figma.com">Open Figma</a>

ลิงก์ภายใน (Internal links) ชี้ไปยังหน้าอื่นบนเว็บไซต์ เดียวกัน ให้ใช้ path ที่สัมพันธ์กับไฟล์ปัจจุบัน:

<a href="/about">About us</a>
<a href="../portfolio/index.html">My portfolio</a>

ลิงก์แบบ fragment กระโดดไปยัง section ที่เจาะจงบนหน้า เดียวกัน โดยพุ่งเป้าไปที่ attribute id:

<a href="#contact">Jump to Contact</a>
...
<section id="contact">...</section>

การเปิดในแท็บใหม่

เพิ่ม target="_blank" เพื่อเปิดลิงก์ในแท็บใหม่ของ browser แทนที่จะออกจากหน้าปัจจุบัน วิธีนี้นิยมใช้กับลิงก์ไปยังเว็บไซต์ภายนอก เพื่อให้ผู้ใช้ไม่หลุดจากตำแหน่งที่ค้างอยู่:

<a href="https://figma.com" target="_blank" rel="noopener noreferrer">
  Open Figma in a new tab
</a>

ใส่ rel="noopener noreferrer" ควบคู่ไปกับ target="_blank" เสมอ — เป็นการเพิ่มความปลอดภัยเล็ก ๆ น้อย ๆ ที่ไม่มีต้นทุนอะไรเลย

<nav>
  <a href="#">Home</a>
  <a href="#">Portfolio</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
<p>
  Follow my work on
  <a href="https://dribbble.com" target="_blank" rel="noopener noreferrer">Dribbble</a>.
</p>

ลองเปลี่ยนค่า href="#" สักอันเป็น https://google.com แล้วดูว่า URL อัปเดตในพรีวิว (ลิงก์ภายใน sandbox จะไม่นำทางไปไหน แต่ HTML นั้นถูกต้องแล้ว)

💡 เขียนข้อความลิงก์ให้มีความหมาย

หลีกเลี่ยงข้อความลิงก์อย่าง “click here” หรือ “read more” ผู้ใช้ screen reader มักนำทางในหน้าเว็บด้วยการกระโดดข้ามระหว่างลิงก์ — พวกเขาได้ยินเฉพาะข้อความลิงก์โดยไม่มีประโยคแวดล้อม การเขียนว่า “ดูพอร์ตโฟลิโอของเรา” หรือ “ดาวน์โหลด PDF กรณีศึกษา” จะให้บริบทครบถ้วน นี่คือ quick win ด้าน accessibility และ usability ที่ไม่มีต้นทุนอะไรสำหรับผู้เขียนเลย

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ทำ link ที่ดูไม่เหมือน link (ไม่มี underline หรือสีต่าง) ทำให้ user ไม่รู้ว่าคลิกได้
ลืม hover/visited state
ใช้ <div onclick> แทน <a> จริง

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ข้อความสีม่วง” แต่ developer เห็นว่า <a> ให้ keyboard navigation, “เปิดในแท็บใหม่” ผ่าน right-click และ SEO crawler ตาม link ได้ฟรีทั้งหมด

💡 ตัวอย่างจากของจริง

Wikipedia ใช้สี link ที่ต่างจาก visited link ชัดเจน ช่วยให้ user รู้ว่าเคยอ่านหน้าไหนไปแล้ว