Bạn mới học HTML và đang loay hoay không biết cách chèn ảnh trong HTML sao cho đúng cú pháp và hiển thị chuẩn trên trình duyệt? Đừng lo, bài viết này sẽ hướng dẫn bạn từng bước chi tiết, dễ hiểu, có ví dụ minh họa thực tế. Là người từng hướng dẫn nhiều bạn mới bắt đầu với lập trình web, mình sẽ chia sẻ toàn bộ kinh nghiệm giúp bạn nắm vững cách thêm ảnh nhanh chóng, hiệu quả. Cùng LANIT bắt đầu nhé!
Thẻ img trong HTML là gì?
Thẻ img trong HTML là thẻ thể hiện hình ảnh trên website. Khác với các thẻ như div hay p, thẻ img tự đóng (self closing), không cần thể đóng tương ứng. Thẻ này hoạt động bằng cách tải và hiển thị một tệp ảnh từ nguồn cụ thể.
Cách chèn ảnh trong HTML bằng thẻ <img>
Để hiển thị hình ảnh trên website bằng HTML, bạn cần dùng thẻ và thể hiện đường dẫn tới tệp ảnh. Cú pháp cơ bản:
<img src=”duong-dan-den-anh.jpg” alt=”Mô tả ảnh”>
Trong đó:
- src (source): là đường dẫn đến tệp ảnh. Đây là thuộc tính bắt buộc.
- alt (alternative text): là văn bản mô tả ảnh, hiển thị khi ảnh không tải được. Alt text cũng hỗ trợ SEO và giúp người dùng sử dụng trình đọc màn hình hiểu được nội dung ảnh.
Các thuộc tính của thẻ <img>
Khi chèn ảnh vào trang web bằng thẻ <img>, việc hiểu rõ các thuộc tính đi kèm là điều rất quan trọng. Không chỉ giúp hiển thị ảnh đúng kích thước, đúng vị trí, mà còn hỗ trợ SEO, tối ưu tốc độ tải trang và trải nghiệm người dùng. Dưới đây là bảng tổng hợp các thuộc tính thường dùng của thẻ <img>, kèm theo mô tả, giá trị và hướng dẫn sử dụng phù hợp cho từng trường hợp.
| Thuộc tính | Mô tả | Giá trị điển hình | Ghi chú / Nên dùng khi |
| src | Đường dẫn đến tệp ảnh | “logo.png”, “https://example.com/…” | Bắt buộc, không có sẽ không hiển thị ảnh |
| alt | Văn bản thay thế khi ảnh lỗi, hỗ trợ SEO và truy cập | “Logo công ty” | Nên dùng luôn để cải thiện SEO & UX |
| width | Đặt chiều rộng ảnh (px hoặc %) | “200”, “50%” | Nên dùng để kiểm soát kích thước ảnh |
| height | Đặt chiều cao ảnh (px hoặc %) | “100”, “auto” | Có thể dùng kèm width hoặc CSS |
| title | Hiển thị nội dung khi rê chuột vào ảnh | “Ảnh sản phẩm” | Tuỳ chọn – hữu ích cho UX |
| loading | Tối ưu tải ảnh (lazy load) | “lazy”, “eager” | Rất nên dùng để tăng tốc độ tải trang |
| decoding | Chỉ định cách trình duyệt giải mã ảnh | “sync”, “async”, “auto” | Tuỳ chọn – có thể cải thiện hiệu suất khi ảnh lớn |
| crossorigin | Cho phép tải ảnh từ domain khác (CORS) | “anonymous”, “use-credentials” | Dùng khi ảnh từ CDN hoặc server bên ngoài |
| referrerpolicy | Kiểm soát việc gửi thông tin referrer khi tải ảnh | “no-referrer”, “origin” | Tuỳ chọn – hữu ích về bảo mật |
| usemap | Liên kết ảnh với bản đồ tương tác (image map) | “#map-name” | Ít dùng – cho các ảnh có vùng click cụ thể |
| ismap | Dùng khi ảnh nằm trong thẻ <a> và là bản đồ hình ảnh truyền thống | – | Rất ít dùng trong web hiện đại |
Lưu ý khi dùng thẻ <img>
Việc chèn hình ảnh bằng thẻ <img> trong HTML không chỉ đơn thuần là hiển thị ảnh trên trang web. Nếu sử dụng không đúng cách, ảnh có thể ảnh hưởng đến trải nghiệm người dùng, tốc độ tải trang, thậm chí làm giảm hiệu quả SEO. Dưới đây là những lưu ý quan trọng bạn cần nắm rõ khi sử dụng thẻ <img>.
- Luôn thêm thuộc tính alt cho thẻ <img>: Giúp mô tả ảnh, hỗ trợ người dùng khi ảnh không hiển thị, tăng khả năng SEO hình ảnh và cải thiện khả năng truy cập.
- Tối ưu dung lượng ảnh trước khi tải lên website: Nén ảnh giúp giảm thời gian tải trang, cải thiện trải nghiệm người dùng và tăng điểm hiệu suất trên Google PageSpeed.
- Sử dụng định dạng ảnh phù hợp: .jpg cho ảnh chụp, .png cho ảnh trong suốt, .webp cho hiệu suất tối ưu.
- Áp dụng loading=”lazy” để tối ưu tốc độ tải trang: Tải ảnh chỉ khi người dùng cuộn đến vị trí hiển thị giúp trang web nhanh hơn và tiết kiệm tài nguyên.
- Kiểm tra chính xác đường dẫn trong thuộc tính src: Tránh lỗi không hiển thị ảnh do sai tên file, thiếu phần mở rộng (.jpg, .png…) hoặc sai thư mục.
- Ưu tiên kiểm soát ảnh bằng CSS thay vì inline HTML: Dễ bảo trì, hỗ trợ responsive tốt hơn và tách biệt phần nội dung với định dạng trình bày.
- Đặt tên file ảnh thân thiện với SEO: Sử dụng từ khóa không dấu, phân tách bằng dấu -. Ví dụ: giay-chay-bo-nam.webp thay vì image001.jpg.
- Không sử dụng ảnh để thay thế văn bản chính: Nội dung quan trọng cần thể hiện bằng text để công cụ tìm kiếm có thể đọc hiểu và lập chỉ mục chính xác.
Việc nắm vững cách chèn ảnh trong HTML bằng thẻ <img> không chỉ là kỹ năng cơ bản trong lập trình web, mà còn là bước quan trọng giúp bạn xây dựng giao diện trực quan và chuyên nghiệp hơn. Hy vọng qua bài viết này, bạn đã hiểu rõ cú pháp, các thuộc tính quan trọng cũng như những lưu ý cần thiết khi sử dụng thẻ <img>. Hãy luyện tập thường xuyên với các ví dụ thực tế để sử dụng hình ảnh hiệu quả và tối ưu cho cả người dùng lẫn công cụ tìm kiếm.
