HTML IDs: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của HTML IDs. Đừng lo lắng nếu bạn mới bắt đầu; chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ trở thành một chuyên gia về ID! Hãy bắt đầu nào!

HTML - IDs

HTML ID là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu HTML ID thực sự là gì. Hãy tưởng tượng ID như một thẻ tên duy nhất cho một phần tử HTML. Cũng như bạn có một tên duy nhất để nhận diện bạn, ID nhận diện duy nhất một phần tử HTML trên trang.

Cú pháp cho ID

Bây giờ, hãy xem chúng ta sử dụng ID trong HTML như thế nào. Cú pháp rất đơn giản:

<element id="uniqueName">Nội dung ở đây</element>

Ở đây, element có thể là bất kỳ thẻ HTML nào như <div>, <p>, <span>, v.v., và uniqueName là identifer duy nhất bạn gán cho nó.

Ví dụ:

<p id="intro">Chào mừng đến với trang web của tôi!</p>

Trong ví dụ này, chúng ta đã gán ID "intro" cho đoạn văn bản.

Sử dụng thuộc tính ID của HTML

Bây giờ chúng ta đã biết cách thêm ID, hãy xem chúng ta có thể sử dụng nó như thế nào. ID rất hữu ích vì nhiều lý do:

Styling với CSS: Bạn có thể sử dụng ID để áp dụng các style cụ thể cho một phần tử.
Thao tác JavaScript: ID giúp dễ dàng chọn và thao tác các phần tử với JavaScript.
Tạo anchor: Bạn có thể sử dụng ID để tạo các liên kết anchor trong một trang.

Hãy xem một số ví dụ:

1. Styling với CSS

<style>
#special-heading {
color: blue;
font-size: 24px;
}
</style>

<h2 id="special-heading">This heading is special!</h2>

Trong ví dụ này, chúng ta đã sử dụng CSS để style tiêu đề với ID "special-heading". Nó sẽ hiển thị màu xanh lam và lớn hơn văn bản bình thường.

2. Thao tác JavaScript

<button id="myButton">Nhấn vào tôi!</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
}
</script>

Ở đây, chúng ta đã sử dụng JavaScript để thêm sự kiện nhấp vào nút với ID "myButton". Khi nhấp vào, nó sẽ hiển thị một thông báo.

3. Tạo anchor

<h2 id="section1">Section 1</h2>
<p>Some content here...</p>

<a href="#section1">Nhảy đến Section 1</a>

Trong ví dụ này, nhấp vào liên kết sẽ cuộn trang đến phần tử có ID "section1".

Sự khác biệt giữa ID và Class trong HTML

Bây giờ, bạn có thể đang tự hỏi, "ID và class có gì khác nhau?" Câu hỏi tuyệt vời! Hãy cùng phân tích:

Tính năng	ID	Class
Độc nhất	Phải duy nhất trên trang	Có thể sử dụng nhiều lần
Selector CSS	Sử dụng # (ví dụ: #myID)	Sử dụng . (ví dụ: .myClass)
Chọn phần tử JavaScript	getElementById()	getElementsByClassName()
Sử dụng	Cho phần tử duy nhất	Cho nhóm phần tử tương tự

Nhớ rằng, ID giống như số an sinh xã hội của bạn - duy nhất với bạn. Class giống như màu tóc của bạn - nhiều người có thể chia sẻ cùng một màu!

Những điều cần nhớ về ID

Độc nhất: ID phải duy nhất trong một trang. Không có hai phần tử nào nên có cùng một ID.
Phân biệt chữ cái: ID phân biệt chữ cái. "myID" và "myid" được coi là khác nhau.
Ký tự bắt đầu: ID không thể bắt đầu bằng số. Nó phải bắt đầu bằng một chữ cái.
Không có khoảng trống: ID không thể chứa khoảng trống.

Mẫu thuộc tính ID hợp lệ

Khi đặt tên cho ID của bạn, hãy tuân theo các quy tắc này để đảm bảo chúng hợp lệ:

Bắt đầu bằng một chữ cái (A-Z hoặc a-z)
Có thể tiếp tục bằng:

Chữ cái (A-Za-z)
Số (0-9)
Dấu gạch ngang (-)
Dấu gạch dưới (_)
Dấu hai chấm (:)
Dấu chấm (.)

Dưới đây là bảng các ví dụ hợp lệ và không hợp lệ:

ID hợp lệ	ID không hợp lệ
my-heading	2fast2furious
section_1	my heading
intro:para	my#heading
footer.copyright	my@heading

Kết luận

Và thế là bạn đã có kiến thức về thế giới của HTML IDs. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngại thử nghiệm với ID trong các dự án HTML của bạn. Chúng là một công cụ mạnh mẽ có thể làm cho hành trình phát triển web của bạn trở nên mượt mà hơn.

Trước khi để bạn đi, đây là một câu đùa nhỏ cho các nhà phát triển web: Tại sao các lập trình viên thích chế độ tối? Vì ánh sáng thu hút sâu bọ! ?

Chúc các bạn viết mã vui vẻ, và mong ID của bạn luôn duy nhất!

Credits: Image by storyset