ความหมาย HTML5 หมายถึงแท็กความหมายที่ให้ความหมายกับหน้า HTML ใน HTML5 แท็กแบ่งออกเป็นสองประเภท - ความหมายและไม่ใช่ความหมาย HTML5 นำแท็กความหมายใหม่หลายแท็กมาสู่ HTML
แท็กความหมาย HTML5 บางแท็กคือ -
| แท็ก | คำอธิบาย |
|---|---|
| หุ่น | ระบุรูปภาพที่มีรูปแบบต่างกัน |
| บทความ | ระบุบทความอิสระที่มีเนื้อหาในตัวเอง |
| นำทาง | ระบุคอนเทนเนอร์สำหรับลิงก์การนำทาง |
| กัน | ระบุแท็กสำหรับเนื้อหานอกเหนือจากเนื้อหาหลัก (เช่น แถบด้านข้าง) |
| ส่วน | แสดงถึงส่วนในเอกสาร |
| รายละเอียด | ระบุแท็กสำหรับรายละเอียดเพิ่มเติม |
| ส่วนหัว | ระบุส่วนหัวสำหรับส่วนหรือเอกสาร |
| ส่วนท้าย | ระบุส่วนท้ายสำหรับส่วนหรือเอกสาร |
| คำบรรยายภาพ | ระบุคำอธิบายขนาดเล็กสำหรับรูปภาพในเอกสาร HTML |
| หลัก | ระบุเนื้อหาหลักของหน้าและควรไม่ซ้ำกัน |
| สรุป | ระบุส่วนหัวสำหรับองค์ประกอบ |
| เครื่องหมาย | ระบุข้อความที่ไฮไลต์ |
ให้เราดูตัวอย่างของ HTML5 Semantics -
ตัวอย่าง
<!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 Demo</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> ผลลัพธ์
