Thẻ IMG trong HTML

Thẻ IMG trong HTML

Thẻ img trong HTML dùng để hiển thị hình ảnh cho người dùng xem khi lướt website, thẻ này dùng để SEO hình ảnh lên các công cụ tìm kiếm như Google, Bing,..., chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Thẻ IMG trong HTML

Thẻ <img> trong HTML dùng để hiển thị hình ảnh cho người dùng xem khi lướt website, thẻ này dùng để SEO hình ảnh lên các công cụ tìm kiếm như Google, Bing,...

Cú pháp của Thẻ IMG trong HTML

<img src="duongdan" width="chieurong" height="chieucao" alt="motaseo" title="motaxem">

src: Thuộc tính src chứa duongdan (Đường dẫn tới file hình ví dụ: https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg hoặc upload/tinblog/the-img-trong-html.jpg)

width: Thuộc tính width chứa chieurong (Chiều rộng của hình ví dụ: 100px; 100%,....)

height: Thuộc tính height chứa chieucao (Chiều cao của hình ví dụ: 300px; 100vh,....)

alt: Thuộc tính alt chứa motaseo (Mô tả cho các công cụ SEO đọc file hình)

title: Thuộc tính title chứa motaxem (Mô tả cho hình khi người dùng rê chuột vào xem)

Bao gồm 1 thẻ mở <img> và không có thẻ đóng.

Các thuộc tính trong thẻ <IMG>

Thuộc tính SRC trong thẻ <IMG>

Thuộc tính này chứa liên kết tới file hình ảnh, file hình ảnh này có thể nằm trực tiếp trên website hiện tại hoặc có thể nằm ở trên các website khác:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg">

Chạy Thử

Thuộc tính Width, Height trong thẻ <IMG>

Cần phải đặt chiều rộng và chiều cao của hình ảnh trong thẻ <img> để cho các công cụ tìm kiếm dễ dàng biết được kích thước của hình ảnh đó:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" width="526" height="274" >

Chạy Thử

Thuộc tính ALT trong thẻ <IMG>

Thuộc tính ALT dùng để mô tả nội dung của hình ảnh đó nói đến, nội dung thuộc tính ALT sẽ được các công cụ tìm kiếm như Google tìm đọc để hiểu thêm về nội dung của hình ảnh:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" alt="Thẻ IMG trong HTML">

Chạy Thử

Thuộc tính Title trong thẻ <IMG>

Thuộc tính Title sẽ hiển thị nội dung của hình ảnh trong trường hợp lướt website mà hình ảnh không được hiển thị, giúp người dùng biết được nội dung của hình ảnh đó đang nói về điều gì:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg" title="Thẻ IMG trong HTML">

Chạy Thử

Lưu ý khi dùng thẻ <IMG>

Nên dùng thẻ này:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg">

Không nên dùng thẻ này:

<img src="https://webmoi.vn/upload/tinblog/the-img-trong-html.jpg"/>

Thẻ img có dấu / phía sau hiện giờ đã lỗi thời, nên chú ý vấn đề này.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ IMG trong HTML.

  • 0 Bình luận
Content Trần Ngọc Thanh
Trần Ngọc Thanh
Content Trần Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác
Chia sẻ nội dung đánh giá của bạn về Thẻ IMG trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn