Những điều không phải ai cũng biết về thẻ img trong HTML

1. Thẻ img trong HTML là gì?

Đối với bất cứ website nào, bên cạnh nội dung hấp dẫn thì rất cần những hình ảnh thu hút người đọc. Và thẻ img trong HTML chính công cụ giúp bạn chèn hình ảnh vào trang web.

the-img-trong-html-la-gi

Thẻ <img> không cần thẻ đóng. Khi cần chèn hình ảnh cho website, bạn sử dụng thẻ <img> theo cú pháp sau:

<img src="đường dẫn url tới nơi lưu ảnh" các-thuộc-tính-khác>

Mỗi thẻ <img> sẽ tương đương với 1 bức ảnh đăng tải trên trang web.

2. Các thuộc tính của thẻ img

Thẻ <img> có nhiều thuộc tính như src, alt, border, with, height…. Mỗi thuộc tính của thẻ <img> có chức năng khác nhau. Trong đó, src là thuộc tính bắt buộc để bạn khai báo đường dẫn URL của hình ảnh.

thuoc-tinh-cua-the-img

2.1. Thuộc tính src

Như đã đề cập ở trên, src là thuộc tính bắt buộc phải có của thẻ <img>. Thuộc tính src có nhiệm vụ để khai báo đường dẫn tương ứng của file hình ảnh. Thẻ img hỗ trợ hầu hết các định dạng tập tinh hình ảnh như jpg, png, gif…

Giá trị của URL hình ảnh có thể ở 1 trong 2 dạng đường dẫn: tuyệt đối hoặc tương đối

Đường dẫn tương đối: ./wp-content/uploads/2023/09/logo.png
Đường dẫn tuyệt đối: https://icantech.vn/wp-content/uploads/2023/09/logo.png

2.2. Thuộc tính alt

Thuộc tính alt là thuộc tính được dùng để thêm nội dung văn bản cho hình ảnh. Khi đường dẫn ảnh bị lỗi và không xem được, người dùng sẽ thấy giá trị của thuộc tính alt.

Ví dụ của thuộc tính alt:

<img src="img_icantech.jpg" alt="Trường học công nghệ trực tuyến cho trẻ">

2.3. Thuộc tính border

Trong thẻ img, thuộc tính border giúp bạn xác định được độ dày đường viền bao quanh hình ảnh.

Ví dụ của thuộc tính border:

<img src="https://icantech.vn/wp-content/uploads/2023/09/logo.png" border="1px"/>

2.4. Thuộc tính width

Khi cần thiết lập độ rộng cho hình ảnh, bạn sử dụng thuộc tính width trong thẻ img.

Ví dụ:

2.5. Thuộc tính height

Nếu thuộc tính width dùng để thiết lập độ rộng của hình ảnh, thì thuộc tính height giúp bạn thiết lập chiều cao của hình ảnh trên website.

Ví dụ đơn giản như sau:

<img src="https://icantech.vn/wp-content/uploads/2023/09/logo.png" width="500px" height=”500px”/>

2.6. Thuộc tính vspace

Thuộc tính vspace giúp bạn xác định khoảng cách lề phía trên và lề phía dưới của hình ảnh.

Ví dụ của thuộc tính vspace:

<img src="icantech.jpg" alt="Hình có lề trên và lề dưới là 100px" vspace="100">

2.7. Thuộc tính hspace thẻ img trong HTML

Một ví dụ về cách sử dụng thuộc tính hspace của thẻ img trong HTML:

<img src="icantech.jpg" alt="hình có lề trái và lề phải là 100px" hspace="100">

Nhìn vào ví dụ trên chúng ta có thể thấy, thuộc tính hsapce được dùng để xác định khoảng cách lề bên trái và lề bên phải hình ảnh.

2.8. Thuộc tính align

Thuộc tính align giúp bạn xác định vị trí hiển thị của bức ảnh so với các nội dung của văn bản xung quanh.

Bạn tham khảo ví dụ sau:

<img src="icantech.jpg" alt="Hình được đẩy sang bên phía tay trái" align="left">

3. Cách kết hợp thẻ img trong HTML

Để giao diện website được sinh động và bắt mắt hơn, bạn còn có thể kết hợp thẻ img với các thẻ khác.

3.1. Kết hợp thẻ a để tạo ra link hình ảnh

Khi truy cập vào website bất kỳ, bạn sẽ thường bắt gặp việc click vào hình ảnh sẽ dẫn ra 1 đường link nào đó. Để có được kết quả như vậy, bạn cần kết hợp 2 thẻ với nhau là thẻ a và thẻ img.

Cách để kết hợp 2 thẻ với nhau, bạn hãy tham khảo ví dụ dưới đây:

<a href="https://icantech.vn">

</a>

3.2. Kết hợp thẻ map với thẻ img để gắn link

Trong logo ICANTECH, giả định như bạn đang muốn gán link vào chữ k và chữ o. Khi người dùng click vào chữ k hoặc chữ o thì sẽ dẫn link đến trang chủ icantech.vn. Trường hợp người dùng click vào các vùng khác thì sẽ hệ thống sẽ không điều hướng sang trang khác.

Chúng ta hãy cùng xem xét ví dụ kết hợp thẻ map và thẻ img như sau:

<img src="https://icantech.vn/wp-content/uploads/2023/09/logo.png" alt="khóa học" usemap="#logokhoahoc"/>

</map>

Quan sát đoạn code trên, bạn sẽ thấy:

Trong thẻ img có thuộc tính usemap và usemap="#logokhoahoc". Thuộc tính usemap giúp chỉ định map mang giá trị name=”logokhoahoc” được áp dụng vào hình ảnh.
Thẻ map có thuộc tính name="logokhoahoc" nhằm giúp nhận diện thẻ img nằm bên trong nó. Thẻ area giúp bạn xác định hình khối thông qua tọa độ và link đích.

Trong thẻ area tồn tại các thuộc tính:

shape: hỗ trợ xác định hình dạng khối cần chọn. Thuộc tính shape bao gồm các giá trị: circle (hình tròn), poly (hình đa giác) và rec (hình chữ nhật).
href: link đích khi người dùng click vào vùng ảnh có điều hướng link
coords: tọa độ các điểm để tạo thành vùng chọn, vùng chọn này sẽ phụ thuộc vào các dạng shape là: rect, circle và poly.

4. Những lưu ý khi sử dụng thẻ img trong HTML

Một số điều bạn cần lưu ý khi sử dụng thẻ img:

Thẻ img nên đi kèm với thuộc tính alt, hỗ trợ tối ưu công cụ tìm kiếm
Không nên lựa chọn hình ảnh có kích thước quá lớn, bạn nên chọn hình ảnh có kích thước không quá 500KB. Nguyên nhân là do hình ảnh có kích thước lớn sẽ tiêu tốn nhiều dung lượng, hình ảnh load lâu hơn khi người dùng truy cập website.

5. Lời Kết

Vậy là trong khuôn khổ nội dung bài viết, chúng ta đã cùng nhau tìm hiểu về thẻ img trong HTML. Bạn còn có thể kết hợp thẻ img với các thẻ khác để tối ưu hình ảnh trên trang web. ICANTECH -Nền tảng học lập trình cho bé mong rằng với những chia sẻ vừa rồi, bạn có thể tự thực hiện chèn ảnh cho website của mình. Chúc bạn thành công!

Nguồn ảnh: ICANTECH.