Image trong HTML

Khi truy cập trang web, bạn sẽ thường xuyên thấy rất nhiều hình ảnh đủ mọi kích thước và vị trí trên trang. Hình ảnh trong trang web HTML sẽ giúp nội dung phong phú hơn cũng như tăng tính thẩm mỹ cho trang. Mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây để tìm hiểu về thẻ img trong HTML nhé!

Image trong HTML

1. Ảnh trong HTML

Thẻ img trong HTML được sử dụng để hiển thị hình ảnh trên trang web. Thẻ img là một thẻ trống chỉ chứa các thuộc tính và không có thẻ đóng.

Ví dụ 1:

<h2>Hiển thị ảnh trong HTML</h2> 
<img src="/images/html/good-morning.jpg" alt="Good Morning!"/>

Kết quả:

Ví dụ 2: ảnh không tồn tại, khi đường dẫn ảnh không tồn tại trình duyệt sẽ hiển thị văn bản được định nghĩa trong thuộc tính alt

<h2>Hiển thị ảnh trong HTML</h2> 
<img src="/images/html/good-morning2.jpg" alt="Good Morning!"/>

Kết quả:

Good Morning!

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

src và alt là các thuộc tính quan trọng của thẻ img trong HTML. Dưới đây là tất cả các thuộc tính của thẻ img trong HTML.

Thuộc tính src

Đây là một thuộc tính cần thiết mô tả nguồn hoặc đường dẫn của hình ảnh. Nó chỉ thị trình duyệt nơi để tìm kiếm hình ảnh trên máy chủ.

Vị trí của hình ảnh có thể nằm trên cùng một thư mục hoặc máy chủ khác.

Thuộc tính alt

Thuộc tính alt xác định một văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị. Giá trị của thuộc tính alt mô tả hình ảnh bằng văn bản. Thuộc tính alt sử dụng có lợi cho SEO.

Thuộc tính width

Nó là một thuộc tính tùy chọn được sử dụng để xác định chiều rộng để hiển thị hình ảnh. Bạn nên sử dụng CSS với thuộc tính width để điều chỉnh thay vì sử dụng thuộc tính width trong thẻ img.

Thuộc tính height

Nó là một thuộc tính tùy chọn được sử dụng để xác định chiều cao để hiển thị hình ảnh. Bạn nên sử dụng CSS với thuộc tính height để điều chỉnh thay vì sử dụng thuộc tính height trong thẻ img.

3. Các trình duyệt hộ trợ thẻ img

Thẻ chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<img> Yes Yes Yes Yes Yes

Trên đây là bài viết của eLib.VN về Image trong HTML. Bên cạnh nội dung văn bản, thì hình ảnh cũng là một dạng nội dung phổ biến trên web. Vì thế thao tác chèn hình ảnh vào website cũng được sử dụng nhiều và đang trở thành xu hướng.

Ngày:06/11/2020 Chia sẻ bởi:

CÓ THỂ BẠN QUAN TÂM