Ảnh, âm thanh, video và khung nội dung

Tư liệu cần giúp người đọc hiểu

Một ảnh có chú thích đúng hoặc video ngắn có thể làm rõ hoạt động. Trước khi chèn, chọn tệp được phép dùng và kích thước phù hợp; không thêm media chỉ để trang trông đầy hơn.

Chọn đúng phần tử

img chèn ảnh với src và văn bản thay thế alt. audio/video chèn âm thanh/phim; controls yêu cầu trình duyệt hiển thị bộ điều khiển. iframe nhúng tài liệu khác, nên có title mô tả. Một website có thể chặn việc nhúng; đường dẫn đúng chưa bảo đảm iframe hiển thị. Ảnh có thông tin cần alt mô tả ý nghĩa; ảnh thuần trang trí có thể dùng alt rỗng. Không coi alt là dòng chú thích chắc chắn luôn hiển thị dưới ảnh. Chú thích nhìn thấy có thể đặt bằng figure/figcaption. Giữ tỉ lệ ảnh, tránh ép cả rộng và cao sai tỉ lệ. Tự động phát có thể bị trình duyệt chặn và dễ làm phiền.

Chèn ảnh có chú thích

```html <figure> <img src="anh/san-truong.jpg" alt="Góc đọc sách dưới cây trong sân trường" width="400"> <figcaption>Góc đọc sách của câu lạc bộ.</figcaption> </figure> ``` src tìm tệp ảnh; alt giúp truyền ý nghĩa khi ảnh không được nhìn thấy; figcaption là chú thích trong nội dung.

Thử vận dụng

Thuộc tính nào bật bộ điều khiển phát/dừng của video?

AhrefBcontrolsCrowspanDcharset

Chèn một đoạn phim

```html <video controls width="400"> <source src="media/gioi-thieu.mp4" type="video/mp4"> Trình duyệt không hỗ trợ video này. </video> ``` Trình duyệt còn cần hỗ trợ định dạng/mã hóa của tệp. Có controls không chứng minh tệp đã tải đúng; cần thử mở và phát.

Ví dụ xem cách làm

Ảnh không hiện nhưng chữ vẫn hiện. Nêu hai điều nên kiểm tra.

Ví dụ xem cách làm

Viết iframe nhúng trang gioi-thieu.html cùng thư mục với title phù hợp.

Những điều cần nhớ

Chọn đúng phần tử và thử tài nguyên thực tế. Đường dẫn, quyền sử dụng, khả năng hỗ trợ và nội dung thay thế đều ảnh hưởng trải nghiệm đọc.