Materi
Gambar dipasang dengan elemen img. Elemen ini tidak punya tag penutup karena tidak membungkus isi apa pun; semua keterangannya ada di atribut. Atribut src berisi alamat berkas gambar, dan alamat itu mengikuti aturan yang sama dengan href: bisa absolut, relatif ke folder, atau dihitung dari akar situs.
<img src="/img/coding-clay.webp" alt="Layar komputer menampilkan kode berwarna" width="320" height="240">
<img src="/img/hiasan.webp" alt="" width="64" height="64">Atribut alt berisi teks yang menggantikan gambar saat gambar tidak tampil, dan teks itulah yang dibacakan pembaca layar. Isinya ditentukan oleh fungsi gambar, bukan oleh isi berkasnya. Gambar yang menyampaikan keterangan diberi alt yang menyebutkan keterangan itu; gambar yang hanya hiasan diberi alt kosong, ditulis sebagai dua tanda kutip tanpa isi, supaya pembaca layar melewatinya.
Atribut width dan height diisi ukuran asli gambar dalam piksel. Browser memakai kedua angka itu untuk menyiapkan ruang sebelum berkasnya selesai diunduh, sehingga teks di bawah gambar tidak melompat saat gambar muncul.
Keterangan yang ikut terlihat di bawah gambar ditulis dengan figcaption di dalam figure. Kedua elemen itu mengikat keterangan pada gambarnya, sehingga pembaca layar menyebut gambar dan keterangannya sebagai satu kesatuan, bukan dua hal yang kebetulan bersebelahan. Keterangan figcaption tidak menggantikan alt: figcaption dibaca semua pengunjung dan menambah keterangan, sedangkan alt hanya muncul menggantikan gambar yang tidak tampil atau tidak terlihat.
