HTML5: <img>

Tổng quan

Thẻ <img> (image) dùng để hiển thị ảnh trong trang web.

Lưu ý: Bạn nên sử dụng thuộc tính alt của thẻ để hiển thị phần mô tả tương ứng để đề phòng trường hợp trình duyệt không hiển thị được ảnh hoặc không hỗ trợ đồ hoạ (do đó không hiển thị ảnh được, trường hợp này có thể xảy ra khi người dùng chọn không hiển thị ảnh hoặc những người khiếm thị sử dụng trình duyệt không có hỗ trợ đồ hoạ do không cần thiết).

Nhóm nội dung

Flow, Phrasing, Embedded, Palpable. Nếu <img> sử dụng thuộc tính usemap thì <img> cũng thuộc nhóm nội dung Interactive.

Nội dung được phép

<img> không chứa nội dung.

Thẻ đóng

<img> là thẻ đơn (<img />).

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Embedded.

DOM interface

HTMLImageElement.

Thuộc tính

<img> bao gồm Các thuộc tính Global.

alt

Dùng để hiển thị một chuỗi văn bản thay thế trong trình duyệt trong trường hợp ảnh tương ứng với phần tử chứa alt không hiển thị, tức là nếu ảnh hiển thị thì phần văn bản trong alt sẽ không hiển thị (có thể do sai URL hoặc do trình duyệt hiện thời không hỗ trợ định dạng ảnh tương ứng hoặc cũng có thể do ảnh không được download hay trình duyệt không hỗ trợ đồ hoạ). Nếu không dùng đến thuộc tính alt trong thẻ <img> thì điều này sẽ báo cho trình duyệt biết ảnh hiển thị qua thẻ <img> là phần nội dung quan trọng trong trang web; còn nếu có sử dụng alt nhưng để chuỗi rỗng (alt="") thì sẽ báo cho trình duyệt biết rằng ảnh không phải là thành phần nội dung quan trọng trong trang web.

Ví dụ:

border

Thuộc tính này dùng để thiết lập độ rộng đường bao xung quanh ảnh, bạn có thể sử dụng đơn vị px hoặc %. Lưu ý rằng thuộc tính này đã bị lỗi thời trong HTML5 và sẽ không còn được dùng đến nữa trong tương lai gần. Trong trường hợp này bạn sử dụng thuộc tính border của CSS để thay thế.

Ví dụ:

crossorigin

Đây là thuộc tính liệt kê (thuộc phiên bản HTML5), thuộc tính này dùng để chỉ ra rằng việc tìm nạp ảnh liên quan có cần phải sử dụng đến CORS hay không (những ảnh được tải bằng phương pháp CORS có thể sử dụng lại được trong phần tử <canvas> mà không bị ảnh hưởng đến chất lượng ảnh). Thuộc tính này có những giá trị sau:

anonymous

Giả sử một yêu cầu cross-origin (ví dụ, Origin: HTTP header) đã được giải quyết, nhưng lại không có chứng nhận nào được gửi (ví dụ, không có cookie, không có chứng nhận X.509 và cũng không có thẩm định HTTP Basic nào được gửi), thì nếu server không cung cấp chứng nhận cho site nguồn (bằng cách không thiết lập Access-Control-Allow-Origin: HTTP header) thì chất lượng của ảnh sẽ bị giảm và việc sử dụng nó sẽ trở nên bị hạn chế.

use-credentials

Giả sử một yêu cầu cross-origin (ví dụ, Origin: HTTP header) đã được giải quyết và chứng nhận đã được gửi (ví dụ, một cookie, một chứng nhận X.509 và một thẩm định HTTP Basic được gửi), thì nếu server không cung cấp chứng nhận cho site nguồn (bằng cách không thiết lập Access-Control-Allow-Origin: HTTP header) thì chất lượng của ảnh cũng sẽ vẫn bị giảm và việc sử dụng nó sẽ trở nên bị hạn chế.

Nếu crossorigin không được sử dụng thì tài nguyên sẽ được nạp mà không có yêu cầu CORS (ví dụ, không gửi Origin: HTTP header), khi đó phần tử <canvas> sẽ bị ngăn chặn việc sử dụng ảnh mặc dù ảnh không hề bị giảm chất lượng. Còn nếu crossorigin được sử dụng nhưng không có tác dụng thì việc xử lý sẽ tương ứng với việc sử dụng giá trị anonymous.

height : Thuộc tính này dùng để xác định chiều cao của ảnh; đối với HTML5 thì đơn vị sử dụng là CSS pixel, còn đối với HTML4 thì đơn vị là px hoặc %.

hspace : Dùng để thiết lập khoảng trắng (theo đơn vị px) bên trái và bên phải của ảnh (trong HTML5 thuộc tính này đã lỗi thời và đã hoặc sẽ bị huỷ).

ismap : Đây là thuộc tính Boolean, dùng để chỉ ra rằng ảnh là một phần của bản đồ server-side, và vì vậy nếu bạn click chuột vào ảnh thì toạ độ của chuột sẽ được gửi tới server. Lưu ý rằng ismap chỉ được sử dụng khi thẻ <img> nằm trong một thẻ <a> nào đó và thẻ <a> này sử dụng thuộc tính href có giá trị hợp lệ.

longdesc : Thuộc tính này chứa URL của phần mô tả của ảnh, nó có tác dụng bổ sung cho phần mô tả của thuộc tính alt. Trong HTML5 người ta sử dụng thẻ <a> để liên kết đến phần mô tả thay vì dùng thuộc tính longdesc.

name : Dùng để đặt tên cho phần tử. Trong HTML4 nó được dùng với mục đích duy nhất là đảm bảo sự tương thích ngược; còn trong HTML5 ta sử dụng thuộc tính id để thay thế.

sizes : Đây là thuộc tính của HTML5.

src : Thuộc tính này dùng để chứa URL của ảnh và đây là thuộc tính bắt buộc. Đối với những trình duyệt hỗ trợ thuộc tính srcset thì src được ứng xử như một ảnh ứng viên với mật độ điểm ảnh là 1x trừ khi một ảnh với bộ mô tả mật độ điểm ảnh đã được xác định trong thuộc tính srcset hoặc srcset có chứa các bộ mô tả 'w'.

srcset : Đây là thuộc tính của HTML5.

width : Thuộc tính này dùng để xác định độ rộng của ảnh theo đơn vị CSS pixel đối với HTML5 và theo đơn vị px hoặc % đối với HTML4.

Ví dụ:

<img width="50%" /> <!--Độ rộng bằng 50% so với phần tử chứa-->

<img width="100" /> <!--Độ rộng bằng 100px-->

usemap

Thuộc tính này dùng để chứa phần URL (bắt đầu từ dấu '#') của một bản đồ ảnh liên quan (chứa id của thẻ <map>). Lưu ý rằng bạn không sử dụng được thuộc tính này nếu thẻ <img> là con của thẻ <a> hoặc thẻ <button>.

Mời bạn xem ví dụ về usemap tại đây.

vspace : Thuộc tính này dùng để xác định khoảng trắng tính theo đơn vị px ở trên và dưới ảnh hiện thời.

Các định dạng ảnh được hỗ trợ

Mỗi trình duyệt có thể có những hỗ trợ khác nhau đối với các định dạng ảnh. Dưới đây là danh sách các định dạng ảnh có thể được hỗ trợ bởi các trình duyệt:

JPEG, GIF (bao gồm cả ảnh GIF động), PNG, APNG, SVG, BMP, BMP ICO và PNG ICO.

Ví dụ

Ví dụ 1: Lấy nguồn ảnh.

Ví dụ 2: Điểm liên kết là ảnh.

Ví dụ 3: Sử dụng thuộc tính srcset.

Ví dụ 4: Sử dụng thuộc tính srcset và sizes.

Khả năng tương thích trình duyệt

Máy tính

Thiết bị di động

Xem thêm

· <embed>

· <object>