รู้จักกับ common attribute ของ xhtml

เคยได้ยินกันมาบ้างไหมครับ Common Attribute เป็นชื่อเรียกกลุ่ม Attribute ของ xhtml ที่เราจะพบเจอกับมันบ่อย ๆ ในการทำงาน หรือ ใน Website ของคนอื่น ๆattribute เหล่านี้จะถูกนำมาใช้กับ xhtml element ได้หลาย ๆ element เพื่อกำหนดบ่งชี้คุณสมบัติ หรือ คำอธิบายต่าง ๆ ให้กับ xhtml element นั้น ๆ ที่เรียกตัวมันไปใช้

ทั้งนี้ attribute ที่จัดอยู่ในหมวดนี้จะแบ่งเป็นอีก 3 ส่วนย่อย ๆ คือ Core Attribute, i18n attribute และ Event Attribute ซึ่งหน้าที่การทำงานของแต่ละส่วนนั้นเป็นอย่างไรเรามาดูไปพร้อม ๆ กันครับ

Core Attribute

ในกลุ่มนี้จะประกอบไปด้วย class, id และ title เรามาดูรายละเอียดของแต่ละตัวกันครับ

class และ id นั้นจะเป็นตัวกำหนดชื่อเรียก (label) ต่าง ๆ ให้กับ element เหล่านั้น ซึ่งชื่อเรียกเหล่านี้อาจจะเป็นตัวกำหนดการจำแนกลักษณะกลุ่มของข้อมูล กลุ่มลักษณะการทำงานของ xhtml element นั้น ๆ โดยจะร่วมทำงานกับ JavaScript หรือ css ก็ได้ และยังรวมไปถึงการเป็นจุดอ้างอิง (anchor) สำหรับการอ้างถึงภายในหน้า webpage เดียวกัน ดังตัวอย่างต่อไปนี้

<div id=”header-wrapper”>
<p class=”purple-line”>Lorem … Ipsum … blab bla bla</p>
<p>Lorem … Ipsum … blab bla bla</p>
</div>

id มักจะใช้กับอะไรที่เป็น unique คือ เป็นหนึ่งเดียว สำคัญไม่ซ้ำกับใครใน webpage หนึ่ง ๆ จะมี id ตัวนั้น เพียงแค่หนึ่งเดียว ไม่ว่าจะเป็นจุดอ้างอิง xhtml element ที่เรียก id นั้นไปใช้ จะถูกเรียกไปใช้ได้เพียงครั้งเดียว

class มักจะพบเห็น และ ถูกเรียกใช้บ่อย ๆ ในหนึ่ง webpage ซึ่งอาจจะทำหน้าที่สำหรับแยกกลุ่มของข้อมูล หรือ คุณสมบัติที่ต้องใช้บ่อย ๆ ก็ได้ ดังตัวอย่าง

<h2 id="tree">This is the group of Trees.</h2>
<p class="flower">Daisy</p>
<p class="flower">Rose</p>
<p class="food">Apple</p>
<p class="food">Banana</p>

จากตัวอย่างจะเห็นว่า ผมใช้ id ที่ชื่อว่า tree กับ <h2> ซึ่งเป็นหัวข้อหัวข้อเดียวที่บอกว่าข้อมูลต่อไปนี้เป็นชื่อ และ ชนิดของต้นไม้ต่าง ๆ และ ในย่อหน้าต่าง ๆ นั้นผมก็มี class ที่เอาไว้จัดกลุ่มต้นไม้ตามชนิดและประเภทของมัน เช่น class ที่ชื่อ flower จะถูกเรียกไปเพื่อจัดกลุ่มข้อมูลที่เป็นดอกไม้ ส่วน class ที่ชื่อ food จะถูกเรียกไปเพื่อจัดกลุ่มข้อมูลที่เป็นอาหาร จากข้อมูลข้างบน เราก็จะเห็นได้ว่า ต้นไม้เป็นกลุ่มข้อมูลที่มีเพียงกลุ่มเดียว และ ใหญ่ที่สุด ส่วนประเภท และ ชนิดของต้นไม้นั้นมีหลากหลาย และ สามารถมีสมาชิกได้อีกหลาย ๆ ตัว เพราะฉะนั้น เราก็จะใช้ id กับหัวข้อที่บ่งบอกว่านี่เป็นข้อมูลเกี่ยวกับต้นไม้ และ class เพื่อจัดกลุ่มข้อมูล ชนิด ประเภท ของต้นไม้ เพื่อให้เห็นชัดว่า ต้นไม้แต่ละต้นนั้นจัดอยู่ใน ชนิด และ ประเภทอะไร

title ใช้เพื่อเพิ่มคำอธิบายประกอบเล็ก ๆ น้อย ๆ ให้กับ element เหมือนกับการใช้ abbr กับข้อมูลที่เป็นตัวอักษรย่อ เพื่ออธิบายคำเต็มของมัน หรือ blockquote กับคำพูด หรือ ย่อหน้าที่ยกมาจากที่อื่น ๆ title นั้นสามารถมองเห็นได้ด้วย screen reader เพราะฉะนั้นเราควรจะใส่ไว้ให้กับ element บาง element ที่เราต้องการอธิบายคร่าว ๆ ให้ผู้ใช้เข้าใจครับ เช่น จากตัวอย่างข้างบนผมอยากอธิบายเพิ่มเติมว่า element ใดที่เรียกใช้ class ที่ชื่อ flower ว่า เป็นต้นไม้ชนิดไม้ประดับ และ element ใดที่เรียก class ที่ชื่อ food ว่า เป็นต้นไม้ที่สามารถ นำมารับประทานเป็นอาหารได้ ผมก็จะเขียนออกมาได้ดังนี้ครับ

<h2 id="tree">This is the group of Trees.</h2>
<p class="flower" title="เป็นต้นไม้ชนิดไม้ประดับ">Daisy</p>
<p class="flower" title="เป็นต้นไม้ชนิดไม้ประดับ">Rose</p>
<p class="flower" title="เป็นต้นไม้ชนิดไม้ประดับ">Lilly</p>
<p class="food" title="เป็นต้นไม้ที่สามารถ นำมารับประทานเป็นอาหารได้">Apple</p>
<p class="food" title="เป็นต้นไม้ที่สามารถ นำมารับประทานเป็นอาหารได้">Banana</p>

i18n Attribute

ทำไมถึงต้องเป็น i18n จริง ๆ แล้วชื่อเต็ม ๆ ของมันคือ “internationalization” แต่หลาย ๆ คนขี้เกียจที่จะพิมพ์ตัวอักษร 18 ตัวที่อยู่ระหว่าง i ตัวแรก และ n ตัวสุดท้าย เลยเรียกกันสั้น ๆ ว่า “i18n” เจ้า i18n นี้ไม่ได้มีเพียง xhtml element หากแต่รวมไปถึงภาษาอื่น ๆ อีกด้วยไม่ว่าจะเป็น asp, php และ อื่น ๆ รวมไปจนถึงภาษาพูดของคนเรา i18n ถูกสร้างขึ้นมาเพื่อเป็นตัวกลางเชื่อมระหว่างภาษาทุกภาษาให้เข้าใจ และ ดำเนินไปในทิศทางเดียวกัน ในที่นี้ attribute ของ xhtml ที่อยู่ในหมวด i18n นั้นก็คือ

dirใช้บอกลำดับของข้อมูล เนื้อหาใน webpage นั้น ๆ ที่มีการเรียกใช้มัน (ย่อมาจาก Direction นั่นเอง) ซึ่งค่าในการแสดงผลของมันจะมีอยู่สองค่าคือ ltr หรือ Left to Right และ rtl หรือ Right to Left ซึ่งจะใช้เวลาที่ webpage ของเรามีการใช้ภาษาหลายภาษาที่มีวิธีการอ่านแตกต่างกัน เช่นเรามี ภาษาไทย และ อังกฤษที่อ่านจากซ้ายไปขวา และ มีภาษา Arabic ที่อ่านจากขวาไปซ้าย เราก็ต้องเขียนบอก ขออนุญาติยกตัวอย่างเฉพาะภาษาอังกฤษนะครับ

<p class=”food” dir=”ltr”>Banana</p>

xml:langเป็นตัวกำหนดค่าภาษาที่เราใช้กับ webpage นั้น หรือ เฉพาะ element นั้นที่เรียกมันไปใช้ ในกรณีที่เราต้องใช้หลายภาษาในหนึ่ง webpage หรือ ภาษาเดียวทั้ง webpage เราสามารถที่จะบอกให้ screen reader ที่ผู้พิการทางสายตาใช้ในการอ่าน webpage เลือกใช้ภาษาที่เหมาะสม และ อ่านให้ผู้พิการทางสายตาฟังอย่างถูกต้อง (ภาษาไทยยังไม่มี เพราะอะไร ประชาชนไทย รู้ ๆ กันอยู่ :P) วิธีการเขียน เราก็จะเขียนดังตัวอย่างข้างล่างครับ (สมมติว่ามันอ่านภาษาไทยรู้เรื่องแล้วนะครับ)

<p xml:lang=”en”>This line the screen reader will read in English.</p>
<p xml:lang=”th”>บรรทัดนี้ Screen Reader จะอ่านเป็นภาษาไทย</p>

Event Attribute

เป็น attribute ที่ควบคุม บ่งบอกพฤติกรรมง่าย ๆ ให้กับ element ที่เรียกใช้มันอยู่ เป็น attribute ที่เกี่ยวข้องกับ JavaScript (เป็น Syntax ของ JavaScript) ซึ่งผมจะกล่าวถึงอีกครั้งในบทที่ 7 ซึ่ง attribute เหล่านี้ควรใช้เท่าที่จำเป็นเท่านั้น เพราะถ้ามากเกินไปจะสร้างความรำคาญให้กับผู้ที่เข้ามาใช้งาน website ของเราครับในหมวดนี้ก็จะมี attribute อยู่ดังนี้ครับ

1. onclick
   เมื่อมีการ click บน element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
2. ondblclick
   เมื่อมีการ double-click บน element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
3. onmousedown
   เมื่อมีการกด mouse ค้างบน element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
4. onmouseup
   เมื่อมีการปล่อย mouse ออกจาก element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
5. onmouseover
   เมื่อมีการเลื่อน pointer ของ mouse ไปอยู่เหนือ element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
6. onmousemove
   เมื่อมีการเคลื่อนที่ของ pointer ของ mouse อยู่ในบริเวณ element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
7. onmouseout
   เมื่อมีการเลื่อน pointer ของ mouse ออกจาก element ที่เรียกใช้อยู่นั้น ให้ทำตามคำสั่ง JavaScript ที่กำหนด
8. onkeypress
   เมื่อ element ที่เรียกใช้อยู่ใน focus ของหน้าจอ (บริเวณที่มองเห็นได้ในหน้าจอ) เมื่อมีการกดปุ่ม (แล้วปล่อย) Keyboard ให้ทำตามคำสั่ง JavaScript ที่กำหนด
9. onkeydown
   เมื่อ element ที่เรียกใช้อยู่ใน focus ของหน้าจอ (บริเวณที่มองเห็นได้ในหน้าจอ) เมื่อมีการกดปุ่ม (ค้างไว้) Keyboard ให้ทำตามคำสั่ง JavaScript ที่กำหนด
10. onkeyup
    เมื่อ element ที่เรียกใช้อยู่ใน focus ของหน้าจอ (บริเวณที่มองเห็นได้ในหน้าจอ) เมื่อมีปล่อยปุ่ม Keyboard ให้ทำตามคำสั่ง JavaScript ที่กำหนด

เป็นไงบ้างครับ บางอย่างอาจจะเคยรู้แล้วก็ต้องขออภัย เพียงอยากเสริมฐานให้มันแน่น หรือ ทบทวนให้ใช้กันได้อย่างถูกต้องมากขึ้นครับ สำหรับคำถามหรือข้อสงสัย หรือ เพื่อน ๆ พี่ ๆ น้อง ๆ ที่อยากเสริมอะไรก็แสดงความเห็นกันได้เต็มที่เลยนะครับ

เจอกันใหม่ครับ ราตรีสวัสดิ์