Target Attribute เป็นหนึ่งในคุณสมบัติสำคัญของแท็ก <a> ที่ช่วยกำหนดว่าหน้าเว็บลิงก์จะเปิดที่ไหน การใช้งานอย่างถูกต้องช่วยปรับปรุง UX (User Experience) และช่วยจัดการโครงสร้างเว็บที่มี iframe หรือการทำงานหลายแท็บให้เหมาะสม
รายละเอียดของค่าใน Target Attribute
- _self (ค่าเริ่มต้น) เปิดลิงก์ในหน้าต่างหรือแท็บเดียวกับที่คลิก เหมาะสำหรับการนำทางในเว็บไซต์เดียวกัน
<a href="about.html" target="_self">About Us</a>
- _blank เปิดลิงก์ในหน้าต่างหรือแท็บใหม่ เหมาะสำหรับการลิงก์ไปยังเว็บไซต์อื่นหรือลิงก์ดาวน์โหลด
<a href="https://example.com" target="_blank">Visit Example</a>
- _parent เปิดลิงก์ในเฟรมแม่ (Parent Frame) เหมาะสำหรับเว็บไซต์ที่ใช้ iframe
<iframe src="content.html" name="frame-example"></iframe>
<a href="parent-page.html" target="_parent">Go to Parent</a>
- _top เปิดลิงก์ในหน้าต่างหลักของเบราว์เซอร์ (Top Frame) เหมาะสำหรับการออกจาก iframe เพื่อแสดงเนื้อหาเต็มหน้าจอ
<iframe src="content.html"></iframe>
<a href="homepage.html" target="_top">Go to Homepage</a>
ตัวอย่างการใช้งานที่เหมาะสม
- เว็บไซต์เนื้อหาเดียว: ใช้
_selfเพื่อให้การนำทางภายในเว็บราบรื่น - ลิงก์ภายนอก: ใช้
_blankเพื่อไม่ให้ผู้ใช้ออกจากหน้าเว็บหลัก - เว็บที่ใช้ iframe: ใช้
_parentหรือ_topเพื่อควบคุมการแสดงผลเฟรม
<!DOCTYPE html>
<html lang="en">
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h1>HTML Links - Target Attribute</h1>
<p><a href="about.html" target="_self">Same Tab (Default)</a></p>
<p><a href="https://example.com" target="_blank">New Tab</a></p>
<p><a href="parent-page.html" target="_parent">Parent Frame</a></p>
<p><a href="homepage.html" target="_top">Full Window</a></p>
</body>
</html>
สรุป
การใช้งาน Target Attribute ให้เหมาะสม ดังนี้
_self: ใช้เมื่อต้องการให้นำทางในหน้าเดียวกัน_blank: ใช้เมื่อต้องการเปิดลิงก์ในแท็บใหม่_parent: ใช้กับเว็บที่มี iframe เพื่อเปิดในเฟรมแม่_top: ใช้เมื่ออยากให้ลิงก์ออกจากเฟรม