Images · Hình ảnh
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
English
Images
- Show a picture with the
<img>tag. <img>is a single tag — no closing tag, like<br>.- It needs two attributes:
src(where the picture is) andalt(a description).
Tiếng Việt
Hình ảnh
- Hiển thị hình ảnh bằng thẻ
<img>. <img>là một thẻ đơn — không có thẻ đóng, giống như<br>.- Nó cần hai thuộc tính:
src(vị trí của hình ảnh) vàalt(mô tả).
<img src="/static/code/web-basics/cat.svg" alt="A cartoon cat">
English
Why alt text matters
altis text that describes the picture.- It shows if the image cannot load, and screen readers read it aloud.
- Always add a short, clear
alt— it makes your page kinder to everyone.
Tiếng Việt
Tại sao văn bản thay thế (alt text) lại quan trọng
altlà văn bản mô tả hình ảnh.- Nó xuất hiện nếu hình ảnh không tải được, và máy đọc màn hình đọc to nội dung này.
- Luôn thêm một
altngắn gọn, rõ ràng — nó giúp trang web thân thiện hơn với mọi người.
English
Common mistakes
- An image needs
src(the file) andalt(a description). <img>has no separate closing tag.
Tiếng Việt
Lỗi thường gặp
- Một hình ảnh cần
src(tệp tin) vàalt(phần mô tả). <img>không có thẻ đóng riêng biệt.
English
Now you try
- The picture lives at
/static/code/web-basics/cat.svg. - Show it, then add
alttext to an image.
Tiếng Việt
Bây giờ bạn thử
- Hình ảnh nằm ở
/static/code/web-basics/cat.svg. - Hiển thị nó, sau đó thêm văn bản
altcho hình ảnh.
Show the cat picture. Add an <img> with src="/static/code/web-basics/cat.svg". · Hiển thị hình ảnh con mèo. Thêm <img> với src="/static/code/web-basics/cat.svg".
This image has no description. Add an alt attribute that describes it, like alt="A cartoon cat". · Hình ảnh này không có mô tả. Thêm một thuộc tính alt để mô tả nó, ví dụ như alt="A cartoon cat".