สิ่งที่คุณควรรู้เกี่ยวกับ HTML5 (ตอนที่ 1)
HTML คืออะไร
HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง
แล้ว HTML5 ล่ะ ???
HTML5 คืออะไร
HTML5 ก็คือ HTML ที่ได้รับการพัฒนาขึ้นมาใหม่ ถูกพัฒนาขึ้นเพื่อเป็นภาษามาร์กอัปสำหรับ WWW รุ่นต่อไปของ HTML
สิ่งหลักๆที่เปลี่ยนไปจากเวอร์ชั่นเก่า
มาดูตัวอย่างการประกาศโครงสร้างพื้นฐานให้กับ HTML กันครับ เริ่มจากเวอร์ชั่นเก่าๆ
แล้วลองมาดูเวอร์ชั่น HTML5 กันครับ
เห็นได้ชัดเลยครับว่าการประกาศส่วนต่างๆสั้นลงมาก ซึ่งสิ่งหลักๆที่เปลี่ยนก็คือ
- Doctype เขียนง่ายขึ้น: เวอร์ชั่นเก่าต้องขึ้น
<!DOCTYPEแล้วก็ตามด้วยรายละเอียดยาวๆ แต่พอเป็น HTML5 แล้ว จะเขียนแบบไม่มีกำหนดเวอร์ชั่น เพื่อให้นำไปใช้ได้กับเวอร์ชั่นอื่นๆในอนาคต - การกำหนดภาษาทำได้ง่ายขึ้น: เมื่อก่อนจะต้องเขียน
xmlnหรือxml:langใน<html>เพื่อกำหนดภาษาของหน้า แต่สำหรับ HTML5 ก็สั้นลงมากแบบตัวอย่างครับ - ไม่ต้องมี “/” สำหรับ Tag เดี่ยวแล้ว: Tag เดี่ยว หมายถึง Tag ที่ไม่มี Tag ปิด เช่น
<img><input><br>ซึ่งจะต่างกับ Tag ที่เป็น Tag เปิดปิดอย่าง<div></div><strong></strong>โดยถ้าเป็นเมื่อก่อน Tag เดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น<img/>หรือ<br/>แต่ใน HTML5 นี้ Tag เดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว - Tag บางส่วนจะไม่รองรับใน HTML5 แล้ว: Tag เก่า ๆ บางส่วนจะถูกตัดทิ้งไป และเพิ่ม Tag ใหม่ๆเข้ามา แนะนำให้ตรวจสอบจาก HTML Element Reference (สามารถเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)
จุดเด่นของ HTML5
ความสามารถเด่นๆของ HTML5 ก็คือ
- Semantic Markup: Tag ใหม่จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น (สามารถดูรายละเอียด Tag จากลิ้ง HTML Element Reference)
- Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
- Multimedia: สามารถเล่นไฟล์เสียงและวิดีโอได้ในตัว ไม่จำเป็นต้องติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย
- Canvas: ถูกเพิ่มเข้ามาช่วยให้เราสามารถวาดภาพลงบนเว็บเพจได้โดยตรง
- Offline & Storage: ช่วยให้เว็บสามารถทำงานแบบออฟไลน์ได้ และเก็บข้อมูลไว้ใช้งานบนเครื่องของผู้ใช้เว็บได้
บทความนี้เป็นบทความแนะนำข้อมูลเบื้องต้นของเทคโนโลยี HTML5 เพื่อเตรียมความพร้อมและปูพื้นฐานของ HTML5 โดยบทความต่อไปเราจะมาพูดถึงโครงสร้างของ Tag และตัวอย่าง Tag พื้นฐานกันครับ
