HTML Tag Iframe: Menampilkan Halaman dalam Halaman

Tag <iframe> digunakan untuk menampilkan halaman web lain di dalam halaman HTML sehingga konten eksternal dapat ditampilkan langsung.

Apa Itu HTML Tag Iframe?

HTML tag <iframe> (Inline Frame) adalah elemen HTML yang digunakan untuk menampilkan halaman web atau konten dari sumber lain di dalam halaman web utama. Dengan menggunakan <iframe>, pengembang dapat menyisipkan (embed) konten eksternal tanpa harus meninggalkan halaman yang sedang dibuka oleh pengguna.

Secara sederhana, <iframe> bekerja seperti “jendela kecil” di dalam halaman web yang dapat memuat halaman lain. Konten yang ditampilkan bisa berupa website lain, video, peta, dokumen, atau aplikasi web tertentu. Elemen ini sangat berguna untuk mengintegrasikan layanan pihak ketiga ke dalam sebuah website.

Salah satu contoh penggunaan <iframe> yang paling umum adalah untuk menampilkan video dari platform seperti YouTube, atau menampilkan peta dari layanan seperti Google Maps. Dengan cara ini, pengembang tidak perlu membuat fitur tersebut dari awal, melainkan cukup menyematkan konten yang sudah tersedia.

Tag <iframe> memiliki beberapa atribut penting yang mengatur cara kerjanya, seperti:

src → menentukan URL atau sumber konten yang akan ditampilkan
width dan height → mengatur ukuran iframe
frameborder → mengatur tampilan border (bingkai)
allowfullscreen → memungkinkan konten ditampilkan dalam mode layar penuh

Selain itu, <iframe> juga dapat dikombinasikan dengan CSS untuk mengatur posisi, ukuran responsif, dan tampilan visual agar sesuai dengan desain halaman web.

Meskipun sangat berguna, penggunaan <iframe> juga perlu diperhatikan dengan baik, terutama dari segi keamanan dan performa. Konten dari sumber eksternal dapat mempengaruhi kecepatan loading halaman, serta berpotensi membawa risiko jika sumbernya tidak terpercaya.

Karena kemampuannya dalam menyematkan berbagai jenis konten eksternal, tag <iframe> menjadi salah satu elemen penting dalam pengembangan website modern untuk meningkatkan fungsionalitas dan memperkaya pengalaman pengguna tanpa harus membangun semua fitur secara mandiri.

Iframe memungkinkan kita menyematkan (embed) website lain, video, peta, atau dokumen ke dalam halaman.

Fungsi HTML tag <iframe>

Menampilkan halaman web lain
Bisa menampilkan website lain di dalam halaman kita.
Menyisipkan konten eksternal
Contohnya:
- Video dari YouTube
- Peta dari Google Maps
- Dokumen atau halaman lain
Membuat tampilan lebih interaktif
Digunakan untuk menambahkan fitur dari luar tanpa membuat dari awal.
Memisahkan konten
Konten dalam <iframe> terpisah dari halaman utama.

Struktur Dasar HTML Tag Iframe

<iframe src="https://www.example.com" width="300" height="200"></iframe>

Penjelasan:

src → alamat halaman yang ingin ditampilkan
width & height → ukuran frame

Atribut src menentukan alamat halaman atau konten yang akan ditampilkan.

Contoh Penggunaan HTML Tag Iframe

1. Iframe Sederhana

Tag <iframe> dapat digunakan untuk menampilkan halaman web lain di dalam halaman HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Sederhana</title>
</head>
<body>

<iframe src="https://example.com" width="500" height="300"></iframe>

</body>
</html>

penjelasan: Atribut src menentukan alamat halaman yang akan ditampilkan.

2. Iframe dengan Border

Iframe dapat diberi border menggunakan CSS agar tampilannya lebih jelas pada halaman web.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Border</title>
    <style>
        iframe{
            border:2px solid black;
        }
    </style>
</head>
<body>

<iframe src="https://example.com" width="500" height="300"></iframe>

</body>
</html>

penjelasan: CSS digunakan untuk mengatur tampilan border iframe.

3. Iframe dengan YouTube

Tag <iframe> sering digunakan untuk menampilkan video dari layanan seperti YouTube.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe YouTube</title>
</head>
<body>
<h3>Contoh Iframe Youtube</h3>
<p>Klik [Run Browser] Untuk Menampilkan Konten</p>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/R66SMHx8MOs">
</iframe>

</body>
</html>

penjelasan: Iframe dapat menampilkan konten dari layanan eksternal.

4. Embed Google Maps

Atribut iframe digunakan untuk menampilkan peta dari Google Maps dengan pengaturan ukuran, loading, dan izin layar penuh.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Google Maps</title>
</head>
<body>

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450"
  style="border:0;"
  allowfullscreen=""loading="lazy">
</iframe>

</body>
</html>

Penjelasan: Kode ini menyisipkan peta interaktif ke halaman web sehingga pengguna dapat melihat lokasi langsung tanpa membuka aplikasi.

5. Iframe dengan Atribut Title

Atribut title digunakan untuk memberikan deskripsi pada iframe agar lebih ramah aksesibilitas.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Title</title>
</head>
<body>

<iframe src="https://example.com" 
width="500" 
height="300"
title="Halaman Contoh"></iframe>

</body>
</html>

penjelasan: Title membantu pembaca layar memahami isi iframe.

6. Iframe dengan Loading Lazy

Atribut loading digunakan untuk mengatur kapan iframe dimuat oleh browser.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Lazy Loading</title>
</head>
<body>

<iframe src="https://example.com"
width="500"
height="300"
loading="lazy"></iframe>

</body>
</html>

penjelasan: Lazy loading menunda pemuatan iframe sampai dibutuhkan.

7. Iframe dengan Fullscreen

Atribut allowfullscreen memungkinkan konten iframe ditampilkan dalam mode layar penuh.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Fullscreen</title>
</head>
<body>
<p>Klik [Run Browser] Untuk Menampilkan Konten</p>
<iframe 
src="https://www.youtube.com/embed/R66SMHx8MOs"
width="560"
height="315"
allowfullscreen>
</iframe>

</body>
</html>

penjelasan: Allowfullscreen memungkinkan pengguna membuka iframe dalam layar penuh.

8. Iframe dengan CSS Styling

Tag <iframe> dapat diberi style menggunakan CSS untuk mengatur ukuran dan posisi.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe CSS</title>
    <style>
        iframe{
            width:600px;
            height:350px;
			border:0;
            border-radius:10px;
			box-shadow:0 0 2px #2d2d2d;
        }
    </style>
</head>
<body>

<iframe src="https://example.com"></iframe>

</body>
</html>

penjelasan: CSS dapat mengatur ukuran dan tampilan iframe.

9. Iframe dengan Fallback Text

Iframe dapat berisi teks cadangan yang muncul jika browser tidak mendukung iframe.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Fallback</title>
</head>
<body>

<iframe src="https://example.com">
Browser Anda tidak mendukung iframe.
</iframe>

</body>
</html>

penjelasan: Teks fallback muncul jika iframe tidak didukung.

Atribut Penting HTML Tag Iframe

Atribut	Fungsi	Contoh
src	URL sumber konten	`src="https://example.com"`
width	Lebar iframe	`width="600"`
height	Tinggi iframe	`height="400"`
title	Keterangan untuk aksesibilitas	`title="Video tutorial"`
loading	Menentukan metode loading	`loading="lazy"`

Atribut Keamanan HTML Tag Iframe

Atribut	Fungsi	Contoh
sandbox	Membatasi kemampuan konten	`sandbox`
allow	Mengatur izin fitur tertentu	`allow="fullscreen"`
referrerpolicy	Mengatur pengiriman referrer	`referrerpolicy="no-referrer"`

Kelebihan dan Kekurangan Iframe

Kelebihan

Mudah menyematkan konten eksternal
Tidak perlu menyalin kode sumber
Mendukung berbagai layanan (video, peta, dll.)

Kekurangan

Dapat menimbulkan masalah keamanan
Terkadang diblokir oleh website tertentu
Dapat mempengaruhi performa halaman

Best Practice Penggunaan Iframe

Selalu tambahkan atribut title untuk aksesibilitas
Gunakan loading="lazy" untuk meningkatkan performa
Gunakan sandbox jika memuat konten tidak terpercaya
Pastikan sumber iframe aman (HTTPS)

Kesimpulan

HTML tag <iframe> digunakan untuk menyematkan konten eksternal ke dalam halaman web. Meskipun sangat berguna, penggunaannya harus memperhatikan aspek keamanan dan performa agar website tetap optimal.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Cara Menggunakan Tag iframe & Contohnya