Thuộc tính id trong HTML

Thuộc tính id trong HTML

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>
Thuộc tính id trong HTML
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()

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.

CodeGym Full-stack

Leave a Reply

Your email address will not be published. Required fields are marked *