ความหมายเชิงความหมาย (Semantics) ของ HTML5 หมายถึงแท็กเชิงความหมายที่ให้ความหมายแก่หน้า HTML ใน HTML5 แท็กถูกแบ่งเป็นสองหมวดหมู่คือ แท็กเชิงความหมาย (semantic) และแท็กไม่เชิงความหมาย (non-semantic) HTML5 นำแท็กเชิงความหมายใหม่ๆ มาหลายตัว
แท็กเชิงความหมายของ HTML5 บางตัวคือ −
| แท็ก | คำอธิบาย |
|---|---|
| figure | ระบุภาพพร้อมรูปแบบต่างๆ |
| article | ระบุบทความอิสระที่มีเนื้อหาครบถ้วน |
| nav | ระบุคอนเทนเนอร์สำหรับลิงก์นำทาง |
| aside | ระบุแท็กสำหรับเนื้อหาไว้ข้างเคียงเนื้อหาหลัก (เช่น ไซด์บาร์) |
| section | แทนส่วนหนึ่งในเอกสาร |
| details | ระบุแท็กสำหรับรายละเอียดเพิ่มเติม |
| header | ระบุส่วนหัวสำหรับส่วนหนึ่งหรือเอกสาร |
| footer | ระบุส่วนท้ายสำหรับส่วนหนึ่งหรือเอกสาร |
| figcaption | ระบุคำอธิบายสั้นสำหรับภาพในเอกสาร HTML |
| main | ระบุเนื้อหาหลักของหน้าและควรเป็นของเดียว |
| summary | ระบุส่วนหัวสำหรับองค์ประกอบ <details> |
| mark | ระบุข้อความที่ไฮไลท์ |
ลองดูตัวอย่างความหมายเชิงความหมายของ HTML5 −
ตัวอย่าง
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } body { color: #000; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; } header { background-color: #000; padding: 20px; text-align: center; color: white; } nav { float: left; width: 20%; height: 200px; background: #282828; padding: 60px 10px; } nav ul { list-style-type: none; padding: 0; } nav ul li a { text-decoration: none; color: #fff; } article { float: left; padding: 80px 10px; width: 80%; background-color: #fff; height: 200px; text-align: center; } section:after { content: ""; display: table; clear: both; } footer { background-color: #000; padding: 20px; text-align: center; color: white; } </style> <body> <h1>การสาธิต HTML Semantics</h1> <header>This is Header</header> <section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article>This is an article element.</article> </section> <footer>This is Footer</footer> </body> </html>
ผลลัพธ์
