แบบทดสอบก่อนเรียน
แบบทดสอบก่อนเรียน
สิ่งใหม่ๆ ใน HTML5
มีอะไรใหม่ใน HTML5 บ้าง?
HTML5 มีการเพิ่มเติมคุณลักษณ์ใหม่ๆ เข้ามาเพิ่มเติม พร้อมทั้งยกเลิกแท็ก(Tag) บางตัว ซึ่งเป็นการยกเลิกรูปแบบการใช้งานเดิมบางส่วนออกไป สิ่งที่เพิ่มเข้ามาใน HTML5 ที่น่าสนใจเช่น
- Audio/Video Support ใน HTML5 จะรองรับมัลติมีเดียได้อย่างเต็มรูปแบบหรือสมบูรณ์มากขึ้น โดยได้เพิ่มแท็กสำหรับการแสดงภาพและเสียงโดยตรง
- New Form Input เพิ่มอินพุท (Input) ชนิดใหม่ๆ เข้ามามากมายเพื่อรับข้อมูลรูปแบบนั้นๆ โดยตรง เช่น email, number, datetime เป็นต้น นอกจากจะช่วยให้เราได้รับข้อมูลที่ถูกต้องแล้ว ยังลดขั้นตอนของการเขียนสคริปต์ (JavaScript หรือ PHP) เพื่อตรวจสอบความถูกต้องของข้อมูล
- Semantic Markup Page Layout จัดเป็นกลุ่มแท็กที่ใช้ในการจัดโครงสร้างของเพจที่สื่อความหมายของส่วนต่างๆ เช่น <header>, <nav>, <article>, <section>, <aside> และ <footer>
- Canvas Graphics จะช่วยให้เราวาดรูปกราฟฟิกรูปแบบต่าง ๆ ตามที่เราต้องการ บนหน้าเว็บเพจได้ง่ายและสะดวกขึ้น
- Drag & Drop ใน HTML5 นั้นรองรับการ Drag & Drop ออบเจ็กต์บนหน้าเว็บ โดยใช้คำสั่ง จาวาสคริป (JavaScript) ควบคุมกระบวนการ
- Web Storage เป็นกลไกการจัดเก็บข้อมูลฝั่งเบราเซอร์ แบบใหม่ ซึ่งสามารถจัดเก็บข้อมูลแบบซับซ้อนได้ดีกว่าเดิมที่จัดเก็บแบบคุกกี้
- Geolocation เป็นการหาค่าละติจูด และลองติจูดเพื่อระบุตำแหน่งบนพื้นโลก
| <header> | |
| <nav> | |
| <article> | <aside> |
| <section> | |
| <footer> | |
แท็ก (Tag) ใหม่ใน HTML5
HTML5 มีการเพิ่มแท็กใหม่เข้ามาอีกจำนวนหนึ่ง เพื่อขยายขีดความสามารถในการสรา้งเว็บไซต์ ดังเช่นในตารางด้านล่างนี้.
| <article>, <aside>,<header>, <footer>, <nav>, <section> | แท็กเหล่านี้ใช้ในการจัดการโครงสร้างของเอกสารที่ซับซ้อนให้ดียิ่งขึ้น จากเดิมที่ต้องใช้เป็นตาราง |
| <audio>, <video>, <track>, <source>, <embed> | เป็นแท็กสำหรับใช้งานด้านมัลติมีเดีย |
| <canvas> | ใช้สำหรับวาดภาพ และแสดงผลด้านกราฟฟิก |
| <mark> | สำหรับเน้นข้อความโดยทำไฮไลต์พื้นหลังของข้อความ |
| <meter> | สำหรับการวัดค่า |
| <progress> | สำหรับการแสดงความคืบหน้าของงาน |
| <time> | สำหรับแสดงวันที่ และเวลา |
| <datalist> | สำหรับแสดงรายการใน Dropdown |
| <hgroup> | สำหรับจัดกลุ่มหัวข้อเอกสาร |
| <input type="email"> | เป็นช่องรับข้อมูลชนิดอีเมล ซึ่งสามารถตรวจสอบได้ว่าข้อมูลที่ใส่มานั้นตรงตามรูปแบบของอีเมลหรือไม่ |
| <input type="url"> | เป็นช่องรับข้อมูลที่เป็น URL เท่านั้น |
| <input type="number"> | เป็นช่องรับข้อมูลชนิดตัวเลข |
| <input type="range"> | เป็นช่องรับข้อมูลที่ต้องอยู่ในช่วงที่กำหนดเท่านั้น |
| <input type="color"> | แสดงรายการสีให้เลือก |
| <input type="datetime"> | ช่องรับข้อมูลเป็นวันเวลาเท่านั้น |
แท็กที่ถูกยกเลิกใช้งานใน HTML5
HTML5 ได้มีการยกเลิกการใช้งานในแท็กบางส่วนอีกด้วย โดยแท็กที่ HTML5 ไม่รองรับแล้ว ดังนี้
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
ในบางแท็กอาจไม่ได้ถูกยกเลิก แต่อาจมีการเปลี่ยนแปลงเกี่ยวกับการกำหนดค่า แอตทริบิวต์ (Attribute) อย่างไรก็ตาม ถึงแม้ HTML5 จะยกเลิกแท็กไปบางรายการ แต่เว็บบราเซอร์ (Web Browse) อาจจะยังรองรับการใช้งานแท็กนั้นอยู่ แม่เราจะใช้แท็กที่ HTML5 ไม่รองรับแล้วก็ตาม ก็จะได้รับผลลัพธ์ตามปกติ
หากเราตั้งใจที่จะก้าวสู่เทคโนโลยีของ HTML5 ก็ควรเลือกใช้เฉพาะสิ่งที่ HTML5 รองรับจะดีกว่า เพราะในอนาคตหากเว็บเบราเซอร์ต่าง ๆ รองรับ HTML5 อย่างเต็มรูปแบบแล้ว อาจส่งผลต่อเว็บไซต์ของเราที่ใช้แท็กไม่ตรงกับมาตราฐานของ HTML5
