Thuộc tính id trong HTML

Thuộc tính id trong HTML dùng để gán một **định danh duy nhất** (unique identifier) cho một phần tử. Mỗi giá trị id chỉ được xuất hiện **một lần** trên toàn bộ trang HTML. Nó dùng để:

• Chọn phần tử bằng CSS: #ten-id { ... }
• Truy xuất phần tử bằng JavaScript: document.getElementById("ten-id")
• Tạo liên kết neo (anchor link): <a href="#ten-id">
• Liên kết <label for="ten-id"> với <input id="ten-id">

Lưu ý: Kể từ HTML5, id được phép bắt đầu bằng số (trước đó không được). Tuy nhiên, khuyến khích dùng chữ cái đầu để tương thích tốt nhất.

Ví dụ: Sử dụng id cho CSS và JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Demo id attribute</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    #gameArea {
      width: 70%; margin: 0 auto; padding: 0; text-align: center;
      border: 1px solid #333; height: 105px; background: #28a745;
    }
    #dangerTop, #dangerBottom {
      height: 40px; background: #dc3545; color: white;
    }
    #dangerTop { border-bottom: 1px solid #333; margin-bottom: 15px; }
    #dangerBottom { border-top: 1px solid #333; margin-top: 15px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Game di chuột an toàn</legend>
      <div id="gameArea">
        <div id="dangerTop"><h2>NGUY HIỂM</h2></div>
        <div id="safeZone"><h2>AN TOÀN</h2></div>
        <div id="dangerBottom"><h2>NGUY HIỂM</h2></div>
      </div>
      <button id="startBtn" onclick="startGame()">Bắt đầu</button>
      <div id="status"></div>
    </fieldset>
  </form>
  <script>
    var status = document.getElementById('status');
    var area = document.getElementById('gameArea');
    function play(e) {
      var y = e.clientY;
      var x = e.clientX;
      // Kiểm tra chuột có ở vùng xanh (an toàn) không
      var rect = area.getBoundingClientRect();
      var safeTop = rect.top + 40; // dưới dangerTop
      var safeBottom = rect.bottom - 40; // trên dangerBottom
      if (y > safeTop && y < safeBottom) {
        status.textContent = 'Tiếp tục!';
        if (Math.abs(x - (rect.left + rect.width/2)) < 5) {
          status.textContent = 'Chiến thắng! Bạn tìm thấy điểm giữa.';
          area.removeEventListener('mousemove', play);
        }
      } else {
        status.textContent = 'Vào vùng đỏ! Thua.';
        area.removeEventListener('mousemove', play);
      }
    }
    function startGame() {
      status.textContent = 'Di chuột trong vùng xanh...';
      area.addEventListener('mousemove', play);
    }
  </script>
</body>
</html>

Giải thích ví dụ

• CSS dùng #gameArea, #dangerTop, #dangerBottom để style các vùng.
• JS dùng document.getElementById() để lấy phần tử và gắn sự kiện.
• Game yêu cầu giữ chuột trong vùng xanh, tránh vùng đỏ.

Quy tắc đặt id tốt

• Duy nhất trên trang (không trùng).
• Không chứa khoảng trắng.
• Nên dùng kebab-case: user-profile, main-content.
• Có ý nghĩa ngữ nghĩa (semantic), tránh id="div1", id="a".
• Không bắt đầu bằng số nếu cần tương thích CSS selector cũ (dùng escape: #\31 23item).

Thuộc tính id là "căn cước" của phần tử HTML — dùng đúng, dùng đủ, không lạm dụng.