Bạn sẽ đưa một hình vào trang bài viết, viết alt phù hợp với mục đích của hình và thêm chú thích. Bài học cũng giúp phân biệt ảnh nội dung với ảnh chỉ phục vụ trang trí.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Ảnh mang thông tin gì trong bài?

Website đang có ba trang. Ta dùng một sơ đồ cho thấy trang chủ liên kết tới bài viết và liên hệ. Vì sơ đồ truyền đạt thông tin, nó là nội dung của bài; img phù hợp hơn việc giấu toàn bộ thông tin vào ảnh nền CSS.

Trước khi chèn hình, kiểm tra bạn có quyền sử dụng và lưu tệp vào thư mục images. Ảnh tự tạo hoặc có giấy phép phù hợp giúp tránh phụ thuộc vào một URL bên ngoài có thể thay đổi. Trong bộ ví dụ, sơ đồ được tạo riêng cho giáo trình.

src là địa chỉ, alt là nội dung thay thế

src cho biết nơi lấy tệp ảnh. alt cung cấp văn bản thay thế phù hợp khi ảnh không được hiển thị hoặc được tiếp cận qua công cụ hỗ trợ. Alt tốt phụ thuộc ngữ cảnh: với sơ đồ này, hãy diễn tả quan hệ ba trang thay vì chỉ ghi “ảnh HTML”.

Nếu hình chỉ trang trí và không mang thông tin bổ sung, alt=”” thường phù hợp. Nếu ảnh là nội dung duy nhất của một liên kết, alt cần giúp người đọc hiểu mục đích liên kết. Không nên bỏ alt hoặc viết một đoạn nhồi từ khóa chỉ để làm SEO.

Kích thước và khoảng không hiển thị

width và height mô tả kích thước ảnh để trình duyệt có thể dự trù tỷ lệ. CSS max-width:100% và height:auto giúp ảnh co lại trong một vùng hẹp; khai báo viewport không tự xử lý mọi ảnh lớn.

Ảnh tải chậm ở phía dưới trang có thể dùng loading=”lazy”. Không nên mặc định lazy-load ảnh quan trọng xuất hiện ngay đầu trang vì có thể làm nội dung chính xuất hiện muộn. Đừng kéo một tệp rất lớn về chỉ để hiển thị một hình thu nhỏ nếu có thể chuẩn bị kích thước phù hợp.

figure và figcaption giải quyết việc gì?

figure nhóm một nội dung độc lập với chú thích, ví dụ hình, biểu đồ hoặc đoạn mã. figcaption là chú thích nhìn thấy được. Chú thích không mặc nhiên thay thế alt: một cái giải thích nội dung cho mọi người, cái kia thay thế ảnh trong ngữ cảnh cần thiết.

Không phải mọi img đều bắt buộc nằm trong figure. Ảnh đại diện nhỏ trong một đoạn nội dung có thể không cần một chú thích riêng. Hãy dùng phần tử vì quan hệ nội dung, không vì muốn bọc thêm thẻ.

Đọc thêm khi thật sự cần ảnh responsive

srcset và sizes giúp trình duyệt chọn tài nguyên theo điều kiện hiển thị; picture có thể dùng cho hướng trình bày ảnh khác nhau hoặc lựa chọn định dạng. Chúng không thay thế việc chuẩn bị các tệp nguồn phù hợp.

Ở bài này, hãy làm đúng ảnh đơn trước: đường dẫn đúng, alt có nghĩa, tỷ lệ không méo và ảnh không tràn trang. Khi bạn đã xác định kích thước ảnh trong bố cục CSS, việc học sizes sẽ có ngữ cảnh rõ hơn.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<figure>
  <img src="images/goc-hoc-web.png"
       alt="Sơ đồ ba trang: Trang chủ liên kết tới Bài viết và Liên hệ"
       width="960" height="480">
  <figcaption>Cấu trúc website Góc học web.</figcaption>
</figure>

Kết quả hiển thị

Bạn thấy sơ đồ ba trang và chú thích phía dưới. Khi đổi src sang tên không tồn tại, trình duyệt có thể hiển thị alt; cách đọc của công cụ hỗ trợ cũng dựa vào văn bản thay thế phù hợp.

Mở ví dụ bài 06 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Chép đường dẫn tệp cá nhân: đặt ảnh trong thư mục dự án và dùng đường dẫn web.
• Viết alt giống nhau cho mọi hình: mô tả theo mục đích từng hình.
• Đặt cả width và height tùy ý làm méo ảnh: giữ tỷ lệ phù hợp.

Tự kiểm tra

• Viết alt cho cùng một hình nếu nó chỉ là hình trang trí ở đầu trang.
• Đổi tên tệp ảnh rồi xác định vì sao đường dẫn cũ không còn đúng.

Tra cứu khi cần

• Cách dùng thẻ img trong HTML và các thuộc tính của img
• Thẻ figure trong HTML
• Thẻ figcaption trong HTML
• Thẻ picture trong HTML

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu