Giới thiệu

Trong HTML, thuộc tính id trong HTML được dùng để xác định một id duy nhất cho một phần tử HTML (giá trị phải là duy nhất trong file HTML). Giá trị id có thể được dùng trong CSS hoặc JavaScript để thực hiện một tác vụ nhất định cho phần tử duy nhất với giá trị id đó.

Trong CSS, để chọn phần tử có id nào đó, dùng kí tự thăng (#) trước id của phần tử.

Ví dụ dùng CSS để tạo kiểu cách cho phần tử với id “tiêu đề”

<style>
 #tiêuđề {
   background-color: lightblue;
   color: black;
   padding: 40px;
   text-align: center;
 }
 </style>
 <h1 id="tiêuđề">Đây là tiêu đề</h1>

Lưu ý:

• Thuộc tính id có thể dùng với bất kì phần tử HTML nào.
• Giá trị id có phân biệt chữ thường và chữ hoa.
• Giá trị id phải chứa ít nhất 1 kí tự và không chứa khoảng trắng.

Phân biệt class và id trong HTML

Phần tử HTML chỉ có thể có một id duy nhất thuộc về phần tử đó, trong khi class có thể dùng cho nhiều phần tử.

<style>
 /* Tạo kiểu cách cho thuộc tính id "tiêuđề" */
 #tiêuđề {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
 }
 
 /* Tạo kiểu cách cho tất cả phần tử bằng lớp "thànhphố" */
 .thànhphố {
  background-color: tomato;
  color: white;
  padding: 10px;
 }
</style>
 
 <!-- Một phần tử duy nhất -->
 <h1 id="tiêuđề">Thành phố của tôi</h1>
 
 <!-- Nhiều phần tử giống nhau -->
 <h2 class="thànhphố">Hà Nội</h2>
 <p>Hà Nội là thủ đô của Việt Nam.</p>
 
 <h2 class="thànhphố">Paris</h2>
 <p>Paris là thủ đô của Pháp.</p>
 
 <h2 class="thànhphố">Tokyo</h2>
 <p>Tokyo là thủ đô của Nhật Bản.</p>

Dùng thuộc tính id trong JavaScript

JavaScript có thể truy cập các phần tử có tên lớp nhất định bằng getElementById()

function displayResult() {
   document.getElementById("myHeader").innerHTML = "Xin chào!";
}

Đánh dấu trang bằng ID và Link

Đánh dấu trang trong HTML cho phép người đọc đi tới những phần khác nhau của trang nhanh hơn, rất hữu ích nếu trang quá dài. Để tạo đánh dấu trang, trước hết tạo dấu trang, sau đó gắn đường dẫn vào đó. Khi click vào đường dẫn, trang sẽ cuộn tới vị trí được đánh dấu.

Trước hết tạo dấu trang bằng thuộc tính id

<h2 id="C4">Chương 4</h2>

Sau đó gắn đường dẫn vào dấu trang này (Đi tới Chương 4), từ cùng một trang.

<a href="#C4">Đi tới Chương 4</a>

Hoặc gắn đường dẫn vào dấu trang này từ một trang khác.

<a href="html_demo.html#C4">Đi tới Chương 4</a>

Kết luận

Qua đây là một số chia sẻ về thuộc tính id trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.