Thuộc tính trong HTML
Thuộc tính cung cấp thông tin bổ sung về các phần tử trong HTML. Thuộc tính trong HTML Tất cả các phần tử HTML có thể có thuộc tính. Thuộc tính cung cấp thông tin bổ sung về một phần tử. Thuộc tính luôn được chỉ định trong thẻ bắt đầu. Thuộc tính thường ...
Thuộc tính cung cấp thông tin bổ sung về các phần tử trong HTML.
Thuộc tính trong HTML
- Tất cả các phần tử HTML có thể có thuộc tính.
- Thuộc tính cung cấp thông tin bổ sung về một phần tử.
- Thuộc tính luôn được chỉ định trong thẻ bắt đầu.
- Thuộc tính thường đi kèm trong cặp tên / giá trị như: name = “value”
Thuộc tính lang
Ngôn ngữ trong tài liệu có thể được khai báo trong thẻ <html>.
Ngôn ngữ được khai báo với thuộc tính lang.
Việc khai báo một ngôn ngữ rất quan trọng đối với các ứng dụng khả năng truy cập (trình đọc màn hình) và công cụ tìm kiếm:
<!DOCTYPE html>
<html lang=”en-US”>
<body>…</body>
</html>
Hai chữ cái đầu tiên chỉ định ngôn ngữ (en). Nếu có một phương ngữ, hãy sử dụng thêm hai chữ cái (US).
Thuộc tính Tiêu đề
Ở đây, một thuộc tính tiêu đề được thêm vào phần tử <p>. Giá trị của thuộc tính tiêu đề sẽ được hiển thị như một chú thích khi bạn di chuột qua đoạn văn:
Ví dụ
<p title=”Đây là chú thích”>
This is a paragraph.
</p>
Thuộc tính href
Liên kết trong HTML được định nghĩa bằng thẻ <a>. Địa chỉ liên kết được chỉ định bằng thuộc tính href:
<a href=”http://demo.pveser.com/”>This is a link</a>
Trong bài viết này, bạn sẽ được tìm hiểu thêm về liên kết và thẻ <a> trong HTML.
Thuộc tính kích thước
Hình ảnh trong HTML được định nghĩa bằng thẻ <img>.
Tên file ảnh (src) và kích thước của hình ảnh (chiều rộng và chiều cao) được cung cấp dưới dạng các thuộc tính:
<img src=”anhmau.jpg” awidth=”104″ height=”142″>
Kích thước hình ảnh được xác định bằng pixel: awidth = “104” có nghĩa là 104 pixel chiều rộng.
Thuộc tính alt
Thuộc tính alt xác định một văn bản thay thế sẽ được sử dụng, khi một hình ảnh không thể được hiển thị. Giá trị này của thuộc tính dùng cho các công cụ tìm kiếm đọc phần hình ảnh trong HTML.
Ví dụ:
<img src=”anhmau.jpg” alt=”fedu” awidth=”104″ height=”142″>
Sử dụng thuộc tính (viết thường)
Tiêu chuẩn HTML5 không yêu cầu tên thuộc tính chữ thường.
Thuộc tính tiêu đề có thể được viết bằng chữ hoa hoặc chữ thường như tiêu đề hoặc TIÊU ĐỀ.
W3schools đề xuất chữ thường trong HTML và yêu cầu chữ thường cho các loại tài liệu chặt chẽ hơn như XHTML.
Trích dẫn các giá trị thuộc tính
Tiêu chuẩn HTML5 không yêu cầu trích dẫn xung quanh giá trị thuộc tính.
Thuộc tính href được minh họa ở trên có thể được viết như sau:
<a href=http://demo.pveser.com/>
W3C đề xuất trích dẫn trong HTML và yêu cầu trích dẫn các loại tài liệu chặt chẽ hơn như XHTML.
Đôi khi bạn cần phải dùng dấu ngoặc kép. Ví dụ này sẽ không hiển thị đúng thuộc tính tiêu đề vì chứa một khoảng trống:
<p title=Fedu Demo>
Vì thế bạn nên sử dụng dấu ngoặc kép quanh các giá trị thuộc tính.
Dấu ngoặc đơn hay dấu ngoặc kép
Dấu ngoặc kép giữa giá trị thuộc tính là phổ biến nhất trong HTML, nhưng dấu ngoặc đơn cũng có thể được sử dụng.
Trong một số trường hợp, khi giá trị thuộc tính chứa dấu ngoặc kép, cần phải dùng dấu ngoặc đơn:
<p title=’John “ShotGun” Nelson’>
Hoặc ngược lại:
<p title=”John ‘ShotGun’ Nelson”>
Tổng kết
- Tất cả các phần tử HTML có thể có thuộc tính.
- Thuộc tính title cung cấp thêm thông tin bổ sung.
- Thuộc tính href cung cấp thông tin địa chỉ cho các liên kết.
- Thuộc tính awidth và height cung cấp thông tin kích thước cho hình ảnh.
- Thuộc tính alt cung cấp văn bản cho trình đọc màn hình.
- Bạn nên sử dụng các tên thuộc tính chữ thường.
- Bạn nên trích dẫn các giá trị thuộc tính với dấu ngoặc kép.
Các thuộc tính trong HTML
| Thuộc tính | Mô tả |
|---|---|
| alt | chỉ định một văn bản thay thế cho một hình ảnh, khi hình ảnh không thể được hiển thị |
| disabled | chỉ định rằng một phần tử đầu vào phải được vô hiệu hóa |
| href | chỉ định URL (địa chỉ web) cho một liên kết |
| id | chỉ định một id duy nhất cho một phần tử |
| src | chỉ định URL (địa chỉ web) cho một hình ảnh |
| style | chỉ định kiểu CSS cho một phần tử |
| title | chỉ định thêm thông tin về một phần tử (được hiển thị như chú thích) |
- Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
- Học lập trình Frontend nâng cao qua project thực tế
