MulaiCode
HTML

HTML Iframes

Pelajari cara menyematkan halaman web lain ke dalam halaman HTML menggunakan elemen <iframe>.

HTML Iframes

Elemen <iframe> digunakan untuk menyisipkan dokumen HTML lain ke dalam halaman HTML saat ini.


Contoh Dasar <iframe>

<iframe
  src="https://www.mulaicode.com"
  width="600"
  height="400"
  title="Contoh Iframe"
></iframe>

Properti Penting

PropertiKeterangan
srcURL dari halaman yang akan ditampilkan
widthLebar dari iframe (dalam px atau %)
heightTinggi dari iframe
titleDeskripsi untuk aksesibilitas (wajib untuk SEO)
frameborderMenentukan apakah ada border di sekitar iframe
allowMenentukan izin (seperti autoplay, fullscreen, dll)
loadingLazy load iframe (lazy atau eager)

Contoh Menampilkan Google Maps Menggunakan Iframe

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63536.63887143323!2d95.28750257814542!3d5.5611004712791186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3040377ae63dbcdf%3A0x3039d80b220cb90!2sBanda%20Aceh%2C%20Banda%20Aceh%20City%2C%20Aceh!5e0!3m2!1sen!2sid!4v1744994011966!5m2!1sen!2sid"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

Catatan Keamanan

  • Tidak semua website mengizinkan kontennya ditampilkan dalam iframe.
  • Untuk alasan keamanan, beberapa situs menolak tampil di iframe (dengan header X-Frame-Options: DENY).

Dengan iframe, kamu dapat menampilkan konten dari sumber lain seperti dokumen HTML, Google Maps, YouTube, dan lainnya dalam halaman web kamu.

On this page