Introduction to Semantic HTML5 elements

HTML5 ได้เพิ่ม element ใหม่ๆเพื่อให้ HTML ที่มีอยู่ในปัจจุบันมีประสิทธิภาพและ semantic (ความหมายของคำหรือสัญลักษณ์ tag) มากขึ้น

ก่อนที่เราจะมาทำความเข้าใจกับ element เราจะใช้ตัวอย่างเดียวกันทั้งหมด ซึ่งได้ยืมข้อมูลมาจาก AllReceipes

และก่อนที่เราจะพูดถึงบทต่อๆไป เราควรจะดู HTML ของเก่า ก่อนที่จะมาดู HTML5 เพราะจะมี >div> element อยู่เยอะและจะถูกแทนที่ด้วย element ใหม่
ของเก่าดูได้ที่ markup with regular HTML หลังจากนั้นก็เอามาเปรียบเทียบกัน ของใหม่ดูได้ที่ new HTML5 markup (ถ้าบทความไม่ได้แต่งเติมอะไรมาก แสดงว่าเป็น HTML ธรรมดา)

HTML5 element สามารถนำไปใช้งานได้หลายรูปแบบ เราได้รวบรวมไว้มากมายแต่ก็ยังไม่สามารถคลอบคลุมได้ทั้งหมด

เพราะเหตุนี้ สิ่งที่จะอธิบายในแต่ละ element ต่อไปนี้ จะเป็นการใช้งานที่คนส่วนใหญ่นั้นใช้กัน ซึ่งอาจจะไปเจอในบทความอื่นที่ใช้งาน element นั้นไม่เหมือนกัน

ดังนั้นในบทความนี้จะเจอการใช้ element ไม่ต่ำกว่า 1, 2, หรือ 3 แบบ เป็นต้นไป แต่ไม่ต้องกลัวที่จะใช้ element ใหม่ๆ เวลาเราใช้ element ใหม่ๆ จะทำให้เราไม่ต้องใช้แต่ <div> element บ่อยๆ