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

 
<h1 id="tiêuđề">Thành phố của tôi</h1>

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

Bài liên quan

Thuộc tính chính trong HTML

Các thuộc tính sẽ bổ sung rõ hơn về ý nghĩa cho các thẻ trong HTML. Những thuộc tính chính dưới đây có thể sử dụng trong mọi thẻ HTML. Thuộc tính chính trong HTML = thuộc tính được thêm trong HTML5 Thuộc tính Miêu tả accesskey Phím tắt để kích hoạt/di chuyển tới ...

Vũ Văn Thanh viết 14:42 ngày 19/09/2018

Các thuộc tính CSS trong HTML

Định dạng HTML với CSS CSS là viết tắt của Cascading Style Sheets. CSS mô tả các phần tử HTML được hiển thị như thế nào trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều webpage cùng một ...

Trịnh Tiến Mạnh viết 14:45 ngày 07/09/2018

Thuộc tính Colors trong HTML

Trong HTML, màu sắc có thể được xác định bằng cách sử dụng một tên màu, một giá trị RGB, hoặc một giá trị HEX. Tên màu Trong HTML, màu sắc có thể được xác định bằng cách sử dụng một tên màu: Giá trị RGB trong HTML Trong HTML, màu sắc cũng có thể được ...

Hoàng Hải Đăng viết 14:44 ngày 07/09/2018

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 đó. ...

Trịnh Tiến Mạnh viết 11:09 ngày 22/08/2018

Thuộc tính class trong HTML

Trong HTML, thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML. Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhất định cho phần tử có tên lớp đó. Trong CSS, để chọn phần tử có lớp đặc biệt, ta thêm dấu chấm (.) và ...

Hoàng Hải Đăng viết 11:05 ngày 22/08/2018
0