HTML5 การใช้งาน abbr Tag

ใน HTML5 แท็ก <abbr> ใช้สำหรับระบุคำย่อหรืออักษรย่อ เมื่อผู้ใช้วางเมาส์เหนือคำย่อ เบราว์เซอร์สามารถแสดงคำอธิบายแบบเต็มซึ่งถูกระบุไว้ในแอตทริบิวต์ title แท็กนี้ช่วยให้เนื้อหามีความชัดเจนมากขึ้น และยังช่วยปรับปรุง SEO ด้วยการอธิบายคำย่อที่ใช้

รูปแบบการใช้งานพื้นฐาน

<abbr title="คำอธิบายแบบเต็ม">คำย่อ</abbr>

ข้อสำคัญ

• แอตทริบิวต์ title เป็นส่วนสำคัญที่แสดงคำเต็มของคำย่อ
• สามารถจัดการแสดงผลแท็กนี้ด้วย CSS เพื่อให้มีความสวยงามและชัดเจนยิ่งขึ้น

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

การใช้คำย่อทั่วไป

<p>สำนักงานใหญ่ของบริษัทตั้งอยู่ใน <abbr title="ประเทศสหรัฐอเมริกา">USA</abbr>.</p>

เมื่อผู้ใช้วางเมาส์เหนือคำว่า “USA” เบราว์เซอร์จะแสดงข้อความว่า “ประเทศสหรัฐอเมริกา”

การใช้คำย่อที่เป็นอักษรย่อ

<p>เราจะออกเวอร์ชันถัดไปของซอฟต์แวร์ภายใต้ลิขสิทธิ์ <abbr title="GNU's Not Unix">GNU</abbr>.</p>

เมื่อวางเมาส์เหนือคำว่า “GNU” ผู้ใช้จะเห็นคำอธิบายเต็ม

การใช้คำย่อในฟอร์ม: เราสามารถใช้คำย่อในแบบฟอร์มเพื่อแสดงหน่วยวัด

<label for="height">กรอกความสูงของคุณใน <abbr title="เซนติเมตร">ซม.</abbr>:</label>
<input type="text" id="height" name="height">

คำว่า “ซม.” จะแสดงคำเต็มว่า “เซนติเมตร” เมื่อวางเมาส์ด้านบน

การใช้คำย่อกับโซนเวลา: เมื่อพูดถึงโซนเวลา เราสามารถใช้แท็ก <abbr>

<p>การประชุมถูกกำหนดไว้ที่เวลา 10:00 น. <abbr title="เวลามาตรฐานกรีนิช">GMT</abbr>.</p>

เมื่อวางเมาส์เหนือคำว่า “GMT” จะเห็นคำอธิบายว่า “เวลามาตรฐานกรีนิช”

การเพิ่มประสิทธิภาพการเข้าถึง: แท็ก <abbr> ช่วยเพิ่มการเข้าถึงสำหรับผู้ใช้ที่ใช้ Screen Reader เช่น

<p>สำนักงานของเราที่ <abbr title="แคลิฟอร์เนีย">CA</abbr> เปิดทำการตลอดทั้งปี.</p>

การจัดการแสดงผลแท็ก <abbr> ด้วย CSS

เราสามารถปรับแต่งการแสดงผลของแท็กนี้เพื่อให้ดูมีปฏิสัมพันธ์ได้

abbr {
  border-bottom: 1px dotted;
  cursor: help;
}

การปรับแต่งนี้จะทำให้คำย่อดูน่าสนใจและผู้ใช้ทราบว่ามีข้อมูลเพิ่มเติมเมื่อวางเมาส์เหนือ

การรองรับของเบราว์เซอร์

แท็ก <abbr> รองรับโดยเบราว์เซอร์หลักทุกตัว แต่ใน Internet Explorer เวอร์ชันเก่า (IE8 และต่ำกว่า) อาจไม่แสดงข้อความจากแอตทริบิวต์ title เมื่อวางเมาส์เหนือคำย่อ

สรุป

แท็ก <abbr> เป็นเครื่องมือที่ง่ายและมีประโยชน์ในการให้คำอธิบายคำย่อและอักษรย่อ ช่วยเพิ่มการเข้าถึงข้อมูล ความสะดวกในการใช้งาน และยังช่วยปรับปรุง SEO ของเว็บไซต์ได้อย่างมีประสิทธิภาพ