Một thuộc tính được sử dụng để xác định các đặc điểm của phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần –name và value
+ Name là thuộc tính bạn muốn đặt.
Ví dụ: phần tử đoạn văn trong <p> ví dụ mang một thuộc tính có tên là align, mà bạn có thể sử dụng để chỉ ra sự căn chỉnh của đoạn văn trên trang.
+ Value là những gì bạn muốn giá value của thuộc tính được đặt và luôn được đặt trong các trích dẫn. Ví dụ dưới đây cho thấy ba giá trị có thể có của thuộc tính align:left, center và right.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = “left”>This is left aligned</p>
<p align = “center”>This is center aligned</p>
<p align = “right”>This is right aligned</p>
</body>
</html>
Kết quả
This is left aligned
This is center aligned
This is right aligned
1. Core Attributes – Thuộc tính chủ yếu
Bốn thuộc tính cốt lõi có thể được sử dụng trên phần lớn các phần tử HTML (mặc dù không phải tất cả) là
1.1. Id Attribute – Thuộc tính id
Thuộc tính id của thẻ HTML có thể được sử dụng để xác định duy nhất bất kỳ phần tử nào trong trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử
- Nếu một phần tử mang thuộc tính id làm mã định danh duy nhất, bạn có thể chỉ xác định phần tử đó và nội dung của phần tử đó.
- Nếu bạn có hai phần tử cùng tên trong một trang Web (hoặc biểu định kiểu), bạn có thể sử dụng thuộc tính id để phân biệt giữa các phần tử có cùng tên.
Ví dụ
<p id = “html”>This para explains what is HTML</p>
<p id = “css”>This para explains what is Cascading Style Sheet</p>
1.2. The title Attribute – Thuộc tính title
Thuộc tính title cung cấp một tiêu đề được gợi ý cho phần tử . Cú pháp của chúng cho thuộc tính title tương tự như được giải thích cho thuộc tính id
Hành vi của thuộc tính này sẽ phụ thuộc vào phần tử mang nó, mặc dù nó thường được hiển thị dưới dạng chú giải công cụ khi con trỏ đi qua phần tử hoặc trong khi phần tử đang tải.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = “Hello HTML!”>Titled Heading Tag Example</h3>
</body>
</html>
Kết quả
Titled Heading Tag Example
Bây giờ hãy thử đưa con trỏ của bạn qua “Titled Heading Tag Example” và bạn sẽ thấy rằng bất kỳ tiêu đề nào bạn đã sử dụng trong mã của mình đều xuất hiện dưới dạng chú giải công cụ của con trỏ. Với ví dục trên, sẽ hiện lên chữ “Hello HTML!“
1.3. The class Attribute – Thuộc tính class
Thuộc tính class được sử dụng để liên kết một phần tử với một biểu định kiểu và chỉ định lớp phần tử. Khi bạn học Cascading Style Sheet (CSS), chúng ta sẽ tìm hiểu thêm về việc sử dụng thuộc tính class
Giá trị của thuộc tính cũng có thể là một danh sách tên lớp được phân tách bằng dấu cách.
Ví dụ
class = “className1 className2 className3”
1.4. The style Attribute -Thuộc tính style
Thuộc tính style cho phép bạn chỉ định các quy tắc Cascading Style Sheet (CSS) trong phần tử.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = “font-family:arial; color:#FF0000;”>Some text…</p>
</body>
</html>
Kết quả:
Some text…