GORAGOD.com

HTML5 และ CSS3

โค้ด (X)HTML ที่เราใช้กันอยู่ในปัจจุบันเป็น HTML4 ครับ (ปี 2554) และในปีนี้เช่นเดียวกัน กระแสของ HTML5 เริ่มมาแรงอันเนื่องมาจากข้อจำกัดของ HTML4 โดยเฉพาะ ทางด้าน semantics (ความเป็นมิตรกับผู้ใช้ที่มากกว่าการมองเห็นด้วยสายตา) และเนื่องจากในอนาคต เว็บไซต์จะไม่ได้ถูกแสดงผลด้วยบราวเซอร์บนคอมพิวเตอร์เพียงอย่างเดียว ทำให้ต้องมีการพัฒนามาตรฐานใหม่ๆในอนาคตออกมา เพื่อทดแทนข้อด้อยของ (X)HTML ในปัจจุบัน

มีอะไรใหม่ใน HTML5

  • อย่างแรกเลย HTML5 มี tag ใหม่ๆเพิ่มขึ้นอย่างมาก ซึ่งแต่ละ tag จะมีการบ่งบอกความหมายของตัวมันเองอย่างชัดเจน เช่น tag <footer> ชื่อก็บอกตรงๆว่าเป็นส่วน footer ซึ่งจะมาทดแทนการใช้ <div id="footer"> หรืออื่นๆตามแล้วแต่จะเขียนกัน ให้มีมาตรฐานเดียวกัน ซึ่งข้อดีที่จะเห็นได้ชัดก็คือ ไม่ว่า Browser หรือ Search Engine ยี่ห้อใด ก็สามารถรู้ได้ทันทีโดยไม่ลังเลว่าส่วนนี้คือ footer
  • อย่างที่ 2 HTML5 ยอมให้มีการเขียน tag ได้สั้นลง เช่น สามารถกำหนด doctype แบบสั้นๆ ได้ สามารถกำหนด property แบบที่ไม่ต้องมี = ได้ เช่น ใช้ readonly แทน readonly="readonly" สามารถกำหนด link หรือ script แบบที่ไม่ต้องมี type ก็ได้ ซึ่งประเด็นจะดูเหมือนกลับไปใช้ HTML แบบผิดๆที่เคยใช้กันแบบเดิม แต่จุดประสงค์ที่แท้จริงของ HTML5 สำหรับการยอมให้เขียนแบบนี้ ก็คือ เพื่อให้สามารถเขียนโค้ดได้สั้นลงนั่นเอง
  • อย่างที่ 3 HTML5 รองรับการแสดง VDO พร้อมด้วยเทคโนโลยีการเร่งกราฟฟิคบน Browser ได้โดยตรง ซึ่งจะมีผลทำให้ในอนาคต เราจะไม่ต้องใช้แฟลชอีกต่อไป เพื่อการแสดงภาพสวยๆ เหตุผลสำหรับกรณีนี้ก็ชัดเจนครับ เนื่องจาก บราวเซอร์เช่น Safari ไม่รองรับ Flash 100% อยู่แล้ว และนอกจากนั้นในอุปกรณ์พกพา เช่น ipad การใช้แฟลชซึ่งใช้พลังในการประมวลผลมากก็จะทำให้อายุการใช้งานของแบตเตอรี่สั้นลง ในขณะที่ การใช้ HTML5 ซึ่งสามารถแสดงผล VDO พร้อมเทคโนโลยี่การเร่งการแสดงผลจะใช้พลังงานน้อยกว่าทำให้ได้เว็บที่สวยงามและใช้งานได้นานขึ้นบนอุปกรณ์แบบพกพา
  • อย่างที่ 4 HTML5 รองรับการแสดงผลกราฟฟิคขั้นสูง ซึ่งก็เช่นเดียวกันกับการรองรับ VDO นั่นแหละครับ มันถูกออกแบบมาเพื่อทดแทนแฟลช หรือ เกมส์แฟลชโดยตรง
  • อย่างที่ 5 HTML5 FORM รองรับการทำงานกับฟอร์มที่ฉลาดขึ้น เช่น การแทรกคำสั่งการตรวจสอบฟอร์ม เหตุผลก็เพื่อลดการใช้ Javascript ให้น้อยลง
  • อย่างที่ 6 HTML5 จะมีการเพิ่ม tag และ attribute อีกเป็นจำนวนมาก เพื่อให้การนำไปใช้งานสามารถประยุกต์ใช้ได้โดยไม่ต้องพืีงพา Javascript ภายนอกมากนัก เช่น input ชนิด ปฏิทิน ซึ่งสามารถแสดงปฏิทินได้ทันที หรือ input ลักษณะ slide เป็นต้น


ข้อเสียของ HTML5

จะว่าเป็นข้อเสียก็ไม่ถูก เพราะมันจะเป็นข้อเสียของปัจจุบันเท่านั้น แต่ในอนาคตมันคงจะเป็นสิ่งจำเป็นสำหรับเราอย่างหลีกเลี่ยงไม่ได้
  • ต้องมาเรียนรู้กันใหม่ เพราะ HTML5 มี tag และ attribute ที่แตกต่างจากเดิมเป็นอย่างมาก ถึงแม้ tag แบบเดิมๆ หลายตัวจะยังคงอยู่ (หลายตัวก็หายไป) แต่การใช้ HTML5 เพื่อประโยชน์ของมันอย่างเต็มที่ ก็คงต้องเรียนรู้การใช้งานให้ถูกต้องกันด้วยครับ
  •  บราวเซอร์ในปัจจุบัน (2554) ยังไม่รองรับการใช้งาน HTML5 แบบสมบูรณ์ ซึ่งในอนาคตคงไม่มีปัญหานี้ละครับ แต่ในขณะที่ปัจจุบันยังมีผู้ใช้ IE8 หรือ IE7 อยู่ การเปลี่ยนมาเขียนด้วย HTML5 ก็ยังคงเป็นอุปสรรคที่สำคัญอยู่

ตัวอย่างโค้ด HTML5
<!DOCTYPE html>

<html lang="th">

<head>

<meta charset="utf-8">

<title>HTML5 Document</title>

</head>

<body>

 

</body>

</html>
จากโค้ดด้านบน จะเห็นได้ว่า การเขียนโค้ดด้วย HTML5 จะสั้นลงเป็นอย่างมากนะครับ (เหมือนกลับไปเขียนแบบเก่าเลย) และนอกจากนี้ หากเราใช้ HTML5 ร่วมกับ CSS3 อาจทำให้เราไม่ต้องใช้รูปภาพบนเว็บไซต์และ Javascript เลยก็ได้