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 เลยก็ได้