แอตทริบิวต์เป้าหมาย
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
