html5 image media

📚 Seri Belajar HTML5 — Artikel 4 dari 13

Gambar & Media: Menyisipkan Foto, Video, dan Audio ke Halaman Web

Pelajari cara menggunakan tag <img>, <video>, dan <audio> HTML5 untuk menghidupkan halaman web kamu dari nol.

#TagImg #VideoHTML #AudioHTML #HTML5 #MediaWeb

⏱️ Estimasi Baca: 10–13 menit

🎯 Level: Pemula Mutlak

📅 Diperbarui: 2026

Pernah nggak kamu membuka website yang isinya cuma teks polos semua — kayak baca dokumen Word tahun 2001? Betul, membosankan banget. Nah, inilah alasan kenapa memahami cara menyisipkan gambar HTML5 itu bukan sekadar skill opsional — ini adalah fondasi visual sebuah halaman web yang hidup dan menarik.

Di artikel ke-4 dari Seri Belajar HTML5 From Zero to Zorro — 13 Artikel ini, kita akan belajar tiga media paling penting dalam dunia web: gambar, video, dan audio. Ketiganya punya tag HTML5 masing-masing, dan kamu akan kuasai semuanya hari ini — dijamin lewat praktik langsung, bukan teori kosong.

Siap bikin halamanmu lebih kaya visual? Yuk mulai! 🚀

🖼️ Cara Menyisipkan Gambar HTML5 dengan Tag <img>

Bayangkan halaman web kamu itu seperti majalah. Tanpa foto, majalah itu terasa datar — nggak ada yang bikin mata berhenti scroll. Di HTML5, cara menyisipkan gambar dilakukan dengan satu tag sederhana: <img>.

📐 Formula Utama

Tag <img> adalah self-closing tag — artinya tidak butuh tag penutup. Ia punya dua atribut wajib yang harus selalu ada:

• src — alamat/path file gambar (bisa URL atau nama file lokal)
• alt — teks alternatif jika gambar gagal tampil (juga penting untuk SEO & aksesibilitas)

Mari kita lihat praktiknya langkah demi langkah:

1

Simpan file gambar di folder yang sama dengan file HTML kamu

Misalnya, simpan file bernama kucing.jpg di folder yang sama dengan index.html.

2

Tulis tag <img> di dalam body HTML kamu

Tambahkan atribut src dan alt di dalam tag tersebut.

3

Atur ukuran gambar dengan atribut width dan height (opsional tapi disarankan)

Ini mencegah halaman "melompat" saat gambar sedang loading — istilahnya Cumulative Layout Shift (CLS).

index.html

HTML5

<!-- Gambar dari file lokal -->
<img src="kucing.jpg"
     alt="Foto kucing oranye sedang tidur"
     width="600"
     height="400">

<!-- Gambar dari URL internet -->
<img src="https://example.com/foto.jpg"
     alt="Deskripsi foto dari internet"
     width="800"
     height="450">

<!-- Gambar responsif dengan CSS -->
<img src="banner.png"
     alt="Banner halaman utama"
     style="max-width: 100%; height: auto;">

💡 Tips Alt Text SEO-Friendly

Atribut alt bukan cuma basa-basi! Google menggunakannya untuk memahami isi gambar kamu. Tulis deskripsi yang jelas dan spesifik. Jangan: "foto1.jpg". Yang benar: "Resep nasi goreng kampung dengan telur mata sapi dan kerupuk".

📋 Atribut Penting Tag <img>

Atribut	Wajib?	Fungsi	Contoh Nilai
src	✅ Ya	Sumber/alamat file gambar	"foto.jpg"
alt	✅ Ya	Teks alternatif & aksesibilitas	"Deskripsi gambar"
width	Opsional	Lebar gambar (piksel)	"600"
height	Opsional	Tinggi gambar (piksel)	"400"
loading	Opsional	Lazy load untuk performa	"lazy"

🔥 Fakta Menarik

Menurut data HTTP Archive, rata-rata halaman web di internet berisi lebih dari 900 KB gambar — lebih dari separuh total ukuran halaman! Artinya, mengoptimalkan gambar (format WebP, lazy loading) langsung berdampak besar pada kecepatan sitemu.

🎬 Tag Video HTML5: Menyematkan Video Tanpa Plugin

Ingat jaman dulu harus install Flash Player buat nonton video di website? Syukurlah era itu sudah berakhir. HTML5 hadir dengan tag <video> yang memungkinkan kamu memutar video langsung di browser — tanpa plugin apapun!

Analoginya sederhana: kalau tag <img> itu seperti memasang foto di bingkai, maka tag <video> itu seperti memasang TV layar datar di dinding ruang tamumu — lengkap dengan remote control (kontrol play/pause/volume).

📐 Anatomi Tag <video>

Tag <video> berbeda dari <img> — ia punya tag pembuka dan penutup, serta mendukung tag <source> di dalamnya untuk mendukung berbagai format video sekaligus.

• controls — menampilkan tombol play, pause, volume, dan fullscreen
• autoplay — video langsung putar saat halaman dibuka (gunakan dengan bijak!)
• loop — video berulang terus menerus
• muted — video tanpa suara (wajib jika autoplay di browser modern)
• poster — gambar thumbnail sebelum video diputar

video-example.html

HTML5

<!-- Video dasar dengan kontrol -->
<video width="640" height="360"
       controls
       poster="thumbnail.jpg">

  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">

  <!-- Teks ini muncul jika browser tidak support -->
  Browser kamu tidak mendukung tag video HTML5.
</video>

<!-- Video autoplay untuk background (muted wajib!) -->
<video autoplay loop muted
       style="width: 100%; height: auto;">
  <source src="background.mp4" type="video/mp4">
</video>

⚠️ Perhatian: Autoplay Browser Policy

Sejak tahun 2018, hampir semua browser modern (Chrome, Firefox, Safari) memblokir video yang autoplay dengan suara. Agar autoplay berjalan, kamu wajib menambahkan atribut muted bersamanya. Ini kebijakan browser, bukan bug HTML5 kamu!

⚡ Format Video: Pilih yang Mana?

🎥

MP4 (H.264)

Format paling kompatibel. Gunakan ini sebagai pilihan utama.

🌐

WebM (VP9)

Ukuran lebih kecil, kualitas lebih baik. Didukung Chrome & Firefox.

🍎

OGV (Theora)

Open source, namun kualitas kalah dari dua format di atas.

💡 Best practice: sertakan minimal MP4 + WebM menggunakan dua tag <source> agar semua browser tertangani.

🎵 Tag Audio HTML5: Menyisipkan Musik dan Suara di Web

Kalau tag <video> itu seperti TV, maka tag <audio> itu seperti radio atau speaker bluetooth yang bisa kamu embed langsung di halaman web. Kegunaannya luas: dari background music, efek suara game, podcast, hingga audio tutorial.

Yang menarik, sintaks tag <audio> HTML5 hampir identik dengan <video> — bedanya hanya tidak ada atribut poster dan width/height karena audio memang tidak punya tampilan visual.

1

Siapkan file audio dalam format yang didukung browser

Format yang aman: MP3 (paling kompatibel), WAV (kualitas terbaik, ukuran besar), OGG (open source, ukuran kecil).

2

Gunakan tag <audio> dengan atribut controls

Tanpa atribut controls, player audio tidak akan tampil dan pengguna tidak bisa berinteraksi.

3

Sertakan multiple <source> untuk fallback format

Browser akan memilih format yang pertama kali bisa ia putar, dari atas ke bawah. Ini strategi "graceful degradation" yang profesional.

audio-example.html

HTML5

<!-- Audio player dasar -->
<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
  <source src="lagu.ogg" type="audio/ogg">
  Browser kamu tidak mendukung audio HTML5.
</audio>

<!-- Audio autoplay + loop (misal: background music) -->
<audio autoplay loop muted>
  <source src="ambient.mp3" type="audio/mpeg">
</audio>

<!-- Audio dengan preload untuk performa -->
<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

⚡ Insight: Atribut preload

Atribut preload punya tiga nilai yang perlu kamu pahami: none (jangan load dulu sampai diklik), metadata (load info durasi/codec saja), dan auto (load seluruh file). Untuk podcast panjang, gunakan metadata agar tidak boros data pengunjung!

🔗 Bonus: Menyematkan Video YouTube dan Tag <figure>

Selain meng-host file video sendiri (yang bisa mahal dan berat), cara paling populer dan efisien adalah menyematkan video langsung dari YouTube menggunakan tag <iframe>. Ini juga teknik yang digunakan hampir 90% website di seluruh dunia untuk menyematkan konten video.

embed-youtube.html

HTML5 + iframe

<!-- Embed video YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Judul Video Tutorial HTML5"
  frameborder="0"
  allowfullscreen>
</iframe>

<!-- Gambar dengan keterangan menggunakan <figure> -->
<figure>
  <img src="diagram-html.png"
       alt="Diagram struktur tag HTML5"
       width="600" height="400">
  <figcaption>Gambar 1: Diagram lengkap struktur HTML5</figcaption>
</figure>

💡 Tips: Gunakan <figure> dan <figcaption>

Tag <figure> dan <figcaption> adalah pasangan semantik HTML5 untuk gambar beserta keterangannya. Ini jauh lebih baik dari sekadar meletakkan teks di bawah tag <img> biasa — Google pun memahaminya sebagai satu unit konten yang bermakna.

🎉

Kesimpulan: Web Tanpa Media Itu Seperti Film Bisu

Di artikel ini kamu sudah menguasai tiga kekuatan visual HTML5 yang akan mengubah halaman web dari sekadar teks jadi pengalaman yang hidup dan interaktif:

🖼️

Tag <img> — cara menyisipkan gambar HTML5

Atribut src & alt wajib, gunakan width/height untuk mencegah layout shift.

🎬

Tag <video> — embed video langsung tanpa plugin

Gunakan multiple <source> (MP4+WebM), dan muted jika autoplay.

🎵

Tag <audio> — player audio yang mudah dikustomisasi

Sertakan format MP3 + OGG, gunakan preload="metadata" untuk hemat data.

Ini adalah bagian dari perjalanan panjang Seri Belajar HTML5 From Zero to Zorro — 13 Artikel. Artikel berikutnya kita akan masuk ke dunia tabel data yang terstruktur — siap-siap!

💬 Punya pertanyaan tentang tag video audio HTML5? Tulis di kolom komentar di bawah!

💬 Tinggalkan Komentar 📤 Share Artikel Ini

🏷️ Tags Artikel

#HTML #HTML5 #TagImg #VideoHTML #AudioHTML #Media #BelajarHTML

📚

Indeks Lengkap Seri

HTML5 From Zero to Zorro — 13 Artikel

Lihat semua topik dan navigasi antar artikel di halaman indeks utama →

🧭 Navigasi Seri Artikel

← Artikel Sebelumnya

Artikel 3 dari 13

Daftar & Tautan: Bikin Navigasi & List yang Rapi

Artikel Selanjutnya →

Artikel 5 dari 13

Tabel Data: Menyajikan Informasi Terstruktur dengan Tag Table HTML5