แอตทริบิวต์ hidden (Boolean Attribute) ใช้ระบุว่าองค์ประกอบ ยังไม่เกี่ยวข้อง/ไม่ควรแสดง ในปัจจุบัน เบราว์เซอร์จะซ่อนองค์ประกอบนี้ (เทียบเท่า display: none) แตกต่างจาก display: none ที่เป็น CSS เพราะ hidden เป็น Semantic (บอกความหมาย)
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>หัวข้อหลัก</h2>
<p>ย่อหน้านี้มองเห็นได้ปกติ</p>
<p hidden>ย่อหน้านี้ซ่อนอยู่ (ไม่เกี่ยวข้องตอนนี้)</p>
<button onclick="toggleHidden()">สลับการแสดงผล</button>
<script>
function toggleHidden() {
const hiddenP = document.querySelector('p[hidden]');
hiddenP.hidden = !hiddenP.hidden; // Toggle boolean property
}
</script>
</body>
</html>hidden vs CSS display:none vs visibility:hidden
| วิธี | Semantic | Layout Space | Accessibility | ใช้เมื่อไหร่ |
|---|---|---|---|---|
hidden (Attribute) |
✅ ใช่ (Not Relevant) | ไม่ครอบที่ (Removed from flow) | Screen Reader ข้าม | เนื้อหายังไม่เกี่ยวข้อง/เงื่อนไขไม่ผ่าน |
display: none |
❌ ไม่ (Visual Only) | ไม่ครอบที่ | Screen Reader ข้าม | ซ่อน Visual อย่างเดียว |
visibility: hidden |
❌ ไม่ | ครอบที่ยังคงไว้ | Screen Reader อาจอ่าน | ซ่อนแต่รักษา Layout |
aria-hidden="true" |
✅ ใช่ (Hidden from AT) | ไม่ส่งผล Layout | Screen Reader ข้าม (แต่ Visual เห็น) | ซ่อนจาก AT แต่อยากให้ User เห็น |
การใช้งานกับ JavaScript
// Property (Boolean) - แนะนำ
element.hidden = true; // ซ่อน
element.hidden = false; // แสดง
// Attribute - ทำงานได้แต่ช้ากว่า
element.setAttribute('hidden', '');
element.removeAttribute('hidden');
// CSS Selector
const hiddenElements = document.querySelectorAll('[hidden]');
const visibleElements = document.querySelectorAll(':not([hidden])');กรณีการใช้งานจริง
- Tab Panels: ซ่อน Panel ที่ไม่ Active
- Conditional Fields: ฟิลด์ที่แสดงต่อเมื่อเลือก Option ตัวหนึ่ง
- Loading States: ซ่อนเนื้อหาจนโหลดเสร็จ
- Feature Flags: ซ่อน Feature ที่ยังไม่เปิดให้
- Validation Errors: แสดง Error Message เฉพาะเมื่อ Invalid
⚠️ ไม่ควรใช้ hidden สำหรับ
- เนื้อหาที่อาจต้องการ Print (Print CSS อาจไม่แสดง)
- เนื้อหาที่ SEO ต้องการ Index (Google อาจไม่อ่าน) - ใช้ CSS แทน
- Animation Exit - ใช้ CSS Transition + Class แทน
