Thuộc tính id trong HTML

Trong HTML, thuộc tính id đượ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>

So sánh sự khác biệt giữa thuộc tính class và id trong HTML

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()

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

Đá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>

Bài trước: Thuộc tính class trong HTML

Bài sau: Iframe trong HTML