Thuộc tính alt của thẻ HTML <img>
Định nghĩa và cách sử dụng
alt Thuộc tính này là một thuộc tính bắt buộc, nó quy định văn bản thay thế khi hình ảnh không thể hiển thị.
Giả sử người dùng không thể xem hình ảnh do các nguyên nhân sau, thuộc tính alt có thể cung cấp thông tin thay thế cho hình ảnh:
- Mạng chậm
- Lỗi trong thuộc tính src
- Trình duyệt tắt hình ảnh
- Người dùng sử dụng là người đọc màn hình
Thuộc tính alt của thẻ <img> xác định văn bản thay thế, được sử dụng để thay thế cho hình ảnh trong trình duyệt khi hình ảnh không thể hiển thị hoặc khi người dùng tắt chức năng hiển thị hình ảnh.
Chúng tôi rất khuyến nghị bạn sử dụng thuộc tính này cho mỗi hình ảnh trong tài liệu. Như vậy, ngay cả khi hình ảnh không thể hiển thị, người dùng vẫn có thể thấy một số thông tin về điều gì đã bị mất. Và đối với người khuyết tật, thuộc tính alt thường là cách duy nhất họ có thể hiểu nội dung của hình ảnh.
Lưu ý:Để tạo chú thích cho hình ảnh, hãy sử dụng Thuộc tính title!
Chú thích và ghi chú
Ghi chú:alt Giá trị thuộc tính là một chuỗi ký tự có thể chứa tối đa 1024 ký tự, bao gồm cả khoảng trống và dấu phẩy. Chuỗi này phải được bao quanh bởi dấu ngoặc kép. Văn bản alt này có thể chứa các tham chiếu đối tượng cho ký tự đặc biệt, nhưng không được phép chứa các loại标记 khác, đặc biệt là không được phép có bất kỳ thẻ樣式 nào.
Ghi chú:Khi người dùng di chuột đến phần tử img, Internet Explorer sẽ hiển thị giá trị thuộc tính alt. Hành vi này không đúng. Các trình duyệt khác đang theo xu hướng quy chuẩn, chỉ hiển thị văn bản thay thế khi hình ảnh không thể hiển thị.
Lưu ý:Nếu cần tạo chú thích cho hình ảnh, hãy sử dụng Thuộc tính title。
Mô hình
Ví dụ 1
<img src="/i/eg_tulip.jpg" alt="Thị trấn hoa tươi Thượng Hải - Tulp" />
Nếu không thể hiển thị hình ảnh, trình duyệt sẽ hiển thị văn bản thay thế, giống như vậy:
Ngoài ra, khi người dùng di chuột lên hình ảnh, trình duyệt mới nhất sẽ hiển thị văn bản mô tả trong một hộp văn bản. Mã dưới đây thêm văn bản mô tả vào thuộc tính alt của hình ảnh: }}
Bạn có thể di chuột qua hình ảnh dưới đây để xem hiệu ứng tương ứng:
Chữ trong dấu tròn đỏ là hiệu ứng hiển thị khi người dùng di chuột qua hình ảnh trên trình duyệt IE7:
Ví dụ 2
Hình ảnh đã chỉ định văn bản thay thế:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Cú pháp
<img alt="text">
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| text |
Định nghĩa văn bản thay thế cho hình ảnh. Nguyên tắc sử dụng văn bản alt:
|
Hỗ trợ trình duyệt
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |
