Trong đó: href là tên thuộc tính, quy định chức năng chứa liên kết của phần tử thẻ a, trong khi //google.com chính là giá trị đường dẫn của liên kết đó.
Làm thế nào để xác định được đúng tên và giá trị của thuộc tính cần dùng trong tình huống thực tế?
Cũng giống như việc xác định loại thẻ cần dùng cho phần tử HTML, bạn cũng có thể sử dụng phương pháp tra cứu để xác định được đúng tên và giá trị thuộc tính trong những tình huống thực tế. Thông qua quá trình sử dụng nhiều lần, bạn sẽ có được kinh nghiệm và trí nhớ để áp dụng một cách nhanh chóng cho những tình huống khác.
Thuộc tính id và class
Ở mục cuối của bài giảng này, hoccode.org sẽ giới thiệu đến bạn 2 trong số những thuộc tính HTML cơ bản, đó là id và class.
Tại sao là id và class mà không phải những thuộc tính khác?
Nếu để chọn ra thuộc tính được sử dụng nhiều nhất, có nhiều công dụng và ý nghĩa nhất thì hoccode.org sẽ chọn id và class bởi 2 thuộc tính này vừa cung cấp khả năng phân biệt cho các phần tử HTML, vừa đóng vai trò là cầu nối giữa HTML và 2 ngôn ngữ thường được sử dụng song song là CSS và Javascript.
Và sau đây, chúng ta sẽ cùng đi chi tiết vào từng thuộc tính.
Thuộc tính idThuộc tính id được dùng trong trường hợp người lập trình cần dấu yếu tố riêng biệt và độc nhất cho một phần tử HTML bất kỳ của 1 văn bản HTML. Để dễ hình dung hơn, ta sẽ lấy một lớp học để mô hình hoá nội dung này. Giả sử lớp học đó có tổng cộng 30 bạn [tương ứng với 30 phần tử HTML], và mỗi bạn đều có một mã số học sinh [tương ứng với giá trị thuộc tính id] riêng biệt, không bạn nào trùng lập với bạn nào. Tương tự, giá trị của thuộc tính id cũng thế, có thể có nhiều phần tử mang thuộc tính id trong một văn bản, nhưng không bao giờ được phép xuất hiện 2 hoặc nhiều hơn các phần tử có cùng giá trị thuộc tính id.
Ví dụ:
...
Đây là đoạn văn thứ nhất.
Đây là đoạn văn thứ hai.
Đây là đoạn văn thứ ba.
Đây là đoạn văn thứ tư.
... Thuộc tính class
Thuộc tính class được dùng trong trường hợp người lập trình cần đánh dấu yếu tố riêng biệt cho một nhóm phần tử HTML của 1 văn bản HTML. Trở lại ví dụ lớp học trên, nếu lớp học đó được chia thành 2 tổ [Tổ 1 và Tổ 2], thì sẽ có một số lượng nhất định học sinh ở Tổ 1, số còn lại ở Tổ 2. Tương tự, trong một văn bản HTML, có thể có một hoặc nhiều phần tử HTML có cùng giá trị thuộc tính class.
Ví dụ:
....
Đây là đoạn văn thứ nhất
Đây là đoạn văn thứ hai
Đây là đoạn văn thứ ba
Đây là đoạn văn thứ tư
....
Lưu ý:
Một phần tử HTML có thể vừa chứa thuộc tính class lẫn id. Ví dụ
Đây là đoạn văn thứ nhất.
Một thuộc tính class có thể chứa cùng một lúc nhiều giá trị class, cách nhau bởi khoảng trắng. Ví dụ
Đây là đoạn văn thứ năm
- Trong ví dụ này phần tử thẻ p vừa mang giá trị class group-1 lẫn group-2.
Như vậy là chúng ta đã vừa tham khảo qua phần cuối cùng của nội dung Bài 3 trong Series HTML & CSS căn bản rồi. Qua bài giảng này ta thấy được thuộc tính [attribute] mang lại thật nhiều công dụng hữu ích cho HTML phải không nào. Nếu còn điều gì chưa rõ bạn hãy để lại comment bên dưới cho chúng tớ biết nhé. Hoặc nếu bạn cảm thấy nội dung bài giảng hay hoặc hữu ích, đừng quên để lại 1 like, share hoặc đánh giá nhé.
Chúc bạn có một ngày làm việc và học tập vui vẻ!