แอตทริบิวต์ rel ของ <area>: กำหนดความสัมพันธ์กับเอกสารลิงก์

แอตทริบิวต์ rel ของ <area> คืออะไร?

แอตทริบิวต์ rel ของแท็ก <area> ใช้สำหรับ ระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันกับเอกสารที่ลิงก์ไป แอตทริบิวต์นี้เพิ่มเข้ามาใน HTML5 สำหรับ <area>

ไวยากรณ์ (Syntax)

<area rel="value">

ค่าที่ใช้ได้ (Link Types)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>การเรียนรู้</h2>
  <img src="/images/usemap.gif" alt="usemap" usemap="#tutorials" />
  <map name="tutorials">
    <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" 
          href="/perl/index.htm" alt="Perl Tutorial" target="_blank" rel="alternate" />
    <area shape="rect" coords="22,83,126,125" 
          alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
    <area shape="circle" coords="73,168,32" 
          alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
  </map>
</body>
</html>

คำอธิบาย

ในตัวอย่าง พื้นที่ Perl Tutorial ตั้ง rel="alternate" หมายความว่าเป็นเวอร์ชันสำรอง (Alternate version) ของเอกสารปัจจุบัน

ประโยชน์ของ rel

• ช่วย SEO เข้าใจโครงสร้างเนื้อหา
• บราวเซอร์/ปลั๊กอินอาจใช้ข้อมูลนี้ (เช่น prefetch)
• nofollow สำคัญสำหรับลิงก์โฆษณา/ผู้ใช้สร้าง