HTML Image Tag: Là gì và cách sử dụng đúng trong năm 2025

HTML image tag hiển thị hình ảnh trên trang web. Đây là một thẻ tự đóng (nghĩa là được cấu trúc theo cách không cần thêm thẻ đóng riêng), chứa nguồn hình ảnh và các thuộc tính khác.

Dưới đây là ví dụ về thẻ HTML hình ảnh:

<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall">

Bây giờ, hãy cùng tìm hiểu chi tiết về thẻ HTML dùng cho hình ảnh (còn gọi là thẻ <img>).

Cách sử dụng HTML Image Tag

Bạn có thể chèn thẻ <img> vào bất kỳ vị trí nào trong mã HTML nơi bạn muốn hiển thị hình ảnh, chẳng hạn như trong phần hero trên trang sản phẩm.

Thẻ này luôn có hai thuộc tính bắt buộc:

• src: Cho biết đường dẫn đến hình ảnh được hiển thị
• alt: Cho biết alternative (alt) text được hiển thị nếu hình ảnh không tải được, đồng thời hỗ trợ những người sử dụng trình đọc màn hình hoặc các công cụ chuyển văn bản thành giọng nói khác

Hình ảnh không được nhúng trực tiếp vào trang mà được tải từ đường dẫn nguồn trong thẻ.

Hình ảnh có thể lấy từ bất kỳ đâu — tức là trên cùng một máy chủ (gọi là đường dẫn tương đối) hoặc một máy chủ khác (gọi là đường dẫn tuyệt đối).

Bạn cũng có thể lồng thẻ hình ảnh bên trong các thẻ chứa khác — tức là các thẻ HTML có cả thẻ mở và thẻ đóng.

Dưới đây là ví dụ về thẻ hình ảnh được lồng bên trong một thẻ anchor liên kết đến một website khác:

<a href="https://example.com"><img src="https://example.com/cat.jpg" alt="furry white cat sitting on a wall"></a>

Thao tác này tạo một liên kết hình ảnh có thể nhấp.

Các loại thuộc tính HTML Image

Các thuộc tính HTML image dùng để chỉ định thông tin về hình ảnh. Bạn có thể dùng chúng để kiểm soát cách hình ảnh hiển thị, được tải và nhiều yếu tố khác.

Hãy cùng xem lần lượt từng thuộc tính.

Thuộc tính Src

Đây là thuộc tính quan trọng nhất. Nó chỉ định đường dẫn đến hình ảnh.

Trình duyệt không thể tìm và hiển thị hình ảnh nếu thiếu đường dẫn nguồn.

Nguồn có thể là URL tuyệt đối hoặc tương đối.

Thuộc tính Alt

Thuộc tính này dùng để thêm alternative text cho hình ảnh — phần mô tả hình ảnh bằng văn bản.

Trình duyệt hiển thị văn bản này khi hình ảnh không tải được hoặc không tìm thấy, chẳng hạn khi người dùng có kết nối internet chậm.

Và hình ảnh sẽ hiển thị như sau trên trang web:

Alt Text cũng giúp người khiếm thị và những người thích nghe nội dung thay vì đọc tiếp cận hình ảnh. Trình đọc màn hình và các công cụ chuyển văn bản thành giọng nói khác sử dụng Alt Text để mô tả hình ảnh.

Đây cũng là một thuộc tính quan trọng xét từ góc độ SEO.

Vì sao?

Alt Text có thể giúp các công cụ tìm kiếm như Google hiểu nội dung của bạn tốt hơn, từ đó cải thiện thứ hạng. Thuộc tính này cũng đặc biệt hữu ích trong việc giúp hình ảnh của bạn xuất hiện trong kết quả tìm kiếm hình ảnh, nhất là khi bạn đưa vào các keyword phù hợp.

Thuộc tính Title

Thuộc tính này dùng để đặt tiêu đề cho hình ảnh, nhằm cung cấp thêm ngữ cảnh về hình ảnh.

Thuộc tính title hiển thị dưới dạng tooltip — một thành phần cung cấp thông tin về hình ảnh khi bạn di con trỏ chuột lên đó.

Tooltip trông như sau:

Thuộc tính Longdesc

Thuộc tính này dùng để liên kết đến một trang web có mô tả chi tiết về hình ảnh. Điều này có thể hữu ích với những hình ảnh phức tạp mà Alt Text không thể giải thích đầy đủ.

Đó có thể là địa chỉ của một trang web khác hoặc một thành phần trên cùng trang.

Tuy nhiên, thuộc tính này hiếm khi được sử dụng vì hầu hết trình duyệt không hỗ trợ.

Thuộc tính Crossorigin

Thuộc tính crossorigin được sử dụng khi tải hình ảnh từ một domain khác.

Thuộc tính này yêu cầu trình duyệt gửi một yêu cầu chia sẻ tài nguyên cross-origin (CORS). Cơ chế bảo mật CORS cho phép máy chủ web kiểm soát việc các domain khác có thể truy cập tài nguyên của mình hay không, đồng thời bảo vệ thông tin nhạy cảm khỏi các yêu cầu trái phép.

Thuộc tính crossorigin có thể nhận các giá trị sau:

• anonymous: Gửi yêu cầu không kèm thông tin xác thực. Giá trị này tương đương với thuộc tính crossorigin để trống. Loại yêu cầu này được dùng để truy cập các tài nguyên công khai.
• use-credentials: Gửi yêu cầu kèm thông tin xác thực, chẳng hạn như cookie, chứng chỉ, v.v. Loại yêu cầu này được dùng để truy cập các tài nguyên riêng tư.

Thuộc tính Ismap

Thuộc tính ismap biểu thị một image map (hình ảnh có các vùng có thể nhấp) được lưu trên máy chủ. Thuộc tính này chỉ dùng cho hình ảnh có thể nhấp, tức là các thẻ <img> nằm bên trong thẻ <a>.

Đây là thuộc tính boolean — nghĩa là giá trị của nó là "true" khi có mặt và "false" khi không có. Thuộc tính này không chứa giá trị nào.

Ví dụ:

<a href="https://example.com/"><img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" ismap></a>

Khi người dùng nhấp vào hình ảnh, vị trí nhấp cũng được gửi kèm yêu cầu. Tọa độ con trỏ sẽ được thêm vào cuối URL.

Trong ví dụ trên, khi nhấp vào hình ảnh tại tọa độ (x=33, y=45), URL sau sẽ được mở:

https://example.com/?33,45

Chương trình hoặc script trên máy chủ xử lý yêu cầu và thực hiện một hành động cụ thể. Hoặc đưa người dùng đến một trang cụ thể.

Ngày nay, thuộc tính này hiếm khi được sử dụng vì không hữu ích cho người dùng dùng trình đọc màn hình. Dùng JS/CSS thay thế cũng mang lại chức năng hiệu quả hơn mà không cần máy chủ xử lý.

Thuộc tính Usemap

Thuộc tính usemap đại diện cho hình ảnh có các vùng có thể nhấp vào (gọi là image map).

Mỗi vùng liên kết đến một địa chỉ cụ thể, chẳng hạn như một trang web hoặc tài nguyên.

Thông tin về vị trí của các vùng này và địa chỉ tương ứng được lưu trong thẻ <map>. Giá trị của thuộc tính usemap trỏ đến tên của map liên quan.

Vì vậy, thuộc tính usemap tạo image map được xử lý trong trình duyệt (gọi là image map phía client).

Dưới đây là ví dụ sử dụng thuộc tính usemap:

<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" usemap="#cat">
<map name="cat">
<area shape="rect" coords="0,0,200,400" href="left_part.html" alt="Left Part">
<area shape="rect" coords="200,0,400,400" href="right_part.html" alt="Right Part">
</map>

Không thể dùng thẻ usemap cho hình ảnh có thể nhấp vào.

Thuộc tính Loading

Thuộc tính này xác định cách trình duyệt tải hình ảnh.

Điều này phụ thuộc vào giá trị mà thuộc tính chứa:

• eager: Hình ảnh được tải ngay lập tức (đây là giá trị mặc định)
• lazy: Hình ảnh chỉ được tải khi cần (tức là khi người dùng đến phần đó trên trang)

Lazy loading hình ảnh có thể cải thiện thời gian tải. Cách này cũng có thể cải thiện điểm hiệu suất trang trong PageSpeed Insights—một công cụ đo lường hiệu suất trang trên máy tính và thiết bị di động.

Tốc độ trang là một yếu tố xếp hạng Google đã xác nhận. Vì vậy, dùng lazy loading cho hình ảnh có thể là một cách hay để cải thiện SEO cho trang web của bạn.

Thuộc tính Referrerpolicy

Thuộc tính này xác định thông tin referrer nào sẽ được gửi kèm yêu cầu tải hình ảnh.

Referrer là gì?

Referrer là trang gửi đi yêu cầu, tức trang sẽ nhúng hình ảnh.

Thuộc tính này có thể chứa một trong các giá trị sau:

• no-referrer: Không gửi thông tin referrer kèm theo yêu cầu
• no-referrer-when-downgrade: Không gửi thông tin referrer với các yêu cầu từ HTTPS đến HTTP
• same-origin: URL đầy đủ được gửi cùng các yêu cầu cùng origin. Không gửi thông tin referrer cho các yêu cầu khác origin.
• origin: Origin (scheme, host và port) được gửi
• strict-origin: Origin (scheme, host và port) được gửi với các yêu cầu HTTPS đến HTTPS và HTTP đến bất kỳ origin nào. Không gửi thông tin referrer với các yêu cầu HTTPS đến HTTP.
• origin-when-cross-origin: Origin (scheme, host và path) được gửi cùng các yêu cầu cross-origin. URL đầy đủ, bao gồm cả path, được gửi cùng các yêu cầu same-origin.
• strict-origin-when-cross-origin: Giống với “origin-when-cross-origin,” nhưng không có thông tin referrer nào được gửi khi thực hiện yêu cầu từ HTTPS đến HTTP. Đây là giá trị mặc định.
• unsafe-url: Origin, path và query string được gửi đi. (Bạn không nên dùng tùy chọn này vì chia sẻ toàn bộ thông tin referrer là không an toàn.)

Thuộc tính Srcset

Thuộc tính này được dùng để hiển thị hình ảnh responsive.

Thuộc tính này chứa các liên kết đến cùng một hình ảnh với nhiều kích thước khác nhau. Kích thước của mỗi hình ảnh được xác định theo chiều rộng hoặc mật độ điểm ảnh.

Nhờ đó, trình duyệt có thể chọn hình ảnh phù hợp nhất trong bộ ảnh dựa trên kích thước và độ phân giải màn hình.

Thuộc tính Sizes

Thuộc tính này được dùng cùng với thuộc tính srcset.

Thuộc tính này cho trình duyệt biết nên sử dụng kích thước hình ảnh nào trong từng điều kiện.

Thuộc tính Style

Thuộc tính này dùng để áp dụng kiểu nội tuyến cho thẻ hình ảnh và sẽ ghi đè mọi kiểu toàn cục khác được áp dụng cho hình ảnh.

Thuộc tính style có thể điều chỉnh giao diện của thẻ hình ảnh. Thuộc tính này có thể chứa các yếu tố như viền, bóng đổ và căn chỉnh hình ảnh.

Thuộc tính Height

Thuộc tính này dùng để xác định chiều cao của hình ảnh theo pixel, như trong hình bên dưới.

Nếu không chỉ định chiều cao, hình ảnh sẽ tải ở chiều cao gốc. Điều này có thể khiến hình ảnh không phù hợp với bố cục trang của bạn.

Thuộc tính Width

Thuộc tính này dùng để xác định chiều rộng của hình ảnh theo pixel.

Hình ảnh không có thuộc tính width sẽ hiển thị ở chiều rộng gốc.

Mẹo: Bạn nên xác định cả chiều cao và chiều rộng cho hình ảnh để tránh bố cục thay đổi sau khi hình ảnh tải xong.

Các thuộc tính HTML không còn được khuyến nghị

Một số thuộc tính hình ảnh HTML cũ đã được thay thế trong HTML5.

Trình duyệt có thể hỗ trợ các thuộc tính này để đảm bảo khả năng tương thích, nhưng bạn không nên sử dụng chúng. Chúng đã lỗi thời (tức là không còn được khuyến nghị).

Dưới đây là danh sách các thuộc tính đã lỗi thời:

• align
• border
• hspace
• longdesc
• name
• vspace

Các trình duyệt hỗ trợ thẻ hình ảnh HTML

Thẻ HTML <img> được chấp nhận rộng rãi.

Thẻ này được hỗ trợ bởi tất cả trình duyệt internet phổ biến, bao gồm:

• Chrome
• Safari
• Edge
• Firefox
• Opera

Hầu hết trình duyệt trên mobile cũng hỗ trợ thẻ hình ảnh.

Các định dạng hình ảnh được hỗ trợ trong thẻ hình ảnh

Dưới đây là danh sách các định dạng hình ảnh phổ biến được Chrome, Edge, Firefox, Safari và Opera hỗ trợ:

• .apng
• .bmp
• .gif
• .jpeg
• .jpg
• .png
• .webp
• .svg

Các phương pháp hay nhất để đảm bảo khả năng tiếp cận

Hình ảnh giúp trang web trở nên hấp dẫn hơn về mặt thị giác đối với người đọc.

Nhưng không phải ai cũng có thể nhìn rõ hình ảnh, thậm chí có người không thể nhìn thấy chúng. Vì vậy, việc giúp người khiếm thị tiếp cận hình ảnh cũng rất quan trọng.

Hãy nhớ rằng trình đọc màn hình dùng văn bản thay thế của hình ảnh để mô tả chúng. Vì vậy, bạn nên viết Alt Text mang tính mô tả cho mọi hình ảnh không chỉ có mục đích trang trí.

Vậy những hình ảnh đó là gì?

Hình ảnh không mang tính trang trí là một phần trong nội dung chính của trang và chứa thông tin cần thiết để hiểu trang đó.

Ngược lại, các hình ảnh trang trí không chứa thông tin nào. Chúng chỉ giúp trang web đẹp hơn về mặt thị giác. Vì vậy, hãy để trống văn bản thay thế (alt=“”) cho những hình ảnh này để trình đọc màn hình có thể bỏ qua chúng.

Đây là ví dụ hay về Alt Text mang tính mô tả: “Furry white cat sitting in front of a wall” tốt hơn “Image of cat.”

Vì phần mô tả đầu tiên cung cấp nhiều thông tin hơn. Nó giúp người dùng trình đọc màn hình hiểu thêm về ngữ cảnh của hình ảnh.

Sau đây là một số phương pháp hay nhất giúp hình ảnh dễ tiếp cận hơn:

• Dùng Alt Text phù hợp với ngữ cảnh và có tính mô tả
• Không thêm văn bản thay thế cho hình ảnh trang trí như hình bên dưới

• Với hình ảnh có thể nhấp vào, hãy mô tả liên kết đích trong phần văn bản thay thế của hình ảnh
• Tránh nhúng vào hình ảnh những nội dung quan trọng không xuất hiện ở nơi nào khác trên trang. Nếu hình ảnh có chứa chữ, hãy mô tả nội dung đó trong phần văn bản thay thế.
• Viết văn bản thay thế bằng cùng ngôn ngữ với phần nội dung còn lại trên trang

Nếu để trống văn bản thay thế, một số trình đọc màn hình có thể mặc định đọc tên tệp hình ảnh. Vì vậy, bạn cũng nên đặt tên tệp mang tính mô tả.

Ví dụ, tên tệp “furry-cat.png” tốt hơn “image-202405.png.”

Google đôi khi cũng dùng tên tệp để nhận diện hình ảnh. Điều đó có nghĩa là tên tệp hình ảnh phù hợp với ngữ cảnh cũng có thể có lợi cho SEO hình ảnh.

Ví dụ về thẻ hình ảnh HTML

Bây giờ, hãy xem một số ví dụ cụ thể về cách dùng thẻ hình ảnh trong HTML:

Hình ảnh có kích thước cụ thể

Bạn có thể dùng thuộc tính height và width để chỉ định kích thước hình ảnh.

Dưới đây là ví dụ về hình ảnh có kích thước 150x150 pixel:

<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" height="150" width="150">

Hình ảnh có kiểu nội tuyến

Bạn có thể áp dụng kiểu nội tuyến cho hình ảnh bằng cách dùng phần tử style.

Dưới đây là ví dụ về cách thêm viền đen cho hình ảnh bằng kiểu nội tuyến:

<img src="https://example.com/cat.jpg" alt="Furry white cat sitting on a wall" style="border:3px solid black">

Hình ảnh động

Thẻ <img> trong HTML có thể hiển thị hình ảnh động như GIF.

Ví dụ, thẻ bên dưới hiển thị một GIF:

<img src="https://example.com/rabbit.gif" alt="Rabbit jumping across the grass">

Hình ảnh làm nút

Để dùng hình ảnh làm nút, hãy đặt thẻ <img> bên trong thẻ <button>.

Như sau:

<button type="submit"><img src="https://example.com/submit.jpg" alt="Submit the form"></button>

Tải hình ảnh theo nhu cầu

Bạn có thể bật lazy loading cho hình ảnh bằng cách đặt thuộc tính loading thành “lazy.”

Ví dụ:

<img src="https://example.com/rabbit.gif" alt="Rabbit jumping across the grass" loading="lazy">

Đảm bảo thẻ và thuộc tính hình ảnh tuân thủ chuẩn

Thẻ hình ảnh HTML cho phép bạn nhúng hình ảnh để trang web trông sinh động hơn. Các thuộc tính hình ảnh cũng có thể mang lại trải nghiệm người dùng tốt hơn và dễ tiếp cận hơn, đồng thời cải thiện thứ hạng của bạn trên công cụ tìm kiếm.

Tuy nhiên, bạn cần đảm bảo sử dụng chúng đúng cách.

Thẻ và thuộc tính HTML không hợp lệ có thể gây ra sự cố kỹ thuật. Chúng có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng và làm giảm thứ hạng trên công cụ tìm kiếm. Vì vậy, bạn nên thường xuyên audit website để theo dõi những vấn đề này.

Công cụ audit website miễn phí của chúng tôi nhanh chóng phát hiện các vấn đề về hình ảnh. Để kiểm tra toàn bộ website và lên lịch audit định kỳ, hãy dùng Semrush Site Audit.

Mở công cụ và làm theo hướng dẫn cấu hình của chúng tôi. Sau đó, nhấp vào “Start Site Audit.”

Nhấp vào “Issues” tab. Sau đó, nhập “images” vào thanh tìm kiếm để tìm các vấn đề như thiếu thuộc tính alt.

Bạn cũng có thể phát hiện các vấn đề kỹ thuật khác trên website. Những vấn đề cấp bách nhất được gọi là “Errors.”

Bạn cũng có thể đặt lịch audit website bằng cách nhấp vào biểu tượng bánh răng rồi cuộn xuống “Site Audit settings.”

Dùng thử Site Audit miễn phí ngay hôm nay.