Thuộc tính cung cấp thông tin bổ sung cho phần tử: đường dẫn của liên kết, nguồn của ảnh, kích thước, ngôn ngữ, chú thích... Bài này giới thiệu cú pháp và các thuộc tính phổ biến.
Bạn sẽ học được
- Viết thuộc tính đúng cú pháp
- Dùng href, src, alt, width, height
- Dùng title, lang, style
- Hiểu thuộc tính boolean
Thuật ngữ cần biết
- Thuộc tính
- Cặp tên="giá trị" đặt trong thẻ mở.
- Thuộc tính toàn cục
- Dùng được cho mọi phần tử: id, class, style, title, lang.
- Thuộc tính boolean
- Chỉ cần có mặt là bật: disabled, checked.
Khái niệm và lý thuyết
Thuộc tính luôn đặt trong thẻ mở, dạng ten="gia-tri". Một phần tử có thể có nhiều thuộc tính, cách nhau bằng dấu cách. Nên luôn đặt giá trị trong dấu nháy kép.
| Thuộc tính | Dùng với | Ý nghĩa |
|---|---|---|
| href | a | Địa chỉ liên kết |
| src | img, script, iframe | Đường dẫn tài nguyên |
| alt | img | Văn bản thay thế ảnh |
| width, height | img, video | Kích thước (px) |
| title | mọi phần tử | Chú thích hiện khi rê chuột |
| lang | html | Ngôn ngữ trang |
| style | mọi phần tử | CSS nội tuyến |
href và title
<a href="https://tuhoctin.net" title="Trang học tin học miễn phí">Tự Học Tin</a>
<p title="Bạn vừa rê chuột vào đoạn văn">Rê chuột vào đây để xem chú thích.</p>Kết quả hiển thị
Tự Học Tin
Rê chuột vào đây để xem chú thích.
src, alt, width, height
<img src="https://picsum.photos/seed/html/200/100" alt="Ảnh minh họa" width="200" height="100">
<img src="/anh-khong-ton-tai.jpg" alt="Ảnh lỗi nên hiện chữ thay thế" width="200">Kết quả hiển thị
Ảnh thứ hai không tồn tại nên trình duyệt hiện nội dung alt. Thuộc tính alt cũng giúp người khiếm thị (trình đọc màn hình) và công cụ tìm kiếm hiểu ảnh.
style và thuộc tính boolean
<p style="color: green; font-size: 18px;">Chữ xanh cỡ 18px</p>
<button disabled>Nút bị vô hiệu</button>
<input type="checkbox" checked> Đã chọn sẵnKết quả hiển thị
Chữ xanh cỡ 18px
Đã chọn sẵnMẹo hay
Khai báo width và height cho ảnh giúp trang không bị “nhảy” bố cục khi ảnh tải xong.
Lưu ý
Đừng lạm dụng style nội tuyến; định dạng nên viết trong CSS riêng (bài HTML - Dùng CSS).
Thực hành
- Tạo liên kết có title đến website trường bạn.
- Chèn 3 ảnh có alt mô tả đúng nội dung.
- Đổi màu một đoạn văn bằng style.
- Đặt lang="vi" cho thẻ html của trang.
Tóm tắt bài học
- Thuộc tính đặt trong thẻ mở, dạng ten="gia-tri".
- href, src, alt, width, height dùng nhiều nhất.
- title, lang, style, id, class là thuộc tính toàn cục.
- Thuộc tính boolean chỉ cần ghi tên.