แอตทริบิวต์ target
แอตทริบิวต์ target ระบุว่าจะเปิดลิงก์ที่ไหนเมื่อผู้ใช้คลิก
หากคุณคลิกลิงก์ด้านล่าง คุณจะถูกนำไปหน้าหน้าของ TechStacker ในแท็บ/หน้าต่างเบราว์เซอร์เดียวกับที่คุณอยู่ตอนนี้:
<a href="https://techstacker.com/">Link to front page</a>ดังนั้นหากคุณลิงก์ไปเว็บไซต์อื่น ผู้ใช้จะถูกย้ายออกจากเว็บไซต์ของคุณ ไปยังเว็บไซต์ที่คุณลิงก์ไป คุณอาจต้องการหรือไม่ต้องการสิ่งนี้
สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น เอลิเมนต์ <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)
สำคัญ: เมื่อคุณใช้ target="_blank" คุณควรเพิ่มแอตทริบิวต์ noopener พร้อมด้วยเพื่อเหตุผลด้านความปลอดภัย อย่างน้อยเมื่อคุณลิงก์ไปเว็บไซต์ภายนอก อ่านเพิ่มเติมเกี่ยวกับแอตทริบิวต์ noopener
