เพิ่มความหมายด้วย acronym และ abbr
Jun 10th
มารู้จักกับ 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 รุ่น มีครอบไว้ ไม่งง”
เห็นด้วยอย่างยิ่งครับ ที่นักพัฒนาเว็บไซต์ควรจะมาเห็นความสำคัญกับ Tag นี้
ทำให้เนื้อหาของท่านมีน้ำหนักเพิ่มมากขึ้น ผู้อ่านก็จะเข้าใจเนื้อหาของท่านได้เร็ว
และเข้าใจง่ายอีกด้วย ผมคนนึงแหละที่พยายามใช้ Tag นี้ช่วยเหลืออยู่
ปล. คนไม่รู้ ไม่ได้โง่ แค่ยังไม่เคยเรียนรู้เรื่องนั้นมาก่อน แค่นั้นเอง กิ้วกิ้ว:)>-
มีผลต่อ SEO รึเปล่าครับแบบนี้
น่าจะมีผลนะครับ เพราะตัวหนังสือคำเต็มในโค้ด ก็ถูกอ่านโดย bot แน่ๆ แต่คำย่อส่วนใหญ่ บอทก็รู้จักอยู่แล้ว
มีผลต่อการ index ครับ แต่มีผลต่ออันดับมั้ย ก็อาจจะมีเพราะคุณสามารถซ้ำคำได้บ่อยๆ
แต่ที่แน่ๆ มีผลต่อคนอ่านครับ ช่วยให้คนอ่านแล้วเข้าใจ :x
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
Thank you for good information