Home > Web Standards > เพิ่มความหมายด้วย acronym และ abbr

เพิ่มความหมายด้วย acronym และ abbr

มารู้จักกับ 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 รุ่น มีครอบไว้ ไม่งง”

Related Articles


Share
Categories: Web Standards
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. June 29th, 2007 at 15:56 | #1

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

    ปล. คนไม่รู้ ไม่ได้โง่ แค่ยังไม่เคยเรียนรู้เรื่องนั้นมาก่อน แค่นั้นเอง กิ้วกิ้ว:)>-

  2. December 10th, 2008 at 11:36 | #2

    มีผลต่อ SEO รึเปล่าครับแบบนี้

  3. December 10th, 2008 at 23:05 | #3

    น่าจะมีผลนะครับ เพราะตัวหนังสือคำเต็มในโค้ด ก็ถูกอ่านโดย bot แน่ๆ แต่คำย่อส่วนใหญ่ บอทก็รู้จักอยู่แล้ว

    มีผลต่อการ index ครับ แต่มีผลต่ออันดับมั้ย ก็อาจจะมีเพราะคุณสามารถซ้ำคำได้บ่อยๆ

    แต่ที่แน่ๆ มีผลต่อคนอ่านครับ ช่วยให้คนอ่านแล้วเข้าใจ :x

  4. December 6th, 2009 at 16:16 | #4

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  5. December 6th, 2009 at 16:17 | #5

    Thank you for good information

  1. February 10th, 2012 at 17:19 | #1
  2. February 14th, 2012 at 20:57 | #2