มารู้จักกับ tag HTML กันอีก 2 ตัว เพื่อเพิ่มคุณภาพของเว็บเพจ ให้แน่นปึ้ก ตามหลักของ web standards
2 tag ที่ว่านั้นก็คือ <acronym>และ <abbr>

<acronym> มาจากคำว่า acronym แปลว่า ชื่อย่อที่ผสมมาจากตัวอักษรขึ้นต้นของแต่ละคำ เช่น

• HTML มาจาก Hypertext Markup Language
• CSS มาจาก Cascading Style Sheets

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

<acronym title=”Radio Detecting And Ranging”>radar</acronym>

<abbr> มาจากคำว่า abbreviation แปลว่า คำย่อ การย่อ เช่น

• การย่อแบบ ใช้คำขึ้นต้น เช่น assoc. ย่อมาจาก association, etc. มาจาก et cetera
• การย่อแบบใช้ตีวอักษรขึ้นต้น (ซึ่งก็คือ acronym)

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

<abbr title=”Cascading Style Sheets”>CSS</abbr>

อาจกล่าวได้ว่า<acronym> เป็น subset ของ <abbr> นั่นเอง

ทำไมต้องใช้ <acronym> <abbr>

เราใช้ 2 ตัวนี้ เพื่อเพิ่มความหมายและข้อมูลให้คำย่อต่างๆ กรณีที่หน้าเว็บเพจ ของคุณ มีการใช้คำย่อ และศัพท์ทางเทคนิคที่คนธรรมดาไม่เข้าใจ และใช้เพื่อให้ screen reader สามารถอ่านได้ สำหรับคนที่มีความผิดปกติทางสายตา

จริงๆแล้วผมเองก็ไม่ค่อยได้ใช้ซักเท่าไร แต่ที่เคยใช้ก็มักจะใช้ <abbr> ซะมากกว่า เพราะมันสั้นดี มาดูการเพิ่ม style ให้ <abbr>และ <acronym>

abbr, acronym
{
border-bottom: 1px dashed;
cursor: help;
}

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

RSS     URI      CSS

และอีกเช่นเคย IE6 สามารถแสดงผล acronym แต่พอใช้ abbr กลับไม่มีไรเกิดขึ้นซะงั้น ส่วน Firefox ใช้ได้ทั้ง 2 ตัว
หนทางแก้ไขมี 2 วิธี
วิธีแรก เขียนแบบนี้

<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

แต่ใครจะมานั่งเขียน span ให้มันทุกตัวกัน เหนื่อยตายเลย แค่จะใช้ abbr ยังขี้เกียจ

วิธีที่ 2 ใช้ javascript

<script type=”text/javascript”>
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, ‘<ABBR $1><SPAN class=\”abbr\” $1>$2</SPAN></ABBR>’);
document.body.innerHTML = newBodyText;
}
}

window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;
</script>

เท่านี้ครับ copy ไปใช้ได้เลย abbr ทุกตัว ก็จะมีคำอธิบายขึ้นมา สำหรับ IE6
หลายคนอาจจะสงสัยว่า จะใช้ทำไม ขี้เกียจจัง ต้องมานั่งเขียนเพิ่ม แต่ก็นั่นล่ะครับ มันคือมาตรฐาน เป็นการเพิ่มคุณภาพ เรียกได้ว่า ติด ISO ให้ webpage ของคุณนั่นเอง “abbr รุ่น มีครอบไว้ ไม่งง”