Cách thêm văn bản thay thế (alt) khi hình ảnh không hiển thị được trong HTML?

Sử dụng thuộc tính alt trên thẻ <img> để cung cấp văn bản mô tả thay thế khi hình ảnh không tải được. Thuộc tính này bắt buộc cho truy cập (accessibility) và SEO.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>Thuộc tính alt trong HTML</title>
  </head>
  <body>
    <p>Chèn hình ảnh đơn giản</p>
    <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="Thư viện Tutorials" />
  </body>
</html>

Tầm quan trọng của alt

• Truy cập: Đọc màn hình (screen reader) đọc alt cho người khiếm thị.
• SEO: Google dùng alt để hiểu nội dung hình ảnh.
• Thay thế: Hiển thị khi hình ảnh lỗi hoặc tải chậm.

Mẹo viết alt tốt

• Mô tả ngắn gọn, chính xác nội dung và chức năng hình ảnh.
• Tránh "hình ảnh của...", "bức ảnh..." — đi thẳng vào nội dung.
• Hình ảnh trang trí (không truyền thông tin): dùng alt="" (rỗng) để đọc màn hình bỏ qua.