รู้จักกับ HTML5 - ภาคหนึ่ง HTML5 คืออะไร?

HTML5

บทความชุดนี้จะแนะนำข้อมูลเบื้องต้น (ย้ำว่า "เบื้องต้น") ของเทคโนโลยีใหม่ที่ทุกคนจับตาอย่าง HTML5 เพื่อเตรียมความพร้อมและปูพื้นฐานของ HTML5 ให้กับนักพัฒนาเว็บในประเทศไทย

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

อะไรคือ HTML5

ผู้อ่าน Blognone คงได้ยินชื่อ HTML5 กันมาเยอะ แต่ว่าแท้จริงแล้วมันคืออะไรกันแน่?

ความหมายทั่วไปของคำว่า HTML5 มีสองนัยยะที่เหลื่อมซ้อนกันอยู่ครับ

ความหมายในมุมแคบ มันคือ สเปกของภาษา HTML รุ่นที่ 5 ซึ่งต่อจาก HTML4 ที่เราใช้กันทุกวันนี้ โดยปัจจุบันสเปกยังร่างไม่เสร็จ (ดูได้จากเอกสารของ W3C) เนื้อหาจะครอบคลุมลักษณะ ฟีเจอร์ และ syntax ของ HTML เท่านั้น

ความหมายในมุมที่กว้างขึ้น มันคือ ชุดของเทคโนโลยีเว็บสมัยใหม่ อันประกอบไปด้วย

  • ภาษา HTML5 ตามข้อแรก
  • CSS3
  • API อีกชุดหนึ่งที่อยู่นอกสเปก HTML5 แต่ออกแบบมาให้ใช้งานร่วมกัน เช่น Geolocation, IndexedDB, File API ที่กำลังเป็นร่างมาตรฐานของ W3C แยกมาอีกชุดหนึ่ง
  • เทคโนโลยีประกอบอื่นๆ ที่เป็นมาตรฐานของ W3C อยู่แล้ว และนำมาใช้ร่วมกับ HTML (ซึ่งจะเป็น HTML4 หรือ HTML5 ก็ได้) เช่น SVG หรือ MathML

HTML5 ในที่นี้เราจะหมายถึงความหมายอย่างที่สอง ก็คือเทคโนโลยีเว็บรุ่นใหม่แบบรวมๆ นะครับ

ทำไมต้องมี HTML5

จะว่าไปแล้ว เทคโนโลยีใน HTML5 แทบไม่มีอะไรใหม่ในโลกไอทีเลย เพราะเกือบทุกอย่างที่ HTML5 ทำได้ อยู่ในกระบวนการพัฒนาโปรแกรมแบบ native มาช้านานแล้ว เช่น การทำงานแบบออฟไลน์ หรือ การวาดกราฟิก

เพียงแต่ HTML5 นำเทคโนโลยีที่เคยอยู่ในโลก native ย้ายเข้ามาสู่โลกของเว็บ ทำให้มันมีข้อดีของทั้งสองโลก คือ ฟีเจอร์อันรุ่มรวยและประสิทธิภาพในการทำงานจากโลก native มาผสานกับความคล่องตัว เข้าถึงได้จากทุกที่ของเว็บ

เดิมที ภาษาตระกูล HTML/SGML เป็นภาษาที่ออกแบบมาเพื่อ "อธิบาย" หรือ "นิยาม" การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอียง หัวเรื่อง ลิงก์ ซึ่งการใช้งานก็คือเอาไว้ทำเอกสารที่เชื่อมโยงกัน (ตัวอย่างคือ Help ของวินโดวส์)

พอมีอินเทอร์เน็ต HTML ก็ทำหน้าที่สร้าง "โบรชัวร์อิเล็กทรอนิกส์" ที่สามารถดูได้จากระยะไกล ถึงแม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยีเว็บก็พัฒนามากขึ้น สามารถใส่ภาพ เสียง วิดีโอ (ผ่านปลั๊กอิน) มีแนวคิดเชิงโปรแกรมอย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังสู้ไม่ได้) ในยุคของ HTML3

พอเป็นยุคของ HTML4 เราเริ่มเห็นเว็บแบบที่ตอบโต้ได้ มีความเป็นอินเตอร์แอคทีฟมากขึ้น ซึ่งเกิดจากเทคโนโลยีอย่าง AJAX, XMLHttpRequest ทำให้เว็บมีความใกล้เคียงกับ "แอพ" แบบดั้งเดิมมากขึ้น อย่างไรก็ตาม มันยังสู้แอพแบบ native ไม่ได้ เพราะยังขาดฟีเจอร์สำคัญๆ อีกหลายอย่าง เช่น การทำงานออฟไลน์ กราฟิกสามมิติ ฯลฯ นั่นเอง

สุดท้ายแล้ว HTML5 จะช่วยให้เรานำเทคโนโลยีจากโลกของเว็บ มาสร้างแอพที่มีลักษณะใกล้เคียงกับแอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถือได้) ตัวอย่างที่ชัดเจนที่สุดในตอนนี้คือ PhoneGap ซึ่งเป็นเครื่องมือพัฒนาแอพมือถือด้วย HTML5

HTML5 มีความสามารถอะไรบ้าง

เกริ่นกันมานานก็เริ่มเข้าเรื่องกันสักทีนะครับ ส่วนประกอบของ HTML5 มีหลายอย่างมาก เราอาจไม่จำเป็นต้องใช้ทุกฟีเจอร์

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

W3C แบ่งเทคโนโลยีในชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ชื่อตามนั้น และเรียงลำดับกันไปเช่นเดียวกับเว็บ W3C HTML5 Logo

1. Semantics

HTML5 Semantic

เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร

โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C

ยกมาเป็นตัวอย่างพอให้เห็นภาพ

แท็กใหม่

แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้ <div id="header"> ก็เปลี่ยนมาเป็น <header> ทำให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้ดีขึ้น

ตัวอย่าง

  • section - บ่งบอกเซคชันของเนื้อหา
  • article - กำหนดขอบเขตของตัวเนื้อบทความ
  • aside - กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)
  • header - กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ <head>)
  • footer - กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกำหนดสิทธิ์ต่างๆ
  • nav - บอกว่ามันเป็นส่วนนำทางของเว็บไซต์
  • figure - บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video พร้อมคำอธิบายได้อีกชั้น)

นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมเราใช้ <input type="text" id="email"> ก็เปลี่ยนเป็น <input type="email"> แทน

  • tel - เบอร์โทร
  • search - ช่องค้นหา
  • url
  • email
  • datetime
  • date
  • time
  • color

แท็กที่ถูกตัดออก

ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)

  • big
  • center
  • font
  • strike
  • frame
  • frameset
  • noframes
  • acronym
  • object

แท็กที่ถูกเปลี่ยนวิธีใช้

แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน

  • i - ไม่ได้หมายถึงการทำตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่เปลี่ยนแปลง
  • small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
  • strong - หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม
  • u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น

นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้นครับ