แอตทริบิวต์ id ใช้ระบุ ตัวระบุเฉพาะตัว (Unique Identifier) ให้กับองค์ประกอบ HTML ในหน้าเว็บเดียวกัน ต้องไม่ซ้ำกัน (Unique) ใช้สำหรับ CSS Selector, JavaScript DOM Access, Anchor Links, ARIA, และ Form Labels
กฎการตั้งชื่อ ID
- ต้อง ไม่ซ้ำกัน ในหน้าเว็บเดียวกัน (Duplicate ID = Invalid HTML)
- ต้องมีอย่างน้อย 1 ตัวอักษร
- ไม่ควรมี Space (เว้นวรรค)
- ควรเริ่มต้นด้วยตัวอักษร (A-Z, a-z) - HTML4 กำหนด, HTML5 ยอมรับอะไรก็ได้
- Case-sensitive (
myId≠myid) - อักขระที่ใช้ได้: ตัวอักษร, ตัวเลข, Hyphen (-), Underscore (_), Colon (:), Period (.)
ตัวอย่างการใช้งาน
<html>
<body>
<h1>Tutorialspoint</h1>
<p id="myid">เราให้บริการบทเรียน!</p>
<button onclick="display()">เพิ่มเติม...</button>
<script>
function display() {
// เข้าถึงผ่าน ID
document.getElementById("myid").innerHTML = "เรายังให้วิดีโอการเรียนรู้อีกด้วย";
}
</script>
</body>
</html>การใช้งาน ID หลักๆ
| การใช้งาน | ตัวอย่าง |
|---|---|
| CSS Selector | #myid { color: red; } |
| JavaScript Access | document.getElementById('myid') |
| Anchor Link (Fragment) | <a href="#section1">ไป Section 1</a> |
| Label for | <label for="email">Email</label> <input id="email"> |
| ARIA | aria-labelledby="title-id", aria-describedby="desc-id" |
| Form Owner (form=) | <input form="myForm"> |
แนวทางปฏิบัติที่ดี (Best Practices)
- ใช้ Semantic Naming:
id="main-navigation"ดีกว่าid="nav1" - ใช้ kebab-case:
user-profile-card(สอดคล้องกับ CSS, Data Attributes) - หลีกเลี่ยง ID ที่สร้างโดย Auto-increment (
id="item-1",id="item-2") ใน List - ใช้ Class/Index แทน - สำหรับ Component Libraries: ใช้ Prefix เช่น
id="myapp-modal-"
⚠️ Duplicate ID Problems
document.getElementById()คืนค่า แค่ตัวแรก ที่เจอ- Label `for` ผูกกับตัวแรก
- Anchor Link ไปตัวแรก
- CSS `#id` ใช้กับทุกตัว (แต่ Specificity เหมือนกัน)
- ARIA อาจอ้างอิงผิด
