HTML5 และ CSS3 ตอน จุดเด่นของ HTML5

ว่ากันด้วยเรื่องจุดเด่นของ 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">

ข้อเสียก็มีนะครับ ถึงแม้ว่า บราวเซอร์รุ่นใหม่ๆที่รองรับ HTML5 จะสามารถใช้งาน input ชนิดต่างๆเหล่านี้ได้ แต่มันก็ยังคงแสดงผลแตกต่างกันไปในแต่ละบราวเซอร์ครับ
ผู้เขียน goragod โพสต์เมื่อ 14 ต.ค. 2554 เปิดดู 14,609 ป้ายกำกับ HTML5CSS3
^