Thẻ img trong HTML: Hướng dẫn chèn ảnh vào web từ A-Z (2026)

Bạn đang loay hoay tìm cách đưa những hình ảnh đẹp mắt vào website của mình nhưng lại bối rối trước những dòng code khô khan? Việc sử dụng thẻ img trong HTML đúng cách chính là chìa khóa để biến trang web của bạn trở nên sống động và chuyên nghiệp hơn. Đừng lo, trong bài viết này, Da I Kin sẽ đồng hành cùng bạn tìm hiểu mọi ngóc ngách về thẻ , từ cú pháp cơ bản nhất đến các kỹ thuật tối ưu nâng cao để chèn ảnh vào web một cách hiệu quả nhất trong năm 2026.

Thẻ img trong HTML là gì?

Trước khi đi sâu vào cú pháp và các thuộc tính, chúng ta hãy cùng làm quen với “nhân vật chính” của ngày hôm nay. Hiểu rõ bản chất của thẻ sẽ giúp bạn sử dụng nó một cách tự tin và chính xác hơn rất nhiều.

Định nghĩa và vai trò của thẻ <img> trong việc hiển thị hình ảnh

Trong HTML, thẻ <img> (viết tắt của image) là một thẻ được sử dụng để nhúng một hình ảnh vào trang web. Hãy tưởng tượng nó như một chiếc khung tranh kỹ thuật số. Bản thân chiếc khung này không chứa hình ảnh, nhưng nó chỉ cho trình duyệt biết phải lấy hình ảnh từ đâu và hiển thị nó ở vị trí nào trên trang. Vai trò của nó cực kỳ quan trọng, bởi hình ảnh giúp truyền tải thông tin nhanh hơn, tăng tính thẩm mỹ và giữ chân người dùng ở lại trang lâu hơn.

Tại sao <img> là một thẻ rỗng (Empty Tag)?

Bạn có để ý rằng thẻ <img> không có thẻ đóng như </img> không? Đó là vì nó là một thẻ rỗng (empty tag). Không giống như thẻ <p> cần có nội dung văn bản ở giữa thẻ mở <p> và thẻ đóng </p>, thẻ <img> không bao bọc bất kỳ nội dung nào. Toàn bộ thông tin cần thiết để hiển thị hình ảnh (như nguồn ảnh, kích thước) đều được cung cấp thông qua các thuộc tính ngay bên trong chính thẻ đó. Nó là một chỉ thị độc lập và khép kín.

Các định dạng hình ảnh phổ biến mà HTML hỗ trợ

HTML rất linh hoạt và hỗ trợ nhiều định dạng ảnh khác nhau. Mỗi loại lại có ưu điểm riêng:

JPEG (.jpg, .jpeg): Lựa chọn tuyệt vời cho các bức ảnh có nhiều màu sắc và chi tiết.
PNG (.png): Hoàn hảo cho các hình ảnh cần nền trong suốt như logo, icon.
GIF (.gif): Thường được dùng cho các ảnh động đơn giản.
SVG (.svg): Dạng vector, có thể phóng to thu nhỏ mà không bị vỡ nét. Lý tưởng cho logo và biểu đồ.
WebP (.webp): Một định dạng hiện đại do Google phát triển, cho chất lượng ảnh tốt với dung lượng nhỏ hơn JPEG và PNG.

Làm thế nào để chèn một hình ảnh trong HTML?

Lý thuyết là vậy, giờ là lúc chúng ta bắt tay vào thực hành! Việc chèn ảnh vào HTML thực ra rất đơn giản khi bạn đã nắm vững cú pháp và cách chỉ định đường dẫn cho hình ảnh.

Cú pháp thẻ img chuẩn và ví dụ minh họa

Cú pháp cơ bản và đầy đủ nhất để chèn một hình ảnh luôn cần hai thuộc tính quan trọng: src (source) và alt (alternative text).

<img src="duong-dan-toi-hinh-anh.jpg" alt="Mo ta ve hinh anh">

Trong đó:

src: Chỉ định đường dẫn (URL) đến file hình ảnh bạn muốn hiển thị.
alt: Cung cấp một đoạn văn bản mô tả hình ảnh. Văn bản này sẽ hiển thị nếu ảnh bị lỗi không tải được và cực kỳ quan trọng cho SEO.

Ví dụ thực tế:

<!DOCTYPE html><html><head>    <title>Ví dụ về thẻ img</title></head><body>    <h1>Đây là một chú mèo con đáng yêu</h1>    <img src="images/meo-con.jpg" alt="Một chú mèo con tam thể đang nằm ngủ"></body></html>

Phân biệt đường dẫn hình ảnh tuyệt đối và tương đối

Đây là một khái niệm quan trọng mà nhiều người mới bắt đầu thường nhầm lẫn. Hiểu rõ nó sẽ giúp bạn tránh được lỗi ảnh không hiển thị.

Đường dẫn tuyệt đối (Absolute Path): Là một URL đầy đủ, bao gồm cả giao thức (http/https) và tên miền. Nó giống như địa chỉ đầy đủ của một ngôi nhà trên bản đồ thế giới. Bạn dùng đường dẫn này khi ảnh được lưu trữ trên một website khác.
Ví dụ: src="https://wiweb.vn/logo.png"
Đường dẫn tương đối (Relative Path): Là đường dẫn được tính từ vị trí của file HTML hiện tại. Nó giống như chỉ đường cho người hàng xóm: “Đi qua hai nhà là tới”. Đây là cách phổ biến nhất khi bạn quản lý ảnh trong cùng một dự án website.
Ví dụ: Giả sử file HTML của bạn ở thư mục gốc, và ảnh ở trong thư mục con tên là `images`. Đường dẫn sẽ là src="images/meo-con.jpg".

*Làm thế nào để chèn một hình ảnh trong HTML?*

Toàn bộ các thuộc tính của thẻ img bạn cần biết

Một thẻ `` không chỉ có `src` và `alt`. Để thực sự làm chủ nó và biết cách chèn ảnh vào website một cách chuyên nghiệp, bạn cần tìm hiểu thêm những thuộc tính quan trọng khác. Chúng giúp bạn kiểm soát hiển thị, cải thiện trải nghiệm người dùng và hỗ trợ SEO tốt hơn.

Thuộc tính src: Nguồn gốc của hình ảnh (Bắt buộc)

Như đã đề cập, src là thuộc tính bắt buộc, là linh hồn của thẻ <img>. Nếu thiếu thuộc tính này, trình duyệt sẽ không biết phải lấy ảnh từ đâu và sẽ chỉ hiển thị một biểu tượng ảnh bị hỏng. Giá trị của `src` chính là đường dẫn tuyệt đối hoặc tương đối tới file ảnh.

Thuộc tính alt: Văn bản thay thế cho SEO và khả năng truy cập

Đây là thuộc tính quan trọng thứ hai. Đừng bao giờ bỏ qua nó! Thuộc tính src và alt là bộ đôi không thể tách rời. Thuộc tính `alt` có hai vai trò chính:

Khả năng truy cập (Accessibility): Đối với những người dùng khiếm thị sử dụng trình đọc màn hình, nội dung của thuộc tính `alt` sẽ được đọc lên, giúp họ hiểu được nội dung của hình ảnh.
SEO (Tối ưu hóa công cụ tìm kiếm): Các công cụ tìm kiếm như Google không “nhìn” được hình ảnh. Chúng dựa vào văn bản trong thuộc tính `alt` để hiểu hình ảnh của bạn nói về điều gì, từ đó giúp xếp hạng hình ảnh trên Google Images và góp phần vào việc SEO tổng thể của trang.

Một văn bản `alt` tốt cần mô tả ngắn gọn và chính xác nội dung ảnh.
Ví dụ tệ: alt="ảnh 1"
Ví dụ tốt: alt="Laptop Macbook Pro đặt trên bàn làm việc bằng gỗ"

Thiết lập kích thước với thuộc tính width và height

Hai thuộc tính này cho phép bạn xác định chiều rộng (width) và chiều cao (height) của hình ảnh bằng đơn vị pixel.
<img src="logo.png" alt="Logo Da I Kin" width="200" height="50">
Việc khai báo `width` và `height` rất quan trọng. Nó giúp trình duyệt “dành chỗ” cho hình ảnh ngay cả khi ảnh chưa tải xong. Điều này ngăn chặn hiện tượng trang bị “nhảy” bố cục (Layout Shift) khi ảnh tải về, cải thiện đáng kể trải nghiệm người dùng.

Thêm chú thích khi di chuột với thuộc tính title

Thuộc tính `title` cung cấp thêm thông tin về hình ảnh. Khi người dùng di chuột qua ảnh, nội dung của `title` sẽ hiển thị dưới dạng một ô chú thích nhỏ (tooltip). Nó không quan trọng cho SEO như `alt`, nhưng có thể hữu ích để cung cấp thêm ngữ cảnh cho người xem.

<img src="bieu-do.png" alt="Biểu đồ tăng trưởng doanh thu quý 1" title="Doanh thu tăng 20% so với cùng kỳ năm ngoái">

*Toàn bộ các thuộc tính của thẻ img bạn cần biết*

Kỹ thuật nâng cao: Tối ưu thẻ img cho hiệu suất và Responsive

Khi bạn đã nắm vững những điều cơ bản, đã đến lúc nâng tầm kỹ năng của mình. Việc tối ưu thẻ img cho SEO và hiệu suất là một trong những yếu tố quan trọng nhất để tăng tốc website và cải thiện thứ hạng. Đây là những kỹ thuật hiện đại mà mọi lập trình viên web cần biết.

Sử dụng srcset để tạo hình ảnh đáp ứng (Responsive Images)

Trên các thiết bị khác nhau (di động, máy tính bảng, máy tính để bàn), màn hình có kích thước và độ phân giải khác nhau. Thuộc tính `srcset` cho phép bạn cung cấp một danh sách các phiên bản hình ảnh với kích thước khác nhau. Trình duyệt sẽ tự động chọn phiên bản phù hợp nhất để tải về, giúp tiết kiệm băng thông và tăng tốc độ tải trang trên thiết bị di động.

<img srcset="anh-nho.jpg 480w,             anh-trung-binh.jpg 800w,             anh-lon.jpg 1200w"     sizes="(max-width: 600px) 480px,            (max-width: 900px) 800px,            1200px"     src="anh-lon.jpg"     alt="Cô gái đang ngắm hoàng hôn trên biển">

Tăng tốc độ tải trang với thuộc tính loading=”lazy”

Đây là một thuộc tính cực kỳ mạnh mẽ. Thay vì tải tất cả hình ảnh trên trang ngay từ đầu, `loading=”lazy”` chỉ thị cho trình duyệt chỉ tải những hình ảnh khi chúng sắp xuất hiện trong khung nhìn của người dùng (tức là khi người dùng cuộn trang đến gần chúng). Kỹ thuật này được gọi là “tải lười” (lazy loading), giúp giảm đáng kể thời gian tải ban đầu của trang.

<img src="anh-o-cuoi-trang.jpg" alt="Mô tả ảnh" loading="lazy" width="600" height="400">

So sánh thẻ <img> và thẻ <picture>: Khi nào nên dùng?

Bên cạnh ``, HTML5 còn giới thiệu thẻ <picture>. Vậy chúng khác nhau ở đâu?

Hãy nghĩ đơn giản thế này:

Sử dụng <img> với `srcset` khi bạn muốn hiển thị cùng một hình ảnh nhưng ở các độ phân giải khác nhau cho các màn hình khác nhau (Resolution Switching).
Sử dụng <picture> khi bạn muốn hiển thị những hình ảnh hoàn toàn khác nhau tùy thuộc vào kích thước màn hình (Art Direction). Ví dụ, hiển thị ảnh toàn cảnh trên desktop, nhưng chỉ hiển thị ảnh cận mặt nhân vật chính trên di động.

<picture>   <source media="(min-width: 900px)" srcset="anh-toan-canh.jpg">   <source media="(min-width: 480px)" srcset="anh-can-canh.jpg">   <img src="anh-mac-dinh.jpg" alt="Mô tả chung cho các ảnh"></picture>

*Kỹ thuật nâng cao: Tối ưu thẻ img cho hiệu suất và Responsive*

Giải đáp các câu hỏi thường gặp (FAQ)

Dưới đây là một vài câu hỏi mà Da I Kin thường nhận được từ các bạn mới bắt đầu học cách chèn ảnh vào HTML. Chúng tôi đã tổng hợp và trả lời ngắn gọn để bạn tiện theo dõi.

Làm thế nào để căn giữa hình ảnh trong HTML bằng CSS?

Cách hiện đại và đơn giản nhất là đặt thẻ <img> vào trong một thẻ <div> và sử dụng CSS Flexbox. Đây là phương pháp linh hoạt và hiệu quả.

<!-- HTML --><div class="container">    <img src="hinh-anh.jpg" alt="Ảnh cần căn giữa"></div><!-- CSS --><style>    .container {        display: flex;        justify-content: center;    }</style>

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

Đây là vấn đề kinh điển. Hãy kiểm tra lại những nguyên nhân phổ biến sau:

Sai đường dẫn: Đây là lỗi thường gặp nhất. Hãy kiểm tra kỹ đường dẫn tương đối hoặc tuyệt đối trong thuộc tính `src`.
Lỗi chính tả: Tên file ảnh hoặc phần mở rộng (.jpg, .png) bị gõ sai.
File không tồn tại: Hình ảnh đã bị xóa hoặc di chuyển sang vị trí khác.
Vấn đề về quyền truy cập: Đôi khi file ảnh trên máy chủ không được cấp quyền để hiển thị công khai.

Tối ưu thẻ img có thực sự quan trọng cho SEO không?

Cực kỳ quan trọng. Google ngày càng coi trọng trải nghiệm người dùng và tốc độ tải trang. Tối ưu hình ảnh tác động trực tiếp đến cả hai yếu tố này:

Thuộc tính `alt` cung cấp ngữ cảnh cho công cụ tìm kiếm.
Tên file ảnh có chứa từ khóa (ví dụ: `the-img-trong-html.jpg`) cũng là một tín hiệu SEO.
Hình ảnh có dung lượng nhẹ và sử dụng `loading=”lazy”` giúp trang tải nhanh hơn, một yếu tố xếp hạng quan trọng.

Kết luận

Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về thẻ img trong HTML. Từ việc hiểu định nghĩa cơ bản, học cú pháp chuẩn, tìm hiểu các thuộc tính quan trọng như `src`, `alt`, `width`, `height`, cho đến các kỹ thuật tối ưu hóa hiện đại với `srcset` và `loading=”lazy”`. Việc chèn ảnh vào website không chỉ là sao chép một dòng code, mà đó là cả một nghệ thuật cân bằng giữa thẩm mỹ, hiệu suất và khả năng tiếp cận.

Trong tất cả các kỹ thuật trên, bạn thấy phần nào là thử thách nhất? Hãy chia sẻ cảm nhận của bạn với Da I Kin ở phần bình luận bên dưới nhé! Nếu việc tối ưu hình ảnh và xây dựng website khiến bạn đau đầu, đừng ngần ngại nhắn tin cho Da I Kin. Chúng tôi luôn sẵn sàng đồng hành cùng bạn trên con đường xây dựng một trang web chuyên nghiệp và hiệu quả.

Thẻ img trong HTML: Hướng dẫn chèn ảnh vào web từ A-Z (2026)