Pentingnya Element Image Pada HTML

Elemen <img> dalam HTML digunakan untuk memasukan gambar ke dalam halaman web. ini merupakan salah satu elemen yang sangat sering digunakan karena memungkinkan pengguna untuk menampilkan visual seperti foto, ilustrasi, ikon, atau grafik lainnya secara langsung di dalam halaman web tanpa memerlukan plugin tambahan.

Secara sintaksis, elemen <img> adalah elemen kosong (self-closing tag), yang berarti tidak memerlukan tag penutup. Berikut adalah struktur dasar penggunaan elemen <img>:

<img src="url_gambar" alt="deskripsi gambar">

Jenis Atribut YangDigunakan Pada Elemen <img>

src (source)

Atribut src adalah atribut wajib yang menentukan sumber gambar. Nilai dari atribut ini bisa berupa URL gambar yang dapat berada di server lokal atau server eksternal. contoh:

<img src="gambar.jpg" alt="Sebuah gambar contoh">

alt (alternative text)

Atribut alt digunakan untuk memberikan deskripsi teks yang menggantikan gambar jika gambar tidak dapat ditampilkan (misalnya, jika gambar tidak ditemukan atau pada perangkat dengan pembaca layar untuk aksesibilitas). Deskripsi ini juga berguna untuk SEO dan meningkatkan pengalaman pengguna.contoh:

<img src="logo.png" alt="Logo Perusahaan XYZ">

width dan height

Atribut width dan height digunakan untuk mengatur ukuran gambar yang ditampilkan di halaman web. Nilai ini biasanya diukur dalam piksel. Pengaturan ukuran gambar dapat membantu mengoptimalkan tampilan gambar di berbagai perangkat.contoh:

<img src="foto.jpg" alt="Gambar Pemandangan" width="600" height="400">

title

Atribut title memberikan informasi tambahan yang muncul ketika pengguna mengarahkan kursor mouse ke gambar. Ini memberikan konteks lebih lanjut atau informasi tambahan tentang gambar.contoh:

<img src="ikon.png" alt="Ikon Beranda" title="Klik untuk menuju beranda">

loading

Atribut loading digunakan untuk menentukan bagaimana gambar akan dimuat di halaman web. Nilai umum untuk atribut ini adalah lazy, yang memungkinkan gambar dimuat hanya ketika gambar akan terlihat di layar (lazy loading), sehingga meningkatkan kecepatan pemuatan halaman. contoh:

<img src="gambar.jpg" alt="Gambar Pemrograman" loading="lazy">

Aksesibilitas dan SEO

Penggunaan atribut alt yang benar sangat penting untuk aksesibilitas. Bagi pengguna yang mengandalkan pembaca layar (screen reader), teks dalam atribut alt akan dibaca, memberikan konteks visual yang tidak bisa mereka lihat. Selain itu, deskripsi yang baik pada gambar juga dapat membantu gambar tersebut ditemukan dalam pencarian gambar di mesin pencari. contoh Penggunaan Elemen <img>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Gambar</title>
</head>
<body>
    <h1>Selamat datang di halaman kami</h1>
    <p>Berikut adalah gambar pemandangan alam:</p>
    <img src="pemandangan.jpg" alt="Pemandangan alam dengan pegunungan dan danau" width="8

00" height="600">
    <p>Gambar ini menunjukkan keindahan alam pegunungan yang menakjubkan.</p>
</body>
</html>

Pada contoh di atas, gambar pemandangan.jpg akan ditampilkan dengan ukuran 800x600 piksel. Jika gambar tidak dapat dimuat, deskripsi yang ada di atribut alt akan memberikan informasi tentang gambar tersebut.

Lihat juga : Element Heading HTML

Element Paragraf

Komentar Pada HTML

Element Main Pada HTML

Konsep Nesting Serta Pentingnya Didalam HTML