HTML 5 and Web Standards

จริงๆ ผมเริ่มอินเรื่องของ Web Standards เมื่อตอนไปงาน Thailand Next Web Apps 2008 ช่วงกลางปีที่ผ่านมานี่เอง ตั้งแต่นั้นมาก็เริ่มหาหนังสือและคู่มืออ้างอิง จนพบว่า หัวใจมันคือ ใช้ tag ให้ถูกต้องตามหน้าที่ของมัน และ แยกส่วนให้เป็นระบบ ระหว่าง Structure (HTML) / Stylesheets (CSS) / Script (Javascript)

หรือแม้แต่เรื่องของ SEO (Search Engine Optimize) ที่ผมมองว่า มันก็คือ ทำเว็บให้ตรงตาม Standards พร้อมกับสร้างข้อมูลที่ดี แค่นี้เอง มีหรือที่ Search Engine จะไม่หลงรักและจดจำไปจนวันตาย (ส่วน Search Engine จะทำการเก็บข้อมูลได้ช้าหรือเร็วนั้น อยู่ที่ การทำ E-Marketing ของคุณ)

นะยะหลังมานี้ผมใช้ PHP Framework ชื่อ Codeigniter เป็นตัวพัฒนาเว็บไซต์ และมันเป็นหลักการของ MVC ซึ่งแยกระหว่าง Model (เช่น พวก คำสั่ง Database) / View (เช่น พวก Template ไว้เก็บ HTML แสดงผล) / Controller (ตัวประมวลผลจาก Model ส่งไปยัง View) ออกจากกัน ผมพบว่าถ้าพัฒนาในส่วนของ View ด้วย Web Standards มันทำให้การพัฒนางานง่ายมากขึ้น ทั้งผม (Developer) และเพื่อน (Designer)

หลักๆ มันทำให้ผมสะดวกได้ดังนี้

1. ผม Developer ไม่ต้องรอเพื่อน Designer ออกแบบเว็บไซต์ก่อน ซึ่ง ผมแค่คุยกันคราวๆ ในส่วนของ layout ว่า จะมีข้อมูลอะไรบ้าง และไว้ตรงตำแหน่งไหน เพราะ CSS กับ HTML ผมแยกจากกัน

2. ผมสามารถเขียน HTML Structure โดยเรียงลำดับความสำคัญของข้อมูลที่ผมต้องการให้ search engine เจอก่อนได้ เช่น ผมอาจจะเอา เมนู (navigator) ไว้ล่างสุด เพื่อให้ search engine เจอบทความของผมก่อน ซึ่งเพื่อนผมสามารถใช้ CSS มาจัดระเบียบรูปแบบการแสดงภายหลังได้

3. ผมสามารถแสดงผลข้อมูลออกมาดิบๆ ทั้งหมด และใช้ AJAX เป็นตัวเรียกข้อมูลและทำการกำหนดเลือกให้ว่าข้อมูลที่เราใช้งานคือตัวไหน และอยู่ใน id หรือ class ใด ของ tag HTML ซึ่งทำให้ผมไม่ต้องนำ PHP มาเขียนไว้ใน View เพื่อ if else แสดงข้อมูลที่ถูกเลือกให้วุ่นวายแก่ เพื่อนที่เป็น Designer มากนัก รวมทั้งโค้ดผมสะอาดขึ้น

4. เวลาเพื่อน Designer ต้องการแก้ไข Style หรือผม Deveoper ทำระบบเปลี่ยน Template ผมสามารถให้เพื่อนสร้างจาก CSS เพียงไฟล์เดียว

เอา หละครับ นี่เป็นเพียงข้อดีของ Web Standards ที่ผมได้ประสบพบมากับตัว ซึ่งแค่ 4 ข้อ ก็ทำให้ การทำงานผม (Deveoper ) และเพื่อน (Designer) สะดวกมากขึ้น แต่จริงๆ แล้วเพื่อนผมมันคงต้องไป Optimize เรื่องของ Javascript กับ CSS อีกทีตามความเหมาะสมของ design ที่มันออกแบบมา

มา ดูเรื่องของ HTML กันบ้าง ซึ่งปัจจุบันที่เราใช้อยู่คือ HTML 4.01 ครับ มันมี tag หลายตัวที่เรา (รวมถึงผม) ไม่เคยรู้และไม่เคยใช้มาก่อน เพราะเรามัวไปติดรูปแบบของ HTML แบบเก่า เช่น จะสร้างตารางสักชุด เราอาจรู้จักแค่ <table>, <td>, <tr> แต่เราไม่รู้ว่ามันมี <thead>, <tbody>, <tfoot> ด้วย

แต่ถามว่าเขียนแบบนั้นแล้วแสดงผลได้ไหม? ตอบว่าได้ครับ! แต่ไม่มีความเป็น Semantic

ซึ่ง เจ้า <thead>, <tbody>, <tfoot> เป็นตัวบอกครับ ว่าตารางที่เราสร้างนั้น แถวไหนคือส่วนหัวแถว ส่วนข้อมูล และส่วนท้ายแถว มันจึทำให้การค้นหาข้อมูลของ Search Engine ทำงานได้ดีขึ้น จึงเป็นการทำ SEO ไปในตัวเลยทีเดียว

หรือแม้แต่การใส่ที่อยู่บริษัทในเว็บไซต์ ถ้าเป็นคนรู้ จะใช้ <address> แต่ถ้าไม่รู้(หรือรู้แต่อาจจะไม่ใช้) ก็สารพัด tag เช่น <b>,<i>,<div>

ซึ่งในอนาคต (แต่ผมคิดว่าปัจจุบัน) ความเป็น Semantic ของเว็บจะเป็นส่วนสำคัญมาก ในการบ่งบอกข้อมูลให้แก่ผู้ใช้ที่เป็นคอมพิวเตอร์ อย่าง search engine ที่เราเข้าใจกัน และมนุษย์แบบเราๆ ท่านๆ เช่น..

วันหนึ่งคนตาบอดเล่น เว็บคุณ อยากได้ที่อยู่บริษัทคุณ พอเอาเม้าชี้กวาดไปในเว็บบริษัท พอถึงตำแหน่งแสดงที่อยู่ และคุณใช้ <address> คอมพิวเตอร์ก็จะบอกได้ว่า บรรทัดนี้คือที่อยู่และสั่งให้พูดประโยคนั้นได้ทันที แต่ถ้าเว็บคุณยังใช้แบบเก่า เช่น <b>, <i> คนตาบอดคงต้องนั่งฟังข้อความทั้งหมดในเว็บของคุณก็เป็นได้ เพราะแยกไม่ออกว่าข้อความนี้คืออะไร

นี่เป็นเพียงตัวอย่างของ HTML 4.01

ใช่ครับ สิ่งที่ผมเล่ามาทั้งหมด มันกำลังเป็นอดีต

ที่ ผมต้องเกริ่นเสียยาว ก็เพื่อให้ทุกท่านตระหนักครับ ว่า Web Standards สำคัญมากในปัจจุบันและอนาคต เพราะตอนนี้ HTML 5 มันใกล้เรามากขึ้นเรื่อยๆ ถ้าแค่ HTML 4.01 และ Web Standards เราไม่เข้าใจและไม่ใช้ประสิทธิภาพของมัน ในอนาคตเว็บไซต์เรา search engine อาจจะไม่รู้ตัก เว็บเราอาจจะตาย และเราอาจจะต้องเสียเงินมากมาย หรือเสียเวลามากมาย เพื่อปรับปรุงระบบใหม่

ฮ่าๆ เขียนมายาว ทำท่าจะจบหลายรอบ แต่ยังครับ ยังไม่จบๆ

ใน เรื่องของ HTML 5 ถ้าใครได้ติดตามข่าว ก็คงจะพอรู้กัน ตรงนี้ผมไม่ขอเขียนเองครับ เพราะมีท่านผู้เขียนไว้ได้เข้าใจดีแล้ว จึงขอยกบทความของคุณอภิศิลป์ ตรุงกานนท์ มาให้อ่านเป็นการปิดท้ายครับ ขอเสนอในท้องเรื่อง..

HTML 5 มีไว้ เพื่อใคร?

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

จริงๆ แล้วเรื่องนี้เป็นเรื่องของสิทธิและความเท่าเทียมกันของมนุษยชาติเลยครับ

ก่อนอื่นจะขอสรุปว่า HTML 5 มีแท็กอะไรใหม่บ้าง คงไม่อธิบายครบทุกแท็กนะครับ จะยกมาเฉพาะที่น่าสนใจเท่านั้น โดยผมสรุปจากเว็บ A Preview of HTML 5 by Lachlan Hunt และ X/HTML 5 Versus XHTML 2

แท็ก ชุดแรกเป็นเรื่องของโครงสร้างหน้าเว็บที่อยู่ภายใต้ <body> ได้แก่ <header> <nav> <article> <section> <aside> และ <footer> ซึ่งในยุคของ HTML 4 เรามักจะใช้แท็ก <div> ในการวางโครงสร้างของหน้าเว็บ โดยกำหนดพารามิเตอร์ id และ class ซึ่งมีการตั้งชื่อตามแต่คนออกแบบเว็บจะตั้ง ไม่ได้มีมาตรฐานอะไรมากำหนด

แต่ในยุค HTML 5 จะมีแท็กที่ใช้แทนที่ <div> ทั้งหมดนี้ได้

คง ไม่ต้องอธิบายวิธีการใช้งานแต่ละแท็กนะครับ คิดว่ารูปน่าจะอธิบายได้ดีอยู่แล้ว อย่างเช่น <nav> เอาไว้ครอบพวกเมนูที่อยู่ด้านบน (ถ้าเป็นบล็อกผมก็คือเมนู หน้าแรก รู้จักเจ้าของบล็อก เผยแพร่ความรู้ สั่งซื้อหนังสือ พันธมิตร) หรือแท็ก <aside> เอาไว้ครอบคอลัมน์ที่อยู่ด้านข้างคอลัมน์หลัก (ในบล็อกของผมก็คือคอลัมน์ด้านขวาที่มีลิงก์รกๆ เต็มไปหมด)

ทีนี้เรา จะเอาแท็กพวกนี้ไปครอบไว้ทำไมล่ะ? เหตุผลก็คือเพื่อทำให้เนื้อหาในหน้าเว็บของเรามีความหมาย (Semantic) สำหรับคอมพิวเตอร์ จากเดิมที่คอมพิวเตอร์แยกไม่ออกว่าเนื้อหาในหน้าเว็บของเรามันอยู่ในส่วนไหน บ้าง มันรู้แค่ว่าอะไรคือข้อความธรรมดา อะไรคือลิงก์ แต่มันไม่รู้ว่าข้อความอยู่ในส่วน header, article หรือ footer

แล้ว เนื้อหาที่มีความหมายมันมีประโยชน์ยังไงล่ะ? ประโยชน์ข้อแรกก็คือเรื่องของ SEO ครับ จากตำราด้าน SEO ที่บอกว่า Search Engine ให้ความสำคัญกับคีย์เวิร์ดที่อยู่ใน <title> <h1> และคีย์เวิร์ดที่อยู่ตำแหน่งแรกๆ ของหน้าเว็บ แต่อีกหน่อย Search Engine จะฉลาดมากขึ้นอีก มันจะให้ความสำคัญกับคีย์เวิร์ดที่อยู่ใน <article> มากกว่า <nav> หรือ <aside> เพราะผู้ใช้ค้นหาคีย์เวิร์ดเพราะต้องการพบเอกสารที่เกี่ยวข้องกับคีย์เวิร์ด นั้น ไม่ได้ต้องการพบว่าคีย์เวิร์ดนั้นเป็นเพียงลิงก์ที่อยู่ในเมนู แต่ในเนื้อความกลับไม่มีอะไรเกี่ยวข้องเลย

ประโยชน์อีกข้อหนึ่งซึ่ง เป็นเรื่องที่ผมจั่วหัวไว้ก็คือเรื่องความเท่า เทียมกันของคนในสังคม ซึ่งในที่นี้หมายถึงคนที่มีปัญหาด้านการมองเห็น ทุกวันนี้คนตาบอดสามารถเล่นเว็บได้โดยอาศัยซอฟต์แวร์อ่านหน้าจอช่วย เมื่อคนตาบอดเข้าเว็บ ซอฟต์แวร์จะแปลงข้อความในเว็บให้เป็นเสียงพูดโดยไล่ตั้งแต่บนลงล่าง ทีนี้ลองนึกภาพดูว่าถ้าเว็บที่เขาใช้อยู่มีข้อความในส่วน <header> และ <nav> อยู่เยอะมาก รวมถึงถ้าเว็บนั้นเอาส่วน <aside> มาอยู่ฝั่งซ้ายมือ ซึ่งซอฟต์แวร์จะต้องอ่านข้อความในส่วนนี้ก่อนถึงจะเข้าไปอ่านใน <article> ได้ คนตาบอดก็จะต้องเสียเวลาฟังข้อความที่เขาไม่สนใจนานมาก และพอคลิกไปดูที่หน้าอื่นก็จะต้องเจอเหตุการณ์เดียวกันนี้ซ้ำอีก

แต่ การที่เรามีแท็กโครงสร้างที่บ่งบอกว่าเนื้อหาที่เป็นใจความอยู่ตรง ส่วนไหนของหน้าเว็บ ช่วยให้ซอฟต์แวร์อ่านข้อความสามารถ “กระโดดข้าม” ส่วนที่ไม่ใช่สาระสำคัญได้ ให้นึกภาพว่าคนตาบอดกดปุ่ม shortcut แล้วซอฟต์แวร์กระโดดไปที่ส่วน <article> ได้ทันที ไม่ต้องมาเสียเวลาฟังพวก <header> <nav> หรือ <aside> ยาวๆ

นอกจากนี้แล้ว HTML 5 ยังมีแท็กน่าสนใจอื่นๆ อีกเช่น

<m> ใช้สำหรับบ่งบอกว่าข้อความที่อยู่ภายใต้แท็กนี้ถูกมาร์คหรือไฮไลท์ไว้ ซึ่งมักจะถูกใช้เวลาที่มีการค้นหาคีย์เวิร์ดในเว็บของเรา และต้องการแสดงสีเพื่อไฮไลท์คีย์เวิร์ดที่ค้นพบ เช่น ถ้าผู้ใช้ค้นหาคำว่า barcamp ก็จะพบกับข้อความแบบนี้

<p>เมื่อวันเสาร์ที่ 26 มกราคม 2551 ผมมีโอกาสไปร่วมงาน <m>Barcamp</m> Bangkok ที่จัดโดย geek และมี geek มากกว่า 160 คนเข้าร่วมงาน</p>

<dialog> ใช้บ่งบอกว่าเนื้อหาที่อยู่ภายใต้แท็กนี้เป็นบทสนทนา โดยระบุผู้พูดไว้ภายใต้ <dt> และข้อความของผู้พูดไว้ภายใต้ <dd> เช่น

<dialog>
<dt>สมัคร</dt>
<dd>ถ้ามีคนมากล่าวหาสยามรัฐในทางเสียหายคุณจะตอบว่าอย่างไร </dd>
<dt>ผู้สื่อข่าว</dt>
<dd> ต้องให้ผู้บริหารชี้แจง ท่านเองก็เป็นผู้บริหารพรรคก็ต้องชี้แจง เพราะประชาชนต้องการรับฟัง และท่านเป็นก็เป็นหัวหน้าพรรคการเมืองของประชาชน</dd>
<dt>สมัคร</dt>
<dd>ถ้าผมถามกลับว่า อย่าหาว่าหยาบคายนะ เมื่อคืนคุณไปร่วมเมถุนกับใครหรือไม่</dd>
<dt>ผู้สื่อข่าว</dt>
<dd>ไม่ได้ร่วม</dd>
</dialog>

<figure> ใช้บ่งบอกว่าเนื้อหาที่อยู่ภายใต้แท็กนี้คือมีเดีย เช่น รูปภาพ กราฟ โดยมีแท็กลูกคือ <legend> ที่ใช้ระบุข้อความประกอบภาพ เช่น

<figure>
<img src=”google-maps-book-cover-front-small.png” mce_src=”google-maps-book-cover-front-small.png” alt=”Google Maps มหัศจรรย์แผนที่ออนไลน์” />
<legend>Google Maps มหัศจรรย์แผนที่ออนไลน์ สารพัดวิธีใช้งานสุดยอดแผนที่ของ Google เพื่อความสะดวกสบายและการใช้งานทางธุรกิจ พร้อมลายเซ็นผู้เขียนและบริการจัดส่งฟรี</legend>
</figure>

จะ เห็นได้ว่าแท็กเหล่านี้ช่วยให้ข้อความต่างๆ ในเว็บของเรามีความหมายมากขึ้น เราจะค้นหารูปภาพได้ดีขึ้นเพราะ Search Engine จะนำข้อความในแท็ก <legend> ไปทำดัชนีสำหรับรูปภาพ และเราจะค้นหาคำพูดของบุคคลสำคัญต่างๆ ได้ง่ายขึ้นเพราะ Search Engine รู้ว่าใครพูดข้อความอะไรไว้

อย่างไรก็ตาม สิ่งเหล่านี้จะเกิดขึ้นได้ก็เมื่อ HTML 5 กลายเป็นมาตรฐานที่ได้รับการยอมรับในวงกว้าง และยังต้องมีการ take action อย่างเป็นรูปธรรมด้วย ทั้งจากผู้พัฒนาเว็บบราวเซอร์ ผู้พัฒนา Search Engine และนักพัฒนาเว็บ