แอตทริบิวท์ hreflang ของ <area> ใน HTML

แอตทริบิวท์ hreflang ของ <area> ใน HTML

แอตทริบิวท์ hreflang ขององค์ประกอบ <area> ใช้สำหรับกำหนดภาษาของ URL ในพื้นที่ (area) รูปแบบการใช้งานมีดังนี้:

<area hreflang="language_code">

โดย language_code คือรหัสภาษา ISO เช่น en สำหรับภาษาอังกฤษ fr สำหรับภาษาฝรั่งเศส ja สำหรับภาษาญี่ปุ่น ฯลฯ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>การเรียนรู้</h2>
  <p>เรียนรู้เทคโนโลยีเหล่านี้ได้อย่างง่ายดาย....</p>
  <img src="/images/usemap.gif" alt="usemap" border="0" 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" download="perl" hreflang="en"/>
    <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
          href="/html/index.htm" target="_blank" download="html" hreflang="en"/>
    <area shape="circle" coords="73,168,32" alt="PHP Tutorial"
          href="/php/index.htm" target="_blank" download="php" hreflang="en"/>
  </map>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เราได้ตั้งค่าแมปบนภาพดังนี้:

<img src="/images/usemap.gif" alt="usemap" border="0" 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" download="perl" hreflang="en"/>
  <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
        href="/html/index.htm" target="_blank" download="html" hreflang="en"/>
  <area shape="circle" coords="73,168,32" alt="PHP Tutorial"
        href="/php/index.htm" target="_blank" download="php" hreflang="en"/>
</map>

ภาษาของ URL ถูกกำหนดโดยใช้แอตทริบิวท์ hreflang:

hreflang="en"

ซึ่งระบุว่าเป็นภาษาอังกฤษ