HTML 5 มีไว้เพื่อใคร?
Friday, March 21st, 2008พอดีผมได้รู้ข่าวของ HTML 5 ตั้งแต่เมื่อปีก่อน แต่ก็ยังไม่ได้อ่านรายละเอียดไรมาก เลยยังหาข้อสรุปอะไรมากเกี่ยวกับ 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 และนักพัฒนาเว็บ
