XHTML

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

เคยได้ยินกันมาบ้างไหมครับ 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 นั้นไปใช้ จะถูกเรียกไปใช้ได้เพียงครั้งเดียว

ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

เพราะถ้าเขียน XHTML ไม่ถูกหรือไม่ดี เขียน CSS ให้ตายก็ยากอยู่วันยังค่ำ

XHTML การเขียนก็แตกต่างกันออกไปอีก เขียน XHTML ให้ผ่าน W3C หรือ Markup ให้ถูกต้องนั้นก็ไม่ได้ยากเย็น แต่สิ่งที่ยากเย็นกว่าคือ เขียนยังไงให้ถูกตามหลักโครงสร้าง และหลัก Web Accessibility

XHTML และ CSS มีหลักการใช้งานแยกออกเป็นหมวดหมู่เหมือนกัน เช่น แต่ละ Element เอาไว้ใช้กับข้อมูลประเภทไหน ส่วน CSS บาง Property ที่เอาไว้ใช้กับ เสียง ภาพ หรือ page ก็จะมีคำสั่งแตกต่างกันออกไป แต่ตอนนี้ส่วนใหญ่เรายังสับสนอยู่แค่ อันไหนมันอินไลน์ อันไหนมัน บล๊อก อันไหนมัน ลิสต์ อันไหนมันตารางวะ

ผมเคยเจอกับตัวเอง ครั้งหนึ่งมีคนมาถามว่า ของบางอย่างมันใช้ยังไงหรือครับ ผมก็ตอบไปตามหลักการและทฤษฎี ที่มันต้องเป็น เขาถามต่อว่าทำไมมันต้องเป็นแบบนั้น เพราะที่เคยทำมาไม่เคยเห็นต้องเขียนแบบนั้นเลย ผมก็ตอบไปว่า ก็มันผิดไงหละครับ ก็ต้องปรับให้มันถูก แล้วมันก็จะสามารถเขียน CSS จัดการได้ง่ายและถูกต้อง ในเมื่ออธิบายเข้าใจยาก ผมก็ส่งลิงค์ W3C ให้อ่าน คำตอบที่ได้มาก็คือ ขี้เกียจอ่าน แต่อยากรู้ว่ามันต้องทำยังไง เล่าให้ฟังได้ไหม ผมก็ขอยอมแพ้หละครับ

ไม่เชื่อก็ต้องเชื่อ ว่าวันหนึ่งผมจะยอมแพ้

ก่อนอื่นสวัสดี พวกเราหายไปนาน ไปเคลียร์งานที่สุมไว้ที่โต๊ะ ไปทำหน้าที่ที่ต้องทำ แต่ไม่ได้ลืมไม่ได้ทิ้งหน้าที่ ณ​ ที่แห่งนี้ ช่วงที่หาย ๆ ไปก็ได้เห็นว่าหลาย ๆ คนยังไม่เข้าใจ เรื่องเล็ก ๆ ง่าย ๆ ของ xhtml อยู่ วันนี้ผมจะเอาสิ่งง่าย ๆ ที่เพื่อน ๆ มองข้ามมาอธิบายให้เข้าใจถึงแก่นมันก่อน สำหรับคนที่เดินไปหน่อย ไปไกลแล้ว แต่ยังไม่รู้ก็รู้ไว้บ้างก็ดี ขออนุญาติผมได้สอนท่าน ๆ เทพ ๆ ทั้งหลาย ซักบทความละกันนะครับ

XHTML Syntax

หรือ หลักการณ์เขียน XHTML การเขียน XHTML ที่ถูกต้องนั้นง่ายนิดเดียวครับ จำง่าย ๆ เลยว่าข้อมูล จะเป็นตัวกำหนด elements ที่จะเอามาครอบมัน โดยเลือก tag และ attribute ของ XHTML มาอธิบายความหมายของมัน ให้เหมาะสม อย่างไร? ง่าย ๆ ครับสมมติว่าผมมีข้อมูล “ที่อยู่” อยู่ชุดหนึ่ง ดังนี้: นาย สุดเทพ ชอบโกงกิน บ้านเลข 12 หมู่ 16 ถ. บ้านคำปากหาย อ. หมอกแหงนหงาย จ. แขบชายดอน รหัสไปรษณีย์ 46850เมื่อผมต้องการเขียนในรูปแบบเอกสาร XHTML แล้วผมจะเลือกใช้ tag ใด กับข้อมูล ข้อมูลนี้ ผมก็ต้องเลือกใช้ tag “address” กับข้อมูลชุดนี้ดังนี้:

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE

คำว่ามาตรฐานกับความนิยมในสองอย่างนั้นแตกต่างกันยังไงผมขอเล่าความสั้นๆ ก่อนนะครับ ว่า html กับ xhtml จะอยู่ร่วมโลกกันอย่างไร การจะเขียนอะไรลงไปในหน้าเอกสาร หรือหน้าเว็บนั้นให้เหลือบมองไปที่ DOCTYPE กันก่อนว่าเอกสารนั้นอยู่ภายใต้ภาษาอะไร ประเภทไหน ถึงแม้ว่าเราจะใช้ Adobe Dreamweaver ในการเขียนหน้าเอกสารขึ้นมาก็ตาม ขอให้ลืมการแสดงผลหน้าเอกสารของ IE6 และ IE7 ไปก่อน การที่เราเขียนเอกสาร วางโครงสร้างให้ถูกต้องตามหลักมาตรฐาน ใน User Agents ที่ได้มาตรฐานจะ Render หน้าเอกสารออกมาได้อย่างถูกต้อง แล้วทำไม IE แสดงผลไม่ถูกต้อง ก็เพราะว่า IE6 และ IE7 ผลิตขึ้นมาไม่ได้เข้าหลักมาตรฐานตามที่ W3C กำหนดนั่นไงหละครับ จึงแสดงผลหน้าเอกสารที่เขียนแบบ ผิดๆ ได้ แต่ Firefox หรือ Opera แสดงผลเพี้ยน ก็เพราะหน้าเอกสารเขียนผิด User Agents ทั้งสองที่ยึดหลักมาตรฐานก็แสดงผลออกมาผิดๆ นั่นเอง ในขณะเดียวกัน ที่ผ่านมา คนนิยมใช้ IE กันทั่วโลก ความถูกต้องจึงถูกละเลย จะไปสนใจบราวเซอร์อื่นทำไม ในเมื่อไออีแสดงผลได้ถูกต้องใช่ไหมครับ แต่เราลืมไปว่า สักวันข้างหน้าความจริงจะปรากฎ เฉกเช่นชั่วโมงนี้ เมื่อบราวเซอร์อื่นๆ ที่ไม่ใช่ ไออีเริ่มแย่งส่วนแบ่งทางการตลาดและคำว่า Web Standards เริ่มแพร่กระจาย อ้าแขนต้อนรับ Semantic Web เพื่อที่จะไปยุค Web 3.0 ยุคที่ความสำคัญของทุกอย่างไม่ว่าจะหน้าบ้านหรือหลังบ้านเท่าเทียมกันหมด เข้าถึงข้อมูลได้เหมือนๆ กัน

ไม่ทราบว่าเคยได้ยินกันบ้างหรือยังกับคำคำนี้ Microformats และ งงกันบ้างไหมครับว่ามันคืออะไร ทำงานอย่างไร สำหรับเราหลาย ๆ คนคงเป็นเรื่องใหม่ ที่จะเข้ามาปั่นหัวให้วุ่นวายกันอีกแน่ Microformats เป็น “กลุ่มของข้อมูล ที่นำเอามาตรฐานเข้ามาใช้ ที่ถูกออกแบบโครงสร้างมาให้เป็นประโยชน์ต่อ มนุษย์ มากกว่า จักรกล” อย่างไรนะเหรอ? ในอนาคตอีกไม่นานนี้ (ในประเทศไทย) จะได้รู้ถึงคุณประโยชน์ของมันอย่างแน่นอน เมื่อ ICT รู้จักทำประโยชน์ให้ประเทศ รู้จักมองถึงปัญหาที่เกิดเกี่ยวกับโลก cyber อย่างแท้จริง รู้จักมองถึงประชาชนในประเทศ และ รักษาสิทธิ์ที่พวกเราพึงจะได้มากกว่านี้ … ทำไมผมถึงพูดออกมาอย่างนั้น ทำไมน่ะเหรอ เอาไว้จะสาธยายให้ฟัง หลังจากอธิบายเกี่ยวกับ Microformats ก่อนก็แล้วกันครับ

Microformats นั้นหมายถึงการใช้ Standard ที่เรารัก (ไม่รู้ว่ารักจริงไหมนะ เฉพาะชาว ThaiCSS หรือเปล่า?) ให้มีความหมายมากที่สุด (semantic มากที่สุด) เท่าที่จะทำได้ มองง่าย ๆ ไปเลยเสียว่า มันคือแบบฝึกหัดในการทำให้ Website ของคุณนั้นมี Accessibility ที่สูง ๆ นั่นเอง Microformats ใช้ XHTML tags หลาย ๆ ตัวเช่น address, cite และ blockquote และ XHTML attributes หลาย ๆ ตัวเช่น rel, rev และ title เอามาทำให้ข้อมูลของคุณนั้นเกิดความหมาย เกิดประโยชน์มากที่สุด (ถ้าอ่านมาถึงตรงนี้ คุณมีความคิดในใจเกิดขึ้นว่า อะไรของมันวะเดี๋ยว tags เดี๋ยว attributes ให้ลองอ่าน ความหมายของมันในกระทู้นี้ Microformats ใช้ยากไหม? ไม่ยากครับ มันใช้ tags และ attribute ที่เราคุ้นเคยนี่แหละ นำมาใช้ในทางที่ดีที่สุด เกิดประโยชน์ที่สุด