Cách thêm ID duy nhất cho phần tử trong HTML?

Thuộc tính id gán định danh duy nhất cho phần tử trong trang. Phải duy nhất (không trùng), dùng cho: CSS selector (#id), JavaScript (getElementById), anchor link (#id), <label for="id">.

Ví dụ

<html>
  <body>
    <h1>Tutorialspoint</h1>
    <p id="myid">Chúng tôi cung cấp hướng dẫn!</p>
    <button onclick="display()">Xem thêm...</button>
    <script>
      function display() {
        document.getElementById("myid").innerHTML = "Chúng tôi cũng cung cấp video học tập";
      }
    </script>
  </body>
</html>

Quy tắc đặt ID

• Bắt đầu bằng chữ cái (a-z, A-Z).
• Chỉ chứa: chữ cái, số, gạch ngang (-), gạch dưới (_), hai chấm (:), chấm (.).
• Không chứa khoảng trắng.
• Phân biệt chữ hoa/thường (case-sensitive).
• Duy nhất trong toàn bộ document.

Thực hành tốt

• Dùng kebab-case: user-profile, main-content.
• Tránh ID chỉ số: id="1", id="item-1" (khó đọc).
• Không lạm dụng ID — class thường đủ cho CSS.