ช่วงนี้มีข่าวเรื่อง 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 และนักพัฒนาเว็บ
- 20 Rules of Smart and Successful Web Development – กฎ 20 ข้อในการพัฒนาเว็บให้เป็นเลิศและประสบความสำเร็จ
- Blind Man Can Do! เมื่อผมต้องสอนนักศึกษาตาบอดให้เขียนเว็บเป็น
- Web Design For Blind Man การออกแบบเว็บเพื่อให้คนตาบอดใช้งานได้
- กรณีศึกษา การใช้ Google Apps ทำเว็บไซต์กระบวนวิชา Creative Writing ของ ม.รามคำแหง เพื่อให้นักศึกษาตาบอดเข้ามาใช้บริการ
- รับจ้างพัฒนาเว็บไซต์ จะคิดราคาอย่างไรดี?
February 1st, 2008 at 17:01 น.
ผมตามอยู่เช่นกัน ขอบคุณสำหรับหัวข้อนี้นะครับ ให้ภาพที่ชัดเจนสุด
อย่าว่าอย่างโน้นอย่างนี้เลยนะครับ ผมว่า html 5 นี่แหละพูดภาษาคนรู้เรื่องหน่อย คือ รู้ว่าอะไรเป็นอะไร
ว่าแต่ได้เสพเมถุนบ้างหรือยัง อิอิ
February 1st, 2008 at 20:21 น.
ขอบคุณที่เขียนบทความนี้มากครับผม
February 3rd, 2008 at 2:18 น.
ขอบคุณมากเลยครับ เห็นภาพชัดเจนดีจัง
แล้วแบบนี้ถ้าเราจะใส่พวก tag ใหม่ๆพวกนี้ไว้เลยแล้วคลุมด้วย div ของเดิมไปจะดีไหมครับ เวลานั้นเราจะได้ไม่ต้องมาแก้อีกรอบ
February 3rd, 2008 at 3:08 น.
ผมว่ารอให้เว็บบราวเซอร์ support ก่อนดีกว่าครับ ใส่ไปตอนนี้ก็ยัง test อะไรไม่ได้
February 6th, 2008 at 9:12 น.
โอ้ว semantic สุด ๆ เจ๋งไปเลย
ผมว่าใช้ tag ที่ มี semantic meaning แบบนี้
เขียนแล้วสบาย อ่านก็สบาย กว่าใช้ divเยอะเลย
ผมชอบ ด้วย ไอเดียเข้าท่าดี
ในที่สุดเราก็จะเข้าสู่ยุค semantic เย้
February 7th, 2008 at 13:10 น.
วันก่อนลืมพูดถึงไป
ผมว่า HTML 5 ลืม เรื่อง localize ไป
ทุกวันนี้ถ้าเราใช้ ol (order list) เราเคยสงสัยไหมว่า ทำไมต้องเป็นเลขอาราบิกเท่านั้น หรือ ทำไมต้องใช้ได้เฉพาะอักษรโรมันมันอย่าง i ii iii ทำไมเราไม่สามารถกำหนดเป็น ๑ ๒ ๓ หรือ ก ข ค ง ได้
ถ้าพูดในประเด็นเรื่องมนุษยชาติ การเคารพต่อภาษาถิ่นต่างๆ ก็ควรให้ความสำคัญระดับเดียวกัน ..ว่าไหม
February 9th, 2008 at 15:49 น.
Very cool. Thank you for sharing.
March 15th, 2008 at 22:56 น.
Html 4.01 ผมก็มึนหัวจะแย่แล้วครับ
ทำเว็บเสร็จ ด้วย Dream ไม่ได้เขียนโค้ดเองสักแอะ
แต่พอเอาไป Verify ดันไม่ผ่านซะงั้น…
March 24th, 2008 at 2:44 น.
ต้องปรับเว็บอีกแล้ว
March 24th, 2008 at 13:03 น.
ถ้าใช้ตอนนี้ แล้ว เบาวเซอร์ผุ้ใช้ทัวไปจะอ่านออกไหมนะ? 0.0?!
April 23rd, 2008 at 17:02 น.
อ่านแล้วรู้สึกว่า มันจะไม่ล๊อคไปหน่อยเหรอครับ
อารมณ์ประมาณว่าจะเอา template เดียวใช้ได้ทุกเว็บยังไงยังงั้น
คือมันอาจจะดูดีครับ เนื่องจากเป็นภาษามนุษย์
แล้วตรงนี้ที่เห็นก็เป็น tag ที่เหมาะกับการทำ blog ใช่มั้ยครับ
แต่ถ้าต้องการทำเว็บแบบอื่นๆ หรือทำเว็บที่แตกต่างจากเว็บปัจจุบันอย่างสิ้นเชิง
ระบบ tag ของ html5 นี่จะ support ความหมายได้หมดทุกอย่าง?
หรือว่าต้องจำความหมาย tag เพิ่มอีกเป็นพันๆ tag สำหรับเว็บอื่นๆ?
ผมว่ามองมุมแคบไป ออกแนวเฉพาะทางครับ concept นี้
เพราะถ้าเวลาผ่านไป สไตล์การออกแบบแนวนี้อาจตายแล้วก็ได้
แล้วคราวนี้ก็ถึงเวลาที่ code เก่าจะใช้ไม่ได้ code ใหม่ที่ออกแบบมาแก้ของเก่าก็ใช้ได้ไม่หมดครับ
เป็นเรื่องที่เกิดซ้ำๆ เกี่ยวกับมาตรฐานของเว็บตลอดกาล
ผมว่าถ้าจะทำกันจริงๆ เอาแค่กำหนดมาตรฐานของ id ก็พอมั้งครับ
ประมาณว่า id นี้คืออะไร id นั้นคืออะไรโดยแยกสำหรับเว็บแต่ละชนิดก็พอ
ที่เหลือโปรแกรมที่มาอ่าน screen สำหรับคนตาบอดก็คง implement ตามๆ กันไปเองแหละครับ
June 10th, 2008 at 8:19 น.
ขอบคุณคับ
June 12th, 2008 at 10:43 น.
ขอบคุณมากๆคับสำหรับบทความดีๆ
June 28th, 2008 at 10:39 น.
ดีเยี่ยมจริง ปรับเว็บกันแถบไม่ทัน
September 27th, 2008 at 9:07 น.
คนทำเว็บต้องเลือกใช่ไหมครับ ว่าจะใส่ doctype เป็น html 5 หรือ xhtml 1 ผมเข้าใจถูกไหมครับ
June 3rd, 2009 at 23:20 น.
ขอบคุณมากคะสำหรับบทความดีค่ะ
June 4th, 2009 at 1:44 น.
โอ้ว ขอบคุณครับ กำลังอยากจะเขียนถึงเหมือนกัน
July 2nd, 2009 at 20:54 น.
ว้าวๆๆๆเยียมเลยค้าบบ