Thuộc tính của phần tử HTML (Thuộc tính HTML) | Series HTML & CSS Căn bản | Bài 3

Khái niệm & vai trò của thuộc tính HTML

Thuộc tính HTML (HTML Attribute) là gì?

Như đã tìm hiểu ở bài giảng trước đó, thuộc tính HTML (HTML Attribute) là một thành phần cơ bản trong cú pháp của ngôn ngữ HTML, hay cụ thể hơn là thành phần cơ bản trong cấu tạo của 1 phần tử HTML (HTML Element), có tác dụng bổ sung thêm những thông tin cho phần tử HTML đó.

Đối với đa số trường hợp, thuộc tính HTML không bắt buộc phải xuất hiện trong phần tử HTML, nhưng trong một số trường hợp nhất định thuộc tính HTML bắt buộc phải có mặt.

Ví dụ về những phần tử bắt buộc phải có thuộc tính HTML.

<meta name="description" content="Tìm hiểu về thuộc tính HTML"/>

<link rel="stylesheet" type="text/css" href="/styles.css"/>

Các phần tử HTML trên sẽ mất đi ý nghĩa và công dụng của nó nếu thiếu những thuộc tính bên trong.

Thuộc tính HTML (HTML Attribute) đóng vai trò như thế nào trong HTML?

Như đã trình bày trên khái niệm, thuộc tính HTML có tác dụng bổ sung thêm thông tin cho phần tử HTML. Nhưng liệu vai trò và ý nghĩa của nó chỉ dừng lại ở đây?

Câu trả lời tất nhiên là không. Thuộc tính HTML có những vai trò và ý nghĩa to lớn hơn thế rất nhiều, cụ thể sau đây:

1. Thuộc tính HTML giúp các phần tử HTML có thể hoạt động đúng chức năng của nó. Ví dụ các phần tử Link (liên kết) sẽ luôn cần thuộc tính href để có thể hoạt động như một liên kết đến một trang hay website khác, hay phần tử Iframe sẽ luôn cần thuộc tính src để có thể hiển thị nội dung của 1 trang web khác.
2. Thuộc tính HTML giúp tăng khả năng phân biệt của các phần tử HTML trong 1 trang (văn bản) HTML. Trong thực tế, 1 văn bản HTML có thể chứa rất nhiều phần tử HTML cùng loại, chẳn hạn như 20 phần tử Paragraph (đoạn văn) hay 30 phần tử Button (nút) tồn tại chung 1 trang HTML. Và vấn đề đặt ra là làm thế nào để phân biệt chúng? Câu trả lời chính là nhờ vào thuộc tính HTML.
3. Thuộc tính HTML là cầu nối giữa HTML và CSS. Ngôn ngữ CSS cần rất nhiều sự hỗ trợ của thuộc tính HTML, trong đó chủ yếu là thuộc tính style, class và id để có thể phát huy công dụng của nó.
4. Thuộc tính HTML là cầu nối giữa HTML và Javascript. Cũng giống như CSS, nếu một trang HTML có sự tham gia của ngôn ngữ kịch bản Javascript, chắc chắn không thể thiếu sự hỗ trợ của thuộc tính HTML.

>> Tham Khảo : Giới thiệu về Series HTML & CSS Căn bản | Bài mở đầu

Cú pháp của thuộc tính HTML

Cú pháp của thuộc tính HTML bao gồm các thành phần chính nào?

Thuộc tính HTML chỉ vỏn vẹn bao gồm 2 thành phần chính:

• Tên thuộc tính (Attribute): Đóng vai trò quy định kiểu, loại và chức năng của thuộc tính.
• Giá trị thuộc tính (Attribute value): Đóng vai trò thể hiện giá trị thông tin tương ứng với tên thuộc tính.

Mô hình cú pháp của thuộc tính như sau:

Ví dụ:

<a href="https://google.com">Google</a>

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 https://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 id

Thuộ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ụ:

...
<p id="paragraph-1">Đây là đoạn văn thứ nhất.</p>
<p id="paragraph-2">Đây là đoạn văn thứ hai.</p>
<p id="paragraph-3">Đây là đoạn văn thứ ba.</p>
<p>Đây là đoạn văn thứ tư.</p>
...

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

....
<p class="group-1">Đây là đoạn văn thứ nhất</p>
<p class="group-1">Đây là đoạn văn thứ hai</p>
<p class="group-2">Đây là đoạn văn thứ ba</p>
<p>Đây là đoạn văn thứ tư</p>
....

Lưu ý:

Một phần tử HTML có thể vừa chứa thuộc tính class lẫn id. Ví dụ <p id="paragraph-1" class="group-1">Đây là đoạn văn thứ nhất.</p>

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ụ <p class="group-1 group-2">Đây là đoạn văn thứ năm</p> – Trong ví dụ này phần tử thẻ p vừa mang giá trị class group-1 lẫn group-2.