1. Giới thiệu

Trong HTML, thuộc tính id là một công cụ mạnh mẽ dùng để xác định một phần tử cụ thể trên trang web. Mỗi giá trị của thuộc tính id phải là duy nhất trên toàn bộ trang HTML, giúp phần tử đó có thể được nhận diện một cách độc lập bởi CSS, JavaScript và các công cụ khác. id được sử dụng rộng rãi để áp dụng kiểu dáng, xử lý sự kiện bằng JavaScript, và làm điểm neo (anchor) cho liên kết trên cùng một trang.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về thuộc tính id, cách sử dụng, các ví dụ cụ thể, và cách tối ưu hóa việc sử dụng id trong các dự án của bạn trên CodeTutHub.

2. Thuộc tính id là gì?

Thuộc tính id trong HTML được sử dụng để gán một định danh duy nhất cho một phần tử HTML cụ thể. Mỗi phần tử HTML trên trang chỉ có thể có một thuộc tính id, và giá trị của thuộc tính này phải duy nhất trên toàn bộ tài liệu HTML.

Cú pháp cơ bản:

<tag id="unique-id">Nội dung</tag>

Ví dụ:

<p id="intro">Đây là đoạn văn bản giới thiệu được xác định bởi id "intro".</p>

3. Cách sử dụng thuộc tính id trong HTML

a. Áp dụng CSS cho các phần tử có id

Bạn có thể sử dụng thuộc tính id để định dạng phần tử cụ thể trong CSS. Khi gọi id trong CSS, bạn cần sử dụng dấu # trước tên id để chọn phần tử tương ứng.

Ví dụ:

<style>
#intro {
  color: blue;
  font-size: 18px;
}
</style>
<p id="intro">Đây là đoạn văn giới thiệu đặc biệt.</p>

Trong ví dụ trên, đoạn văn có id="intro" sẽ được tô màu xanh và có cỡ chữ là 18px.

b. Tương tác với JavaScript qua id

JavaScript sử dụng thuộc tính id để truy cập và thao tác trên phần tử cụ thể. Bạn có thể sử dụng phương thức getElementById() để chọn một phần tử có id và thay đổi nội dung hoặc thuộc tính của nó.

Ví dụ:

<p id="intro">Nội dung ban đầu.</p>
<button onclick="changeContent()">Thay đổi nội dung</button>
<script>
function changeContent() {
  document.getElementById("intro").innerHTML = "Nội dung đã được thay đổi!";
}
</script>

Khi người dùng nhấn vào nút "Thay đổi nội dung", JavaScript sẽ thay đổi nội dung của đoạn văn có id="intro".

c. Sử dụng id để tạo liên kết nội trang (Anchor)

Thuộc tính id có thể được sử dụng để tạo điểm neo (anchor) cho các liên kết nội trang. Điều này rất hữu ích khi bạn muốn điều hướng người dùng đến một vị trí cụ thể trong cùng một trang web.

Ví dụ:

<a href="#section1">Đi đến Phần 1</a>
<p id="section1">Đây là Phần 1 của trang web.</p>

Khi người dùng nhấp vào liên kết "Đi đến Phần 1", trình duyệt sẽ tự động cuộn trang xuống phần tử có id="section1".

4. Quy tắc và lưu ý khi sử dụng thuộc tính id

a. Giá trị id phải là duy nhất

Trong HTML, mỗi giá trị id chỉ được sử dụng một lần trên mỗi trang. Điều này đảm bảo rằng khi bạn áp dụng kiểu dáng hoặc thao tác với JavaScript, chỉ có một phần tử duy nhất bị ảnh hưởng. Nếu sử dụng trùng lặp id, trang web có thể hoạt động không như mong đợi và gây ra lỗi.

b. Tên id phải bắt đầu bằng chữ cái hoặc dấu gạch dưới

Tên id phải tuân theo một số quy tắc cú pháp cơ bản:

• Bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_).
• Chỉ chứa các ký tự chữ cái, số, dấu gạch ngang (-), hoặc dấu gạch dưới (_).
• Không chứa dấu cách.

Ví dụ hợp lệ:

<div id="header-container">...</div>

Ví dụ không hợp lệ:

<div id="123header">...</div> <!-- id không nên bắt đầu bằng số -->
<div id="header container">...</div> <!-- id không nên chứa khoảng trắng -->

c. Không lạm dụng thuộc tính id

Mặc dù thuộc tính id rất hữu ích, nhưng bạn nên sử dụng nó một cách tiết kiệm và chỉ khi cần thiết. Nếu bạn có nhiều phần tử cần chia sẻ cùng một kiểu dáng hoặc hành vi, hãy sử dụng thuộc tính class thay vì id. Điều này giúp mã nguồn dễ bảo trì hơn và tránh xung đột trong việc áp dụng CSS hoặc JavaScript.

• Xem thêm bài viết về Hướng dẫn đặt tên Class, ID trong HTML chuẩn và hiệu quả

5. Các ví dụ về sử dụng thuộc tính id

Ví dụ 1: Định dạng phần tử với id

<style>
#main-title {
  font-size: 36px;
  color: navy;
}

#intro {
  font-style: italic;
  color: gray;
}
</style>
<h1 id="main-title">Tiêu đề chính</h1>
<p id="intro">Đây là đoạn văn giới thiệu được định dạng riêng biệt.</p>

Ví dụ 2: Tương tác với JavaScript qua id

<h2 id="section-title">Tiêu đề phần 1</h2>
<button onclick="changeTitle()">Thay đổi tiêu đề</button>
<script>
function changeTitle() {
  document.getElementById("section-title").innerHTML = "Tiêu đề đã được thay đổi!";
}
</script>

Khi người dùng nhấn nút, tiêu đề của phần sẽ thay đổi.

Ví dụ 3: Tạo liên kết nội trang với id

<a href="#contact">Đi đến phần liên hệ</a>
<p id="contact">Đây là phần liên hệ của trang web.</p>

Khi người dùng nhấp vào liên kết "Đi đến phần liên hệ", trình duyệt sẽ cuộn xuống phần tử có id="contact".

6. Mẹo và lưu ý khi sử dụng id

a. Sử dụng id một cách có tổ chức

Hãy đặt tên id một cách có tổ chức và dễ hiểu, sao cho khi nhìn vào mã nguồn, bạn có thể dễ dàng nhận biết vai trò của phần tử. Ví dụ, sử dụng tên như header-logo thay vì logo123 để đảm bảo tính dễ đọc và dễ bảo trì của mã.

b. Tránh sử dụng id khi không cần thiết

Thuộc tính id nên được sử dụng khi bạn cần xác định một phần tử duy nhất để áp dụng CSS hoặc tương tác với JavaScript. Nếu bạn cần định dạng nhiều phần tử cùng một kiểu, hãy sử dụng thuộc tính class thay vì id để tránh xung đột.

c. Tối ưu SEO bằng cách sử dụng id cho các phần nội dung chính

Việc sử dụng id để tạo các liên kết nội trang (anchor) có thể giúp tăng cường trải nghiệm người dùng và làm cho trang web của bạn dễ điều hướng hơn. Điều này có thể hỗ trợ SEO bằng cách giữ người dùng ở lại trang lâu hơn và cải thiện khả năng truy cập của trang web.

7. So sánh id và class

8. Kết luận

Thuộc tính id trong HTML là một công cụ mạnh mẽ để xác định duy nhất các phần tử, giúp bạn dễ dàng áp dụng CSS, thực thi JavaScript và tạo các liên kết nội trang. Tuy nhiên, để tránh nhầm lẫn và mã nguồn trở nên khó quản lý, bạn nên sử dụng id một cách có tổ chức và kết hợp với thuộc tính class khi cần áp dụng kiểu dáng hoặc hành vi cho nhiều phần tử.

Hy vọng rằng qua bài viết này, bạn đã hiểu rõ về cách sử dụng thuộc tính id trong HTML và cách áp dụng nó vào các dự án web của bạn trên CodeTutHub.