Dowload Here : html5-cheat-sheet

credits: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

วันนี้จะมาแนะนำ tag ใหม่ คือ abbr กับ acronym ครับ

โดยลักษณะการใช้งาน จะดูคล้ายๆกัน ซึ่งพบได้บ่อยครั้งใน Wikipedia

ความคล้าย : acronym และ abbr เพิ่มความหมายใ้ห้ตัวอักษรย่อต่างๆ ซึ่งทำงานเหมือนกัน
เช่น [CSS = Cascading Style Sheets] เป็นต้น

ความต่าง คือ
acronyme อ่านออกเสียงเป็นคำๆ เช่น RADAR (เร-ดาร์) หรือ NATO(นาโต้)
abbr : อ่านออกเสียงทุกตัวอักษร เช่น CSS(ซี-เอส-เอส) หรือ URI(ยู-อาร์-ไอ)

ตัวอย่าง

1
2

<acronym title="Radio Detecting And Ranging">radar</acronym>
<abbr title="Cascading Style Sheets">CSS</abbr>

ผลลัพท์ได้เป็นดังนี้

1
2
3

<abbr title="Really Simple Syndication">RSS</abbr>
<abbr title="Uniform Resource Identifier">URI</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>

โดยส่วนใหญ่แล้ว มักจะใช้ abbr ซะมากกว่า และแน่นอน IE6 ไม่สามารถแสดงผลได้อีกเช่นเคย แต่ FF ทำงานได้ปกติ (==’)

จึงมีวิธีแก้ไขดังนี้

1.) ใช้ span เข้ามาช่วย

1

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

2.) ใช้ javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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>

script นี้จะใช้หลักการของ regular expression มาแก้ปัญหา

วิธีใช้ แค่ copy แปะไว้ที่ header แค่นั้นครับ แล้ว javascript นี้จะเรียกทั้งเพจมาแก้เอง

เพียงเท่าที่ ก็สามารถแสดงผลลัพท์ได้ทั้ง IE และ Firefox แล้วครับ

ถามว่า ทำไมต้องใช้ tag อะไรแบบนี้ด้วยหละ ไม่ได้ใช้ก็ไม่มีใครว่าครับ แต่ถ้ามี ก็เหมือนยกระดับเว็บของคุณเพิ่มมากขึ้น(search engine friendly) ครับ

ความแตกต่างมันอยู่ตรงที่

ID

• Once times in your html layout.
  มีใช้แค่ครั้งเดียวใน 1 page เช่น header content sidebar footer etc.
  วิธีใช้ เช่น <div id=”header”></div> เป็นต้น
• ID is the first priority.
  เมื่อมี ID กับ CLASS อยู่พร้อมกัน เช่น <div id=”aaa” class”bbb”>
  CSS จะเรียกใช้ id เป็นหลัก หมายถึงจะไปเรียกใช้ #aaa

CLASS

• Several times in your html layout.
  ใช้หลายครั้งใน 1 page เช่น menu link
  วิธีใช้ เช่น <div class=”menu”></div>