HTML5 คือ? ต่างจาก HTML อย่างไร

HTML5 คืออะไร?

HTML5 เป็นภาษาที่ถูกพัฒนาต่อมาจากภาษา HTML ย่อมาจาก Hypertext Markup Language ซึ่งเป็นภาษาที่ใช้กันอย่างแพร่หลายในการพัฒนาเว็บแอปพลิเคชัน Berners-Lee สร้าง HTML ในปี 1991 รุ่นแรกคือ HTML1 มีการพัฒนามาจนถึง HTML4 ซึ่งเปิดตัวในในปี 1998 เป็นเวอร์ชันที่ได้รับความนิยมอย่างมาก โดยมีแท็กใหม่สำหรับสไตล์ชีต สคริปต์ เฟรม ออบเจกต์แบบฝัง ตารางและฟอร์มที่ซับซ้อนยิ่งขึ้น และคุณสมบัติการเข้าถึงที่ได้รับการปรับปรุงสำหรับผู้พิการ ซึ่งช่วยให้จัดการเว็บแอปพลิเคชันได้ดีขึ้น

HTML5 เปิดตัวในปี 2551 โดยกลุ่มสองกลุ่ม World Wide Web Consortium (W3C) และ Web Hypertext Application Technology Working Group (WHATWG) เป็นเวอร์ชันที่ 5 ของ HTML

บทความนี้จะมาเรียนรู้ความแตกต่างระหว่างสองเวอร์ชัน HTML กับ HTML5

HTML5 ต่างจาก HTML อย่างไร

HTML5 มีองค์ประกอบใหม่มีอะไรบ้าง

HTML5 มีองค์ประกอบใหม่มากมายที่สนับสนุนโดยเว็บเบราว์เซอร์ส่วนใหญ่ เช่นรายการที่เราจะกล่าวถึง ดังต่อไปนี้

• <article> – ใช้เพื่อทำเครื่องหมายเนื้อหาเฉพาะว่าเป็นส่วนหนึ่งของบทความ
• <aside> – มักใช้ในแถบด้านข้างของเอกสาร แม้ว่าองค์ประกอบนี้จะไม่แสดงในรูปแบบเฉพาะในเบราว์เซอร์ แต่ก็สามารถใช้ CSS เพื่อจัดรูปแบบได้
• <audio> – ช่วยให้ผู้ใช้สามารถฝังเนื้อหาเสียงของหน้า เช่น เพลงหรือสตรีมเสียง รูปแบบเสียงที่รองรับ ได้แก่ MP3, OGG และ WAV
• <canvas> – องค์ประกอบนี้ใช้ JavaScript เพื่อวาดกราฟิก (กล่อง เส้นทาง การไล่ระดับสี ข้อความ) และเพิ่มรูปภาพลงในเพจ ค่าเริ่มต้นจะไม่รวมเส้นขอบและข้อความ แท็กจะโปร่งใสและทำหน้าที่เป็นคอนเทนเนอร์สำหรับกราฟิกที่วาดเท่านั้น
• <data> – ใช้เพื่อเพิ่มคำแปลที่เครื่องสามารถอ่านได้ของเนื้อหาที่ระบุ
• <datalist> – ระบุรายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input>
• <details> และ <summary> – เนื้อหาที่อยู่ในองค์ประกอบนี้จะถูกซ่อนไว้ในตอนแรกและจะแสดงเมื่อผู้ใช้ต้องการดูเท่านั้น
• <dialog> – กำหนดกล่องโต้ตอบหรือหน้าต่างย่อย ทำให้ง่ายต่อการสร้างกล่องโต้ตอบป๊อปอัปและหน้าต่างโมดอลบนหน้าเว็บ
• <embed> – ใช้เพื่อฝังแอปพลิเคชันของบุคคลที่สามซึ่งโดยทั่วไปจะอยู่ในรูปของเนื้อหามัลติมีเดีย เช่น วิดีโอหรือเสียง
• <figure> and <figcaption> – ใช้เพื่อระบุเนื้อหาที่มีในตัวเอง เช่น ไดอะแกรม ภาพประกอบ รายการรหัส และภาพถ่าย
• <footer> – กำหนดส่วนท้ายสำหรับแต่ละส่วนหรือหน้า โดยทั่วไปจะมีข้อมูลเกี่ยวกับผู้เขียน รายละเอียดการติดต่อ ลิขสิทธิ์ แผนผังเว็บไซต์ การอ่านที่เกี่ยวข้อง และอื่นๆ
• <header> – โดยทั่วไปองค์ประกอบนี้จะประกอบด้วยข้อมูลที่เกี่ยวข้องกับส่วนหัวและชื่อเรื่องของเพจ หรือชุดของลิงก์การนำทาง
• <mark> – กำหนดข้อความที่ต้องเน้นหรือทำเครื่องหมายภายในย่อหน้า
• <meter> – ใช้เพื่อกำหนดการวัดสเกลาร์ภายในช่วงที่กำหนดไว้ล่วงหน้าและค่าเศษส่วน
• <nav> – แสดงส่วนต่างๆ ของเว็บไซต์ที่โดยทั่วไปมีไว้สำหรับลิงก์การนำทางที่นำไปสู่จุดอื่นในหน้าปัจจุบันหรือหน้าอื่น
• <output> – ใช้เพื่อแสดงผลลัพธ์ของการคำนวณ เช่นเดียวกับที่ดำเนินการโดยสคริปต์
• <progress> – แสดงภาพความคืบหน้าของงาน เช่น จำนวนงานที่เสร็จสมบูรณ์หรือระยะเวลาในการดาวน์โหลด โดยทั่วไปจะใช้ร่วมกับจาวาสคริปต์
• <section> – กำหนดส่วนเฉพาะของหน้าเว็บ รวมทั้งส่วนหัวและส่วนท้าย ใช้เพื่อแบ่งหน้าออกเป็นส่วนและส่วนย่อย
• <svg> – สำหรับกราฟิก SVG มีหลายวิธีในการวาดกล่อง เส้นทาง วงกลม ภาพกราฟิก และข้อความ
• <time> – แสดงวันที่และเวลาในรูปแบบที่มนุษย์อ่านได้ และยังใช้สำหรับเข้ารหัสข้อมูลวันที่และเวลาในรูปแบบที่เครื่องอ่านได้
• <video> – ใช้เพื่อฝังเนื้อหาวิดีโอในหน้าเว็บ ควรมีแท็ก <source> เพื่อร่างแหล่งที่มาของวิดีโอต่างๆ

ข้อดีของ HTML5

• เป็นมิตรกับมือถือและใช้งานง่ายมากขึ้น
• เว็บเพจประกอบด้วยสี เฉดสี และแบบอักษรที่หลากหลายขึ้น
• HTML5 เข้ากันได้กับเว็บเบราว์เซอร์ทั้งหมด
• รองรับฐานข้อมูลฝั่งไคลเอนต์
• HTML5 ได้ปรับปรุงประสิทธิภาพและความปลอดภัย
• HTML5 เข้าถึงและตรวจสอบเอกสาร HTML ได้ดีขึ้นด้วยแท็กที่มีความหมาย
• แท็กใหม่ๆ ช่วยให้พัฒนาเว็บแอปพลิเคชันได้ดียิ่งขึ้น

บทสรุป

ในบทความ HTML5 นี้ เราดูความแตกต่างที่สำคัญระหว่าง HTML กับ HTML5 เราได้พูดถึงข้อดีหลายประการของ HTML5 ที่ดีกว่า HTML แบบเดิม และยังได้ดูองค์ประกอบและคุณสมบัติใหม่ที่รวมอยู่ใน HTML5 ด้วย