Kita telah menyematkan gambar, audio, dan video — resource yang dibaca browser sebagai satu media tunggal. Tantangan lain muncul saat yang disematkan justru halaman HTML utuh: peta interaktif, pemutar video streaming, atau widget pihak ketiga. Untuk kebutuhan itu, HTML menyediakan elemen iframe, yaitu dokumen yang berjalan di dalam dokumen. Chapter ini membedah cara kerjanya, atribut pentingnya, biaya performanya, dan pola fallback terkininya.

Dokumen di Dalam Dokumen #

Elemen iframe mewakili sebuah nested browsing context, yaitu konteks penelusuran yang bersarang di dalam halaman pemiliknya. Browser tidak menggabungkan dua dokumen menjadi satu: dokumen sematan memiliki DOM, URL, dan proses pemuatan sendiri. Tiga atribut membentuk dasarnya: src berisi alamat dokumen, sedangkan width dan height menentukan ukuran area dalam piksel.

html 
<iframe src="peta-warung.html" title="Peta lokasi warung Siti" width="420" height="260"></iframe>

Output yang Dihasilkan:

text 
Browser menampilkan jendela kecil 420x260 di dalam halaman;
di dalamnya tergambar dokumen peta-warung.html yang utuh,
lengkap dengan struktur HTML-nya sendiri.

Mari kita telaah perannya:

  1. src="peta-warung.html": alamat dokumen yang disematkan; browser mengirim permintaan terpisah untuk file ini.
  2. title="Peta lokasi warung Siti": nama iframe bagi assistive technology; dibahas di chapter berikutnya.
  3. width dan height: ukuran area dalam piksel; tanpa keduanya, ukuran bawaan 300x150 dipakai.
  4. Konten kosong: standar menetapkan iframe tidak boleh berisi apa pun; elemen ditulis kosong di antara tag pembuka dan penutupnya.

Iframe ke URL Eksternal #

Sebagian besar iframe di web sematannya berasal dari origin lain: layanan peta, platform video, dan penyedia widget menyiapkan halaman khusus untuk disematkan, dan kita cukup mengarahkan src ke URL halaman tersebut. Parameter pada URL, seperti koordinat atau id video, mengatur apa yang ditampilkan. Karena sematannya milik layanan lain, pembaruan tampilan dan perilakunya di luar kendali HTML kita.

html 
<iframe
  src="www.example.com/peta?koordinat=-6.2146,106.8451&amp;zoom=15"
  title="Peta lokasi Toko Bunga Melati"
  width="420" height="260"
  loading="lazy"></iframe>

Output yang Dihasilkan:

text 
Area 420x260 menampilkan peta interaktif dari layanan peta;
pengunjung dapat menggeser dan memperbesar peta di dalamnya.

Pola ini paling sering dipakai untuk:

  • peta: URL sematan dengan parameter koordinat;
  • video platform: pemutar dengan kontrol bawaan platformnya;
  • konten pihak ketiga: formulir survei, widget jadwal, panel komentar.

Tanda & pada URL ditulis &amp; karena berada di dalam atribut, sesuai aturan character reference pada chapter Karakter Khusus HTML.

Ukuran dan Lazy Loading #

Atribut loading juga berlaku pada iframe, dengan perilaku yang sama seperti pada img. Nilai eager (bawaan) memuat dokumen sematan segera saat halaman dibuka, sedangkan lazy menundanya sampai pengunjung mendekati area iframe. Browser menghitung jarak iframe ke viewport, lalu baru mengirim permintaan saat ambang itu terlewati; widget di bagian bawah halaman paling diuntungkan oleh nilai lazy.

Biaya Performa Iframe #

Setiap iframe adalah dokumen penuh: HTML-nya diurai, CSS-nya diterapkan, dan skripnya dijalankan di dalam konteks tersendiri. Lima iframe berarti lima pemuatan dokumen; event load halaman induk baru terpicu setelah semua iframe tanpa lazy selesai. Karena itu, batasi jumlah iframe, tetapkan width dan heightnya, dan tambahkan loading="lazy" untuk yang berada jauh di bawah layar.

Fallback Bila Konten Gagal Tampil #

Versi HTML terdahulu mengizinkan teks fallback di antara tag iframe untuk browser yang tidak mendukungnya. Standar saat ini menetapkan content model iframe adalah nothing: elemen tersebut tidak boleh berisi teks maupun elemen lain; validator menandai pelanggarannya sebagai error. Pola yang dipakai kini adalah menyediakan tautan cadangan di luar iframe, tepat di bawahnya:

html 
<iframe src="peta-warung.html" title="Peta lokasi warung Siti" width="420" height="260"></iframe>
<p>Pratinjau gagal tampil? <a href="peta-warung.html">Buka peta sebagai halaman penuh</a>.</p>

Contoh Lengkap dalam Satu File #

File berikut merangkum pola-pola di atas: satu iframe ke dokumen lokal, satu iframe ke URL pihak ketiga dengan lazy loading, dan tautan cadangan; dokumen kecil peta-warung.html yang menjadi sematannya juga disertakan:

html contoh-iframe.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kunjungi Warung Siti</title>
</head>
<body>
  <h1>Kunjungi warung Siti</h1>
  <p>Warung Siti menyajikan soto ayam di Jl. Melati No. 10, Bandung.</p>
  <iframe src="peta-warung.html" title="Peta lokasi warung Siti" width="420" height="260"></iframe>
  <p>Pratinjau gagal tampil? <a href="peta-warung.html">Buka peta sebagai halaman penuh</a>.</p>
  <h2>Video tur warung</h2>
  <iframe src="www.example.com/embed/video-tur-warung?w=420" title="Video tur warung Siti" width="420" height="236" loading="lazy"></iframe>
</body>
</html>
html peta-warung.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Peta Warung Siti</title>
</head>
<body>
  <h1>Peta Warung Siti</h1>
  <p>Warung Siti berada di Jl. Melati No. 10, Bandung.</p>
  <ul>
    <li>Dari alun-alun: 400 meter ke arah utara.</li>
    <li>Area parkir tersedia di samping warung.</li>
  </ul>
  <p>Data peta bersumber dari www.example.com/peta.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Kunjungi warung Siti" dan satu paragraf pengantar
  - Area peta 420x260 berisi dokumen peta-warung.html
  - Tautan cadangan "Buka peta sebagai halaman penuh" di bawahnya
  - Area video 420x236 yang baru dimuat saat pengunjung mendekat

Mari kita bedah baris-baris penting pada file pertama:

  1. Baris 11 (iframe pertama): menyematkan dokumen lokal peta-warung.html; title memberi nama dan ukurannya menahan ruang sejak awal.
  2. Baris 12 (tautan cadangan): tautan pembukaan peta berada di luar iframe, bukan di dalamnya.
  3. Baris 14 (iframe kedua): src mengarah ke URL sematan pihak ketiga dengan parameter w=420 dari origin www.example.com.
  4. Baris 14 (loading="lazy"): video tur berada di bawah peta, sehingga pemuatannya ditunda.
  5. Baris 15 (tag penutup): kedua iframe ditutup dalam keadaan kosong, sesuai content model terkini.

Iframe kini tampil dan hemat pemuatan, tetapi bagi pengguna screen reader, area sematan hanyalah “frame” tanpa nama. Chapter berikutnya menutup celah itu dengan atribut title.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-iframe.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kunjungi Warung Siti</title>
</head>
<body>
  <h1>Kunjungi warung Siti</h1>
  <p>Warung Siti menyajikan soto ayam di Jl. Melati No. 10, Bandung.</p>
  <iframe src="peta-warung.html" title="Peta lokasi warung Siti" width="420" height="260"></iframe>
  <p>Pratinjau gagal tampil? <a href="peta-warung.html">Buka peta sebagai halaman penuh</a>.</p>
  <h2>Video tur warung</h2>
  <iframe src="www.example.com/embed/video-tur-warung?w=420" title="Video tur warung Siti" width="420" height="236" loading="lazy"></iframe>
</body>
</html>

peta-warung.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Peta Warung Siti</title>
</head>
<body>
  <h1>Peta Warung Siti</h1>
  <p>Warung Siti berada di Jl. Melati No. 10, Bandung.</p>
  <ul>
    <li>Dari alun-alun: 400 meter ke arah utara.</li>
    <li>Area parkir tersedia di samping warung.</li>
  </ul>
  <p>Data peta bersumber dari www.example.com/peta.</p>
</body>
</html>