HTML5 และ CSS3 ตอน จุดเด่นของ HTML5
1.Semantic Markup อย่างที่ผมอธิบายในบทความก่อนหน้าแบบสั้นๆว่ามันคือ "ความเป็นมิตรกับผู้ใช้ที่มากกว่าการมองเห็นด้วยสายตา" ผมจะขยายความเพิ่มเติมละกันว่ามันคืออะไร
ในการเขียน HTML แบบเดิม (HTML4) เราจะใช้ tag ตัวเดียวคือ div ในการแบ่งสิ่งต่างๆบนหน้าเว็บ และอาจกำหนด class หรือ id เพื่อบอกว่าส่วนนี้หมายถึงอะไร เช่น
<div id="topmenu">Menu</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
จากโค้ด จะเห็นว่า เราใช้ id เพื่อบอกว่าส่วนต่างๆนั้นหมายถึงอะไร เช่น topmenu หมายถึงเมนูหลักของเว็บ หรือ footer คือ footer ของเว็บ แต่ในทางปฎิบัติมันไม่ได้มีกฎตายตัวว่า ส่วนไหนจะใช้ชื่ออะไร ดังนั้นบางคนอาจใช้ nav หรือ menu แทน topmenu ซึ่งเป็นปัญหากับอุปกรณือื่นๆ เช่น reader สำหรับคนตาบอดที่ต้องแปลความหมายว่าส่วนนี้หมายถึงอะไรเพื่อที่จะได้อ่านได้อย่างถูกต้อง หรือ Search Engine ทั้งหลาย ที่จะมีความสามารถในการแยกแยะเอาข้อมูลออกจากส่วนอื่นๆ
HTML5 ถูกออกแบบมาเพื่อแก้ปัญหานี้ ด้วยการกำหนด tag แบบเฉพาะเจาะจงเพื่อให้อุปกรณ์เหล่านี้สามารถรับรู้ได้ทันทีว่ามันหมายถึงอะไร เช่น
<nav>Menu</nav>
<article>Content</article>
<footer>Footer</footer>
จะเห็นได้ว่า HTML5 จะมี tag ที่สามารถบ่งบอกว่าแต่ละส่วนคืออะไรอย่างชัดเจน ทำให้อุปกรณ์ต่างๆสามารถแยกแยะเนื่อหาได้ถูกต้องแม่นยำมากขึ้น ลดความซับซ้อนของบราวเซอร์ และแน่นอน มันจะเร็วขึ้น และ ประหยัดพลังงานมากขึ้น
2. Form Enhancement เป็นการเพิ่มประสิทธิภาพของฟอร์มที่ทำงานบนเว็บบราวเซอร์ โดยหลักๆแล้วเพื่อเป็นการลดการใช้ Javascript กับฟอร์ม ยกตัวอย่างเช่น HTML5 จะมี input ชนิดต่างๆมากขึ้น เช่น
<input type="datetime-local">
<input type="color">
<input type="range">