Hình ảnh là một phần quan trọng trong bất kỳ trang web nào. Thẻ img trong HTML là công cụ tuyệt vời để bạn chèn hình ảnh vào trang web và tạo sự thu hút cho người đọc.
Thẻ img trong HTML là gì?
Thẻ img không cần thẻ đóng và được sử dụng để chèn hình ảnh vào trang web. Bạn chỉ cần sử dụng cú pháp sau:<img src="đường dẫn ảnh" các-thuộc-tính-khác>.
Mỗi thẻ img tương đương với một bức ảnh trên trang web.
Các thuộc tính của thẻ img
Thẻ img có nhiều thuộc tính như src, alt, border, width, height... Mỗi thuộc tính có chức năng riêng. Trong đó, thuộc tính src là bắt buộc để khai báo đường dẫn của hình ảnh.
Thuộc tính src
Thuộc tính src là thuộc tính bắt buộc của thẻ img. Nó dùng để khai báo đường dẫn của hình ảnh. Thẻ img hỗ trợ nhiều định dạng ảnh như jpg, png, gif...
Giá trị của URL hình ảnh có thể là đường dẫn tuyệt đối hoặc tương đối.
Thuộc tính alt
Thuộc tính alt được sử dụng để thêm nội dung văn bản cho hình ảnh. Khi hình ảnh không thể hiển thị, người dùng sẽ thấy giá trị của thuộc tính alt.
Thuộc tính border
Thuộc tính border giúp xác định độ dày của viền xung quanh hình ảnh.
Thuộc tính width và height
Thuộc tính width được sử dụng để thiết lập độ rộng của hình ảnh, còn thuộc tính height giúp thiết lập chiều cao của hình ảnh.
Thuộc tính vspace và hspace
Thuộc tính vspace giúp xác định khoảng cách lề trên và dưới của hình ảnh, trong khi thuộc tính hspace giúp xác định khoảng cách lề trái và phải của hình ảnh.
Thuộc tính align
Thuộc tính align giúp xác định vị trí hiển thị của hình ảnh so với nội dung văn bản xung quanh.
Cách kết hợp thẻ img trong HTML
Để tạo giao diện web sinh động và hấp dẫn hơn, bạn có thể kết hợp thẻ img với các thẻ khác.
Kết hợp thẻ a để tạo link hình ảnh
Bằng cách kết hợp thẻ a và thẻ img, bạn có thể tạo ra hình ảnh có thể được nhấp để điều hướng đến đường link.
Kết hợp thẻ map với thẻ img để gắn link
Kết hợp thẻ map và thẻ img để tạo ra các vùng chọn trên hình ảnh có thể điều hướng đến các trang khác.
Những lưu ý khi sử dụng thẻ img trong HTML
Hãy luôn đặt thuộc tính alt cho thẻ img để tối ưu công cụ tìm kiếm. Hãy chọn kích thước ảnh phù hợp để tránh tải trang web chậm.
Lời Kết
Đó là những điều thú vị về thẻ img trong HTML. Bạn có thể sử dụng thẻ img kết hợp với các thẻ khác để tăng tính tương tác trên trang web của mình. Chúc bạn thành công!