แท็ก <abbr> ใน HTML ใช้สำหรับระบุคำย่อ (Abbreviation) ช่วยให้เบราว์เซอร์ โปรแกรมอ่านหน้าจอ และเครื่องมือค้นหาเข้าใจความหมายของคำย่อ
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้วิธีรวมคำย่อใน HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML abbr Tag</title>
</head>
<body>
<p>
<abbr title="Private">pvt.</abbr>
<br />
<abbr title="World Health Organization">WHO</abbr> promotes the global game.
<br />
</p>
</body>
</html>
แอตทริบิวต์สำคัญ: title
แอตทริบิวต์ title ใช้ระบุความหมายเต็มของคำย่อ เมื่อผู้ใช้วางเมาส์เหนือคำย่อ จะเห็น tooltip แสดงคำอธิบาย
ตัวอย่างการใช้งานเพิ่มเติม
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language.
<br>
<abbr title="Cascading Style Sheets">CSS</abbr> describes how HTML elements are displayed.
<br>
<abbr title="JavaScript Object Notation">JSON</abbr> is a lightweight data format.
<br>
<abbr title="Application Programming Interface">API</abbr> allows applications to communicate.
</p>
การจัดสไตล์ด้วย CSS
abbr {
text-decoration: underline dotted;
cursor: help;
border-bottom: 1px dotted #666;
}
abbr:hover {
border-bottom-color: #000;
}
ความแตกต่าง: <abbr> vs <acronym>
<abbr>- ใช้สำหรับคำย่อทุกประเภท (รวม acronym ด้วย) มาตรฐาน HTML5<acronym>- ใช้สำหรับ Acronym เฉพาะ (คำย่อที่อ่านเป็นคำเดียว เช่น NASA, LASER) ล้าสมัยใน HTML5
แนวทางปฏิบัติ: ใช้ <abbr> สำหรับคำย่อทุกประเภท รวมถึง Acronym ด้วย เพราะ <acronym> ถูกลบออกใน HTML5
ประโยชน์ด้าน Accessibility และ SEO
- โปรแกรมอ่านหน้าจอ (Screen readers) สามารถอ่านความหมายเต็มได้
- เครื่องมือค้นหา (Search engines) เข้าใจเนื้อหามากขึ้น
- ช่วยผู้อ่านที่ไม่คุ้นเคยคำย่อเข้าใจได้ทันที
