Thuộc tính alt trong thẻ img

Thuộc tính alt (hoặc alt text) trong thẻ <img> là một thuộc tính quan trọng trong HTML, dùng để cung cấp mô tả ngắn gọn về nội dung của hình ảnh. Đây là cách để trình duyệt hoặc các công cụ hỗ trợ như trình đọc màn hình (cho người khiếm thị) hiểu được hình ảnh đang nói về điều gì khi không thể nhìn thấy hoặc tải được nó. Dưới đây là chi tiết về thuộc tính alt:

1. Cú pháp của thuộc tính alt

<img src="path/to/image.jpg" alt="Mô tả hình ảnh">

Trong ví dụ trên:

• src: Đường dẫn đến ảnh.
• alt: Cung cấp mô tả ngắn gọn về ảnh.

2. Lợi ích của thuộc tính alt

• Truy cập cho người khiếm thị: Công cụ đọc màn hình sử dụng thuộc tính alt để đọc mô tả của hình ảnh cho người dùng không thể nhìn thấy, giúp họ hiểu được nội dung mà ảnh truyền tải.
• Khi hình ảnh không tải được: Nếu vì lý do nào đó hình ảnh không thể tải, thuộc tính alt sẽ hiện lên như một thay thế. Điều này giúp tránh “hình ảnh trống” và cải thiện trải nghiệm người dùng.
• SEO (Tối ưu hóa công cụ tìm kiếm): Công cụ tìm kiếm không thể “thấy” hình ảnh như người dùng, nhưng chúng có thể hiểu được hình ảnh thông qua mô tả alt. Việc cung cấp thuộc tính alt giúp ảnh có cơ hội xuất hiện trong kết quả tìm kiếm hình ảnh, nâng cao khả năng tiếp cận cho website.

3. Các lưu ý và lỗi thường gặp khi sử dụng thuộc tính alt

3.1. Các lưu ý

• Mô tả ngắn gọn, súc tích: alt nên mô tả ngắn gọn nội dung hình ảnh, không quá dài nhưng vẫn phải đủ ý nghĩa. Ví dụ, với một hình ảnh của “con mèo nằm trên ghế”, bạn có thể đặt alt=”Mèo nằm trên ghế”.
• Không lạm dụng từ khóa: Tránh nhồi nhét từ khóa trong alt, vì điều này có thể bị Google đánh giá thấp và gây ảnh hưởng xấu đến SEO.
• Sử dụng alt cho ảnh trang trí: Đối với những ảnh chỉ để trang trí, bạn có thể để alt=”” để trình đọc màn hình bỏ qua hình ảnh này. Điều này giúp người khiếm thị không bị gián đoạn bởi các ảnh không mang nội dung hữu ích.

3.2. Một số lỗi thường gặp khi sử dụng thẻ alt

• Để trống: Nhiều người thường bỏ qua việc viết alt text hoặc để trống thuộc tính này.
• Mô tả chung chung: Alt text quá chung chung, không cung cấp thông tin hữu ích.
• Lặp lại tiêu đề: Alt text chỉ đơn giản lặp lại tiêu đề của trang.
• Sử dụng từ khóa quá nhiều: Nhồi nhét từ khóa một cách không tự nhiên.

4. Ví dụ về cách sử dụng thuộc tính alt

Dưới đây là một số ví dụ về cách sử dụng thuộc tính alt:

Ví dụ 1: Hình ảnh có nội dung cụ thể

<img src="img.jpg" alt="Đi dạo trong công viên">

Ví dụ 2: Hình ảnh trang trí (chỉ dùng cho trình bày)

<img src="border.jpg" alt="">

Ví dụ 3: Hình ảnh logo của công ty

<img src="logo.png" alt="Logo Công ty ViNguyen">

5. Các công cụ hỗ trợ

• WordPress: Các plugin SEO như Yoast SEO, RankMath giúp bạn dễ dàng thêm và quản lý alt text.
• Các phần mềm chỉnh sửa ảnh: Phần lớn các phần mềm chỉnh sửa ảnh hiện nay đều cho phép chúng ta thêm alt text vào hình ảnh trước khi tải lên website.

Tóm lại, thuộc tính alt trong thẻ <img> là yếu tố không thể thiếu khi xây dựng các website có khả năng truy cập tốt và thân thiện với SEO. Hãy luôn đặt thuộc tính alt cho tất cả các ảnh trên trang web để đảm bảo mọi người dùng đều có thể hiểu được nội dung bạn muốn truyền tải, dù họ có thể nhìn thấy hình ảnh hay không.

Hy vọng qua bài viết này mọi người sẽ có thông tin hữu ích và hiểu rõ hơn về thuộc tính alt trong thẻ <img> của HTML.

P.A Việt Nam cung cấp đa dạng các Plan Hosting đáp ứng yêu cầu của khách hàng
Hosting Phổ Thông
Hosting Chất Lượng Cao
Hosting WordPress

Tham khảo các ưu đãi: https://www.pavietnam.vn/vn/tin-khuyen-mai/