Thẻ img trong html

Các thuộc tính quan trọng của thẻ img

• src (source):
  • Đây là thuộc tính bắt buộc.
  • Dùng để xác định đường dẫn của hình ảnh mà bạn muốn hiển thị.
  • Ví dụ: <img src="path/to/image.jpg" />.
• alt (alternative text):
  • Là văn bản thay thế cho hình ảnh nếu hình ảnh không hiển thị được (do lỗi tải trang hoặc do trình duyệt không hỗ trợ).
  • Cũng giúp cải thiện khả năng truy cập web, đặc biệt cho người khiếm thị sử dụng trình đọc màn hình.
  • Có lợi cho SEO (tối ưu hóa công cụ tìm kiếm) vì công cụ tìm kiếm có thể đọc nội dung văn bản này để hiểu hình ảnh.
  • Ví dụ: <img src="image.jpg" alt="Mô tả hình ảnh" />.
• title:
  • Dùng để cung cấp thông tin bổ sung về hình ảnh.
  • Khi người dùng di chuột vào hình ảnh, một tooltip sẽ hiện ra với nội dung của thuộc tính title.
  • Không phải thuộc tính bắt buộc.
  • Ví dụ: <img src="image.jpg" alt="Mô tả hình ảnh" title="Thông tin bổ sung về hình ảnh" />.
• width và height:
  • Xác định chiều rộng và chiều cao của hình ảnh.
  • Đơn vị mặc định là pixel nếu không chỉ định đơn vị khác.
  • Ví dụ: <img src="image.jpg" width="300" height="200" />.
• loading:
  • Thuộc tính này điều khiển việc tải hình ảnh:
    • lazy: Trì hoãn việc tải hình ảnh cho đến khi nó xuất hiện trên màn hình (khi cuộn trang).
    • eager: Hình ảnh sẽ được tải ngay lập tức.
  • Giúp tối ưu hóa hiệu suất của trang web.
  • Ví dụ: <img src="image.jpg" loading="lazy" />.
• srcset và sizes:
  • srcset: Xác định danh sách các hình ảnh khác nhau với các độ phân giải khác nhau, giúp trình duyệt chọn hình ảnh phù hợp nhất với màn hình người dùng.
  • sizes: Xác định cách mỗi hình ảnh trong srcset sẽ được sử dụng trong các điều kiện kích thước màn hình khác nhau.
  • Ví dụ:

Các thuộc tính khác của thẻ img

• usemap: Liên kết hình ảnh với một bản đồ hình ảnh (image map) để tạo vùng nhấp chuột tương tác.
• ismap: Chỉ định hình ảnh là một bản đồ hình ảnh server-side.
• decoding: Chỉ định cách hình ảnh sẽ được giải mã (async, sync, hoặc auto).

Ghi chú dưới bức ảnh trong bài viết

• Ghi chú dưới bức ảnh thường được viết bằng thẻ <figcaption> và bọc cả ảnh và chú thích trong thẻ <figure>.

Ví dụ:

Thẻ <figure> giúp nhóm các thành phần liên quan như ảnh và chú thích, còn thẻ <figcaption> chứa ghi chú của ảnh.