ทำความรู้จัก HTML5 กันหน่อย

ทำความรู้จัก HTML5 กันหน่อย

structure-html5

เนื่องจากกระแส HTML5 ตอนนี้มาแรง และอีกกระแสที่แรงพอ ๆ คือ CSS3 เลยทีเดียว ผมเคยได้ยินแต่ชื่อมานานพอควร ไม่รู้ว่า HTML5 มันเอาไว้ทำอะไรกันแน่ ผมก็เลยไปหาอ่านบทความต่างๆ จากหลายๆ ที่ … บทความนี้เขียนขึ้นเพื่อแนะนำ HTML5 ให้ผู้ที่ยังไม่เคยใช้มาก่อน รวมถึงการเขียนโค้ด HTML5 เบื้องต้น(จริงๆ)อีกด้วย หากท่านใดพอจะทราบเรื่อง HTML5 แล้ว ก็ขอให้มองข้ามบทความนี้ไปเลยครับ

จุดเด่นของ HTML5

ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่าย ๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษอีกแหละ)

ความสามารถเด่น ๆ ของมันก็คือ

  • Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
  • Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
  • เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5Video จะมาแทน Flash Video (.flv)
  • Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash)
  • ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
  • Drag and Drop: ลากของมาวาง
  • Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว

HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร

นอกจากจะมีอะไรใหม่ ๆ ใน HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ:

  • Doctype เขียนง่ายขึ้น
  • การกำหนดภาษาทำได้ง่ายขึ้น เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก เพื่อกำหนดภาษาของหน้า
  • การกำหนดชุดตัวอักษรทำได้ง่ายขึ้น เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8
  • ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว เช่น <img>โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย
  • ยกเลิกแท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ (บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้) ที่เห็นชัดๆคือแทก<center>

การเขียนแบบ Semantic Markup ของ HTML5

มีการกำหนดแท็กขึ้นมาใหม่ที่เพิ่มเข้ามาเบื้องต้นที่ควรรู้จัก มีดังนี้: