เรียนรู้พื้นฐานการใช้งาน Element HTML <a> สำหรับสร้างลิงก์โต้ตอบบนเว็บ
ใน HTML แท็ก <a> ใช้กำหนด Element ลิงก์/ไฮเปอร์ลิงก์:
<a>Link element</a>Element ลิงก์ยังเรียกว่า Element Anchor (แองคอร์)
Link vs Hyperlink:
- Link คือที่อยู่ที่ระบุตำแหน่งบนอินเทอร์เน็ต
- Hyperlink เป็น ประเภทของ Link ที่คลิกได้เพื่อกระทำบางอย่างหรือไปยังปลายทาง เช่น เว็บไซต์
ในการสนทนาทั่วไป คส่วนใหญ่พูด "Hyperlink" และ "Link" สลับกันได้
วิธีใช้ Element 'a'
Element <a> รับแอตทริบิวต์หลายตัว โดยสำคัญที่สุดคือ href ใช้ระบุปลายทาง URL เมื่อผู้ใช้คลิก
ตัวอย่างลิงก์ไปหน้าแรก TechStacker:
<a href="https://techstacker.com">Go to TechStacker's front page.</a>ลิงก์ข้างต้นประกอบด้วย:
- แท็กเปิดลิงก์
<a> - ชื่อแอตทริบิวต์:
href - ค่าแอตทริบิวต์:
"https://techstacker.com"(URL ปลายทาง) - ข้อความลิงก์
Go to TechStacker's front page.(มองเห็นได้) - แท็กปิดลิงก์
</a>
ลิงก์ข้างต้นแสดงจริงเป็น:
Go to TechStacker's front page.
Absolute vs Relative URLs
ค่าแอตทริบิวต์ (ปลายทาง URL) สามารถเป็น Absolute หรือ Relative URL Path ตัวอย่างก่อนหน้าเป็น Absolute URL:
<a href="https://techstacker.com">Go to TechStacker's front page.</a>นี่ เป็น Relative URL ไปยังบทความในเว็บไซต์นี้:
<a href="/html-tags-vs-html-elements-difference" >HTML Tags vs. HTML Elements.</a >นี่คือ Absolute URL ของบทความเดียวกัน:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference" >HTML Tags vs. HTML Elements.</a >สังเกตว่า Absolute URL มีข้อมูลมากกว่า Relative URL:
- มีโปรโตคอล (
https) - มีโดเมนเนม
techstacker.com - มี Slug
/html-tags-vs-html-elements-difference
Relative URL มีแค่ Slug เท่านั้น
เมื่อไหร่ใช้แบบไหน?
- ใช้ Relative URLs เมื่อลิงก์ไปยังเนื้อหาในเว็บไซต์ตัวเอง
- ใช้ Absolute URLs เมื่อลิงก์ไปยังเนื้อหาในเว็บไซต์อื่น
Relative URLs ใช้ได้เฉพาะเนื้อหาที่เก็บอยู่บน เซิร์ฟเวอร์เดียวกัน กับเว็บไซต์ของคุณ มิฉะนั้นใช้ Absolute URLs
หากสับสนระหว่าง HTML Tags และ HTML Elements อ่านบทความ HTML Tags vs. HTML Elements
อีกแอตทริบิวต์สำคัญที่ใช้บ่อย โดยเฉพาะเรื่อง SEO:
แอตทริบิวต์ Target
แอตทริบิวต์ target ระบุว่าจะเปิดลิงก์ที่ไหนเมื่อผู้ใช้คลิก
หากคลิกลิงก์นี้:
<a href="https://techstacker.com/">Link to front page</a>คุณจะไปหน้าแรก TechStacker ในแท็บ/หน้าต่างเบราว์เซอร์เดิม หมายความว่าหากลิงก์ไปเว็บอื่น ผู้ใช้จะออกจากเว็บคุณ (อาจจะอยากหรือไม่อยากก็ได้)
สิ่งนี้เกิดเพราะโดยค่าเริ่มต้น Element <a> มีแอตทริบิวต์ target ค่า _self — เปิดในหน้าต่างเดียวกัน
ลิงก์นี้:
<a href="https://techstacker.com/"></a>ถูกอ่านโดยเบราว์เซอร์เหมือน:
<a href="https://techstacker.com/" target="_self"></a>ซึ่งอาจสับสน เพราะมองไม่เห็น (แต่ตอนนี้คุณรู้แล้ว)
หากต้องการเปิดในแท็บใหม่ ให้เปลี่ยนค่า _self เป็น _blank:
<a href="https://youtube.com" target="_blank" rel="noopener" >If you click this, the YouTube website opens in a new tab</a >เมื่อไหร่ใช้แบบไหน?
คำตอบง่ายๆ: หากไม่อยากให้ผู้ใช้ออกจากเว็บคุณ เช่น เพื่อ SEO ให้ใช้ target="_blank"
มิฉะนั้น ไม่ต้องทำอะไร ลิงก์จะเปิดในหน้าต่างเดิม (ผ่านค่า _self)
ใช้ Heading เป็นลิงก์
HTML Elements หลายตัวใช้เป็นลิงก์ได้ รวมถึง Heading นี่พบบ่อยมาก ต้องแค่ห่อ Element ที่ต้องการให้เป็นลิงก์ด้วยแท็ก <a></a>:
<a href="/html-for-beginners"> <h3>HTML for Beginners</h3> </a>ใช้ Image เป็นลิงก์
Element ลิงก์ยังทำให้รูปภาพเป็นลิงก์ได้ เช่น Thumbnail บทความหรือหน้าสินค้า แค่ห่อ Element <img> ด้วย <a></a>:
<a href="/tags/html"> <img src="../../thumbnails/html.png" /> </a>ตัวอย่างข้างต้นจะนำผู้ใช้ไปยัง Section บทความ HTML เมื่อคลิกรูปภาพ
ลองคลิกดู (ในชีวิตจริง):
