Thuộc tính hidden trong HTML

Thuộc tính hidden trong HTML là một thuộc tính boolean (true/false) dùng để chỉ định rằng một phần tử không còn liên quan đến tài liệu hiện tại và **nên được ẩn khỏi người dùng**. Trình duyệt sẽ không hiển thị phần tử này (tương đương display: none), nhưng phần tử vẫn tồn tại trong DOM và có thể thao tác bằng JavaScript.

Cú pháp

<div hidden>Nội dung ẩn</div>
<!-- Hoặc -->
<div hidden="hidden">Nội dung ẩn</div>

Để hiển thị lại: element.hidden = false hoặc element.removeAttribute("hidden").

Ví dụ: Hiển thị menu theo quyền hạn

<!DOCTYPE html>
<html>
<head>
  <title>Demo hidden attribute</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Phân quyền menu</legend>
      <label>Cấp độ: <input type="text" id="role" placeholder="admin / user"></label><br>
      <select id="adminMenu" hidden>
        <option>Thêm người dùng</option>
        <option>Xóa người dùng</option>
        <option>Sửa người dùng</option>
      </select>
      <select id="userMenu" hidden>
        <option>Gửi mail admin</option>
        <option>Gọi admin</option>
      </select>
      <button type="button" onclick="showMenu()">Xem menu</button>
      <div id="msg">Nhập cấp độ và nhấn nút</div>
    </fieldset>
  </form>
  <script>
    var role = document.getElementById("role");
    var adminMenu = document.getElementById("adminMenu");
    var userMenu = document.getElementById("userMenu");
    var msg = document.getElementById("msg");

    function showMenu() {
      var val = role.value.trim().toLowerCase();
      if (val === "admin") {
        adminMenu.hidden = false;
        userMenu.hidden = true;
        msg.textContent = "Chào Admin - Menu quản trị";
      } else if (val === "user") {
        userMenu.hidden = false;
        adminMenu.hidden = true;
        msg.textContent = "Chào User - Menu cơ bản";
      } else {
        adminMenu.hidden = true;
        userMenu.hidden = true;
        msg.textContent = "Cấp độ không hợp lệ";
      }
    }
  </script>
</body>
</html>

Kết quả:

Nhập "admin" → hiện menu quản trị (3 tùy chọn).
Nhập "user" → hiện menu người dùng (2 tùy chọn).
Khác → ẩn cả hai, báo lỗi.

hidden vs CSS display:none vs visibility:hidden

Đặc điểm	hidden (HTML)	display: none	visibility: hidden
Ẩn hoàn toàn	Có	Có	Có
Giữ chỗ layout	Không	Không	Có (vẫn chiếm diện tích)
Con cháu hiển thị được	Không	Không	Có (nếu con `visibility: visible`)
Truy cập DOM/JS	Có	Có	Có
Độ ưu tiên	Cao (UA stylesheet)	Cao	Thấp hơn
Semantic (ngữ nghĩa)	Có ("không liên quan")	Không (chỉ trình bày)	Không (chỉ trình bày)

Lưu ý quan trọng

hidden không nên dùng để ẩn nội dung mà vẫn muốn truy cập bởi screen reader (đọc màn hình) — vì screen reader cũng bỏ qua hidden. Dùng CSS position: absolute; left: -9999px hoặc clip-path nếu cần ẩn thị giác nhưng giữ truy cập.
Không dùng hidden để giấu nội dung quan trọng cho SEO — Google có thể bỏ qua.
Có thể dùng CSS chọn: [hidden] { display: none !important; } để ghi đè nếu framework reset CSS.