HTML ลิงก์หน้าเดียวกัน ด้วย Skip links

HTML ลิงก์หน้าเดียวกัน ด้วย Skip links บทความนี้สอนสร้างไฮเปอร์ลิงก์แบบ Skip links คือลิงก์ที่ใช้สำหรับวิ่งไปข้อมูลภายในหน้าเดียวกัน หรือลิงก์หน้าเดียวกัน โดยใช้แท็ก a ร่วมกับ attribute id สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML ลิงก์หน้าเดียวกัน ด้วย Skip links

<a href="#product">สินค้าทั้งหมด</a>
...
...
...
...
<div id="product"></div>

HTML ลิงก์หน้าเดียวกัน จากตัวอย่างโค้ดมี 2 ส่วนคือ ส่วนที่เป็นจุดลิงก์ กับส่วนที่เป็นปลายทางของเนื้อหาภายในหน้าเดียวกันที่ลิงก์จะวิ่งไป มีรายละเอียดดังนี้

1. ส่วนที่เป็นจุดลิงก์ คือ <a href="#product"></a> ให้กำหนดชื่อที่ต้องการไว้หลังเครื่องหมาย #

2. ส่วนที่เป็นปลายทางของเนื้อหา คือ <div id="product"></div> ให้ใส่ชื่อที่ตั้งไว้ในข้อ 1 ลงใน attribute id โดยไม่ต้องใส่ #

3. เมื่อผู้ใช้งานกดลิงก์แบบ Skip links โปรแกรมจะวิ่งไปที่เนื้อหาที่อยู่ในหน้าเดียวกัน ตามชื่อที่ระบุไว้ใน href และ id ซึ่งชื่อต้องเหมือนกัน เป็นการลิงก์หน้าเดียวกัน ด้วย Skip links ของ HTML