Thẻ img trong HTML là gì? Cú pháp, cách chèn ảnh và lỗi thường gặp cho người mới

Thẻ <img> trong HTML là gì?

Thẻ <img> trong HTML là phần tử dùng để hiển thị hình ảnh trên trang web. Nó không chứa ảnh trực tiếp bên trong mã HTML, mà gọi ảnh thông qua thuộc tính src, sau đó trình duyệt tải ảnh và hiển thị lên giao diện cho người dùng.

Nói đơn giản, nếu bạn muốn chèn hình minh họa vào bài viết, logo vào header, ảnh sản phẩm vào trang bán hàng, hoặc ảnh đại diện vào portfolio, bạn sẽ dùng thẻ img trong HTML.

Đây là một thẻ chèn ảnh HTML rất cơ bản. Người mới chỉ cần hiểu đúng hai việc:

• src cho trình duyệt biết ảnh nằm ở đâu.
• alt mô tả ảnh bằng văn bản khi cần.

Trong thực tế, thẻ này thường được dùng để:

• Chèn hình ảnh vào website.
• Hiển thị ảnh trong bài blog.
• Thêm ảnh sản phẩm, banner hoặc logo.
• Đưa ảnh minh họa vào trang giới thiệu cá nhân.

Điểm quan trọng là: <img> phù hợp khi hình ảnh là nội dung thực sự của trang, không chỉ là phần trang trí nền.

Thẻ <img> khác gì với ảnh nền CSS?

Nếu ảnh mang nội dung chính, bạn nên dùng <img>. Nếu ảnh chỉ để trang trí hoặc làm nền, bạn có thể dùng ảnh nền CSS.

<img> cũng phù hợp hơn cho accessibility hình ảnh vì có thể đi kèm alt. CSS background không thay thế tốt vai trò của ảnh nội dung.

Cú pháp thẻ <img> chuẩn và 2 thuộc tính quan trọng nhất

Cách sử dụng thẻ img trong HTML bắt đầu từ một cú pháp rất ngắn.

<img src="images/logo.png" alt="Logo công ty">

Đây là cú pháp thẻ img cơ bản nhất. Với người mới, bạn chỉ cần nhớ trước tiên hai thuộc tính quan trọng nhất là src và alt.

• src: Chỉ ra nguồn ảnh.
• alt: Cung cấp văn bản thay thế cho ảnh.

Nếu thiếu hoặc sai thuộc tính src, trình duyệt sẽ không tải được ảnh. Nếu bỏ thuộc tính alt, ảnh vẫn có thể hiện bình thường, nhưng trải nghiệm sử dụng và khả năng hỗ trợ người dùng sẽ kém hơn.

Trong cách sử dụng thẻ img trong HTML, đây là hai điểm cần ưu tiên:

• src giúp trình duyệt biết phải lấy ảnh từ đâu.
• alt giúp mô tả nội dung ảnh khi ảnh lỗi hoặc khi người dùng dùng công cụ đọc màn hình.

Ví dụ đầy đủ hơn:

<img src="images/san-pham.jpg" alt="Ảnh sản phẩm màu trắng">

Trong ví dụ này:

• images/san-pham.jpg là đường dẫn đến ảnh.
• Ảnh sản phẩm màu trắng là nội dung mô tả thay thế.

Đây là cách viết đúng, ngắn và đủ dùng cho hầu hết bài tập HTML cơ bản.

Thuộc tính src dùng để làm gì?

Thuộc tính src là nơi khai báo nguồn ảnh cho thẻ <img>. Nguồn này có thể là file ảnh trong thư mục dự án hoặc một URL từ internet. Nếu src sai, trình duyệt sẽ không tìm thấy ảnh và ảnh sẽ không hiển thị. Bạn có thể hiểu thuộc tính src là “địa chỉ của ảnh”.

Nó thường có 2 dạng:

• File ảnh nằm trong project.
• Link ảnh đầy đủ từ internet.

Ví dụ:

<img src="images/avatar.png" alt="Ảnh đại diện">

Ở đây, đường dẫn ảnh HTML là images/avatar.png. Lỗi phổ biến nhất của người mới không nằm ở thẻ <img>, mà ở phần file path này.

Thuộc tính alt có bắt buộc không?

Thuộc tính alt là văn bản thay thế mô tả nội dung của hình ảnh. Nó giúp người dùng hiểu ảnh nói về gì khi ảnh không tải được, đồng thời hỗ trợ screen reader đọc nội dung cho người không thể nhìn thấy ảnh. Với người mới, nên xem thuộc tính alt là phần gần như luôn cần có.

alt text hữu ích vì:

• Hiển thị ý nghĩa ảnh khi ảnh lỗi.
• Hỗ trợ truy cập hình ảnh.
• Giúp công cụ tìm kiếm hiểu ngữ cảnh ảnh tốt hơn ở mức cơ bản.

Ví dụ đúng:

<img src="images/meo.jpg" alt="Con mèo lông vàng đang nằm trên ghế">

Ví dụ chưa tốt:

<img src="images/meo.jpg" alt="image">

Nếu ảnh chỉ có tính trang trí, bạn có thể để:

<img src="images/decor-line.png" alt="">

title không thay thế được alt, và alt cũng không phải “mẹo thần kỳ” để lên top SEO. Nó chủ yếu giúp mô tả ảnh đúng hơn và cải thiện khả năng truy cập.

Cách chèn ảnh bằng thẻ <img> với ví dụ thực tế

Để chèn ảnh vào HTML, bạn chỉ cần đúng thẻ và đúng đường dẫn. Trong thực tế, người mới thường gặp 2 tình huống phổ biến nhất: Dùng ảnh trong thư mục project và dùng ảnh từ link internet.

Các bước cơ bản để chèn ảnh:

1. Chuẩn bị file ảnh hoặc link ảnh.
2. Xác định ảnh nằm trong project hay ngoài internet.
3. Viết thẻ <img>.
4. Điền đúng src.
5. Thêm alt rồi mở trình duyệt để kiểm tra.

Người mới thường nhầm ở phần đường dẫn ảnh HTML. Code có thể trông đúng, nhưng chỉ cần sai một thư mục hoặc sai tên file là ảnh không hiện.

Ví dụ 1: Chèn ảnh từ thư mục local

Nếu ảnh nằm trong project của bạn, hãy dùng ảnh local HTML với relative path (đường dẫn tương đối).

Ví dụ cấu trúc thư mục:

project/ ├── index.html └── images/ └── logo.png

Code:

<img src="images/logo.png" alt="Logo trang web">

Ở đây:

• File HTML là index.html
• Ảnh nằm trong thư mục images
• Path được tính từ file HTML hiện tại.

Đây là cách phổ biến nhất khi bạn tự quản lý ảnh trong dự án. Với relative path, chỉ cần nhớ ảnh nằm đâu so với file HTML thì viết đúng vị trí đó.

Ví dụ 2: Chèn ảnh từ link internet

Nếu ảnh nằm trên một website khác hoặc CDN, bạn dùng ảnh online HTML với absolute URL (đường dẫn tuyệt đối).

<img src="https://example.com/images/banner.jpg" alt="Banner giới thiệu sản phẩm">

Trong trường hợp này, src là một URL đầy đủ bắt đầu bằng http:// hoặc https://.

Cách này phù hợp khi:

• Ảnh đã được lưu trên máy chủ khác.
• Bạn dùng link CDN.
• Bạn cần nhúng ảnh có sẵn trên internet.

Tuy nhiên, có một rủi ro rõ ràng là nếu nguồn ngoài xóa ảnh, đổi link hoặc chặn truy cập, ảnh sẽ không hiển thị dù code của bạn không sai.

Đường dẫn tương đối và tuyệt đối: Hiểu sao cho dễ?

Đây là phần người mới hay nhầm nhất.

Mẹo nhớ nhanh:

• Ảnh trong project → Thường là đường dẫn tương đối.
• Ảnh từ internet → Thường là đường dẫn tuyệt đối.

Các thuộc tính thường dùng khác của thẻ <img>

Sau khi nắm src và alt, bạn chỉ cần biết thêm vài thuộc tính thẻ img HTML đủ dùng sau đây.

Nhóm thuộc tính này giúp ảnh hiển thị ổn hơn, dễ kiểm soát hơn và phù hợp hơn với thực tế làm web cơ bản.

Thuộc tính width và height

width và height dùng để khai báo kích thước ảnh. Chúng giúp trình duyệt dành sẵn không gian hiển thị trước khi ảnh tải xong, từ đó giảm hiện tượng layout shift.

<img src="images/banner.jpg" alt="Banner trang chủ" width="600" height="300">

Ý chính cần nhớ:

• Width và height giúp kiểm soát kích thước.
• Trình duyệt sắp bố cục ổn định hơn.
• Ảnh đỡ làm nội dung bị xô lệch khi tải.

Với người mới, đây là cách khai báo đơn giản và dễ áp dụng ngay.

Thuộc tính title có cần dùng không?

Thuộc tính title chỉ là thông tin bổ sung. Nó hiển thị một dòng gợi ý nhỏ khi người dùng di chuột vào ảnh.

<img src="images/logo.png" alt="Logo trang web" title="Trang chủ">

Bạn có thể dùng title img nhưng không bắt buộc. Quan trọng hơn, title không thay thế alt.

Thuộc tính loading="lazy" cho người mới

Loading lazy là cách trì hoãn tải ảnh cho đến khi ảnh sắp xuất hiện trên màn hình. Nói dễ hiểu, trình duyệt không cần tải ngay mọi ảnh ở cuối trang.

<img src="images/blog-1.jpg" alt="Ảnh minh họa bài viết" loading="lazy">

lazy loading ảnh phù hợp với:

• Ảnh ở phía dưới trang.
• Trang có nhiều ảnh.
• Trường hợp muốn tải trang ban đầu nhẹ hơn.

Với người mới, chỉ cần hiểu công dụng cơ bản như vậy là đủ.

Những lỗi thường gặp khi dùng thẻ <img> và cách xử lý

Nếu ảnh không hiển thị trong HTML, lỗi thường nằm ở vài điểm rất cơ bản. Đa số trường hợp, vấn đề không phải do bản thân thẻ <img>, mà do đường dẫn, tên file hoặc nguồn ảnh. Người mới hay có xu hướng đoán mò và sửa lung tung, nhưng cách đúng hơn là kiểm tra theo từng bước.

Checklist nhanh khi ảnh không hiện

Khi ảnh không hiển thị trong HTML, hãy kiểm tra:

• Tên file ảnh có đúng 100% không?
• File ảnh có nằm đúng thư mục không?
• Đuôi file có đúng như .jpg, .png, .webp không?
• Bạn đang dùng dấu / hay nhầm sang \?
• URL ảnh online có mở trực tiếp trên trình duyệt được không?
• Dấu ngoặc kép trong src có viết đúng không?

Đây là checklist debug img tag nhanh và hiệu quả nhất cho người mới.

Ví dụ sai path:

<img src="image/logo.png" alt="Logo">

Trong khi thư mục đúng lại là:

images/logo.png

Bạn nên nhớ rằng chỉ khác một chữ image và images là ảnh đã không hiện.

Lỗi phổ biến của người mới học HTML

Một số lỗi thẻ img rất hay gặp:

• Dùng path theo ổ đĩa cá nhân như C:\Users\...
• Copy link ảnh tạm thời, hết hạn sau một thời gian.
• Nhầm dấu \ với /
• Viết sai chữ hoa và chữ thường trong tên file.
• Gõ sai đuôi file như .PNG thành .png hoặc ngược lại trong môi trường phân biệt tên file.

Nhiều trường hợp ảnh không hiển thị chỉ vì nhầm lẫn giữa chữ hoa và chữ thường trong tên file. Đây là lỗi rất phổ biến khi triển khai code lên hosting hoặc server Linux.

Cách dùng thẻ <img> đúng hơn: Dễ đọc, chuẩn SEO và thân thiện accessibility

Một thẻ <img> tốt không chỉ hiển thị đúng, mà còn dễ hiểu hơn cho người dùng và công cụ tìm kiếm. Nói cách khác, dùng đúng không chỉ là “ảnh hiện ra”, mà còn là mô tả ảnh hợp lý và tối ưu file ở mức cơ bản. Với người mới, bạn chỉ cần quan tâm 3 việc:

• Viết alt text đúng nội dung.
• Đặt tên file ảnh rõ nghĩa.
• Chọn định dạng và dung lượng hợp lý.

Đây là phần liên quan đến SEO và khả năng truy cập hình ảnh nhưng chỉ ở mức cơ bản, không cần làm quá phức tạp.

Viết alt text thế nào cho đúng?

alt text nên mô tả đúng nội dung ảnh, ngắn gọn và tự nhiên. Không nên nhồi từ khóa hoặc viết mơ hồ.

Nguyên tắc đơn giản:

• Mô tả ảnh thật sự đang có gì.
• Viết ngắn, dễ hiểu.
• Không lặp từ khóa vô nghĩa.
• Ảnh trang trí có thể dùng alt=""

Ví dụ:

Mẹo tối ưu ảnh cơ bản cho website

Khi tối ưu ảnh HTML, bạn không cần bắt đầu bằng kỹ thuật nâng cao mà chỉ cần làm tốt các điểm cơ bản sau:

• Đặt tên file dễ hiểu, ví dụ logo-cong-ty.png thay vì IMG1234.png
• Nén ảnh vừa đủ để file nhẹ hơn
• Chọn định dạng phù hợp:
  • JPG cho ảnh chụp.
  • PNG khi cần nền trong suốt.
  • WebP khi muốn nhẹ hơn cho web.

Đây là các bước thực dụng nhất để hỗ trợ SEO hình ảnh ở mức nền tảng và giúp trang tải gọn hơn.

Ví dụ hoàn chỉnh: Chèn ảnh trong một trang HTML đơn giản

Nếu bạn muốn có một ví dụ thẻ img HTML có thể copy-paste ngay, dùng mẫu dưới đây:

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ thẻ img HTML</title> </head> <body> <h1>Chèn ảnh trong HTML</h1> <img src="images/logo.png" alt="Logo khóa học HTML cơ bản" width="300" height="180" loading="lazy" > </body> </html>

Điểm cần chú ý trong đoạn code img HTML này:

• src phải đúng với thư mục thực tế của bạn.
• alt nên mô tả rõ nội dung ảnh.
• width và height giúp bố cục ổn hơn.
• loading="lazy" phù hợp khi ảnh không cần tải ngay lập tức.

Khi test, hãy nhớ đổi images/logo.png theo đúng tên file và đúng thư mục trên máy của bạn.

Câu hỏi thường gặp

Thẻ <img> trong HTML là gì?

Thẻ <img> là phần tử dùng để hiển thị hình ảnh trực tiếp trên trang web. Nó là một thẻ tự đóng, sử dụng thuộc tính src để xác định nguồn file ảnh và alt để cung cấp văn bản thay thế, giúp trình duyệt hiểu và hiển thị nội dung hình ảnh một cách chính xác.

Cú pháp chuẩn của thẻ <img> như thế nào?

Cú pháp cơ bản của thẻ <img> rất đơn giản: <img src="đường-dẫn-ảnh" alt="mô-tả-ảnh">. Trong đó, src là đường dẫn đến file ảnh và alt là mô tả ngắn gọn về nội dung ảnh, giúp hỗ trợ khả năng tiếp cận và SEO cơ bản cho website của bạn.

Thuộc tính src và alt trong thẻ <img> khác nhau thế nào?

src (Source) là thuộc tính bắt buộc dùng để chỉ định vị trí file ảnh mà trình duyệt cần tải. alt (Alternative text) là thuộc tính mô tả nội dung ảnh, sẽ hiển thị nếu ảnh lỗi hoặc được đọc bởi phần mềm hỗ trợ người khiếm thị.

Tại sao ảnh không hiển thị trên trang web?

Ảnh thường không hiển thị do các lỗi phổ biến sau: Đường dẫn (src) sai vị trí file, tên file không khớp (bao gồm chữ hoa/thường), định dạng file không được hỗ trợ, hoặc link ảnh online đã hết hạn. Hãy kiểm tra kỹ lại đường dẫn và tên file trong mã nguồn của bạn.

Làm thế nào để chọn đường dẫn ảnh (src) cho đúng?

Bạn có hai cách: Sử dụng đường dẫn tương đối (ví dụ: images/hinh.jpg) nếu ảnh nằm cùng thư mục dự án, hoặc sử dụng đường dẫn tuyệt đối (URL đầy đủ) nếu ảnh được lấy từ website khác hoặc CDN. Luôn đảm bảo đường dẫn chính xác tuyệt đối để ảnh tải được.

Thuộc tính alt có bắt buộc phải dùng không?

Có, bạn nên luôn sử dụng thuộc tính alt cho mọi hình ảnh nội dung. Nó không chỉ hỗ trợ người dùng khiếm thị (accessibility) mà còn giúp Google hiểu rõ hơn về ngữ cảnh của hình ảnh, từ đó cải thiện hiệu suất SEO tổng thể cho trang web của bạn.

Xem thêm:

• Text/HTML Ratio là gì? Cách tối ưu tỷ lệ văn bản chuẩn SEO
• Thẻ meta Robots là gì? Cách cài đặt và tránh lỗi mất index
• Thẻ noindex là gì? Cách khắc phục trang không lên Google

Kết luận

Thẻ img trong HTML là cách cơ bản để hiển thị hình ảnh trên website. Nếu chỉ cần nhớ phần quan trọng nhất, hãy tập trung vào thuộc tính src và alt: src để chỉ nguồn ảnh, alt để mô tả ảnh khi cần. Trong thực tế, lỗi thường gặp nhất không nằm ở cú pháp, mà ở sai path, sai tên file, sai đuôi file hoặc dùng nhầm dấu /. Sau khi chèn được ảnh, bạn có thể cải thiện thêm bằng cách viết alt text rõ nghĩa, đặt tên file hợp lý và chọn định dạng ảnh phù hợp.