Embed dan Object

Iframe menyematkan dokumen HTML, tetapi web sesekali perlu menyematkan resource non-HTML: dokumen PDF, keluaran plugin, atau tipe media khusus. Dua elemen mengurus kebutuhan itu — embed dan object. Keduanya warisan era plugin dan kini jarang ditulis baru, tetapi tetap valid dan masih berguna untuk pratinjau PDF. Chapter ini membedah keduanya, lalu menyandingkannya dengan iframe dalam satu tabel.

Elemen embed: Jejak Era Plugin #

Elemen embed adalah titik sambung untuk konten yang ditangani browser atau aplikasi eksternal. Pada puncaknya era Flash, embed menjadi pintu masuk animasi dan pemutar media; browser modern tidak lagi mendukung plugin semacam itu. Atributnya ringkas: src berisi alamat resource, type menyebut MIME type-nya, dan width dengan height mengatur area tampil. embed adalah void element — tidak memiliki tag penutup — sehingga tidak mungkin menampung fallback.

<embed src="brosur-menu.pdf" type="application/pdf" width="420" height="300">

Output yang Dihasilkan:

Browser menampilkan pratinjau brosur-menu.pdf menggunakan
penampil PDF bawaan, tanpa plugin tambahan.

Elemen di atas ditulis tanpa tag penutup, sesuai sifat void element pada chapter Void Elements. Bila resource gagal ditampilkan, area itu kosong tanpa pesan — kelemahan yang kemudian dijawab object.

Elemen object dengan Fallback #

Elemen object mewakili resource eksternal yang dapat diperlakukan sebagai gambar, nested browsing context, atau resource untuk plugin — cakupannya paling luas di antara tiga elemen sematan. Resource-nya ditunjuk atribut data, dengan type sebagai deklarasi MIME type-nya. Berbeda dari embed, content model object bersifat transparent: elemen di dalamnya menjadi fallback yang tampil bila resource gagal ditampilkan. Tag pembuka dan penutupnya wajib ditulis utuh, karena fallback berada di antara keduanya.

<object data="brosur-menu.pdf" type="application/pdf" width="420" height="300">
  <p>Pratinjau gagal tampil. <a href="brosur-menu.pdf">Unduh brosur menu</a>.</p>
</object>

Output yang Dihasilkan:

Bila penampil PDF dapat merender berkas:
  area 420x300 berisi pratinjau brosur-menu.pdf
Bila pratinjau gagal:
  area menampilkan paragraf dan tautan "Unduh brosur menu"

Mari kita bedah peran tiap bagiannya:

1. data="brosur-menu.pdf": alamat resource, padanan src pada elemen sematan lain.
2. type="application/pdf": deklarasi MIME type yang membantu browser menyiapkan penampil yang tepat.
3. Elemen <p> di dalamnya: fallback yang tampil bila resource tidak dapat ditampilkan.
4. Tag penutup </object>: wajib ditulis; tanpanya fallback tidak memiliki tempat berada.

Perbandingan iframe, object, dan embed #

Tiga elemen sematan ini sering tertukar karena tampilannya serupa; tabel berikut memisahkan perannya:

Satu baris tabel itu menutup perdebatan klasik: iframe untuk dokumen HTML, object dan embed untuk resource non-HTML. Selama sematannya sebuah halaman HTML, object dan embed tidak menambah apa pun.

Kapan Dipakai dan Kapan Dihindari #

Untuk PDF, object dengan fallback memberi jalan keluar terbaik bagi pengunjung, dan iframe pun dapat menampilkan PDF lewat penampil bawaan browser. embed tersisa untuk kasus tanpa fallback, misalnya area kecil yang isinya dijamin tersedia. Konten plugin seperti Flash tinggal kenangan: bila menemukan embed Flash pada kode lama, ganti dengan pendekatan modern seperti elemen video dari section Images dan Media. Tulis embed dan object hanya bila ada kebutuhan konkret — sisanya milik iframe.

Contoh Lengkap dalam Satu File #

File berikut menyandingkan keduanya pada satu brosur yang sama: object dengan fallback, lalu embed tanpa fallback. File brosur-menu.pdf bersifat hipotetis; sediakan file PDF sendiri saat mencoba, karena validator tidak memeriksa keberadaannya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Brosur Warung Siti</title>
</head>
<body>
  <h1>Brosur menu warung Siti</h1>
  <object data="brosur-menu.pdf" type="application/pdf" width="420" height="300">
    <p>Pratinjau gagal tampil. <a href="brosur-menu.pdf">Unduh brosur menu</a>.</p>
  </object>
  <h2>Brosur pada bagian samping</h2>
  <embed src="brosur-menu.pdf" type="application/pdf" width="420" height="300">
  <p>Kedua area memakai penampil PDF bawaan browser, tanpa plugin tambahan.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Brosur menu warung Siti"
  - Area object 420x300 berisi pratinjau brosur-menu.pdf
  - Area embed 420x300 dengan pratinjau yang sama
  - Paragraf penjelas di bagian bawah halaman

Mari kita bedah baris-baris pentingnya:

1. Baris 10-12 (object): PDF ditunjuk data, dengan paragraf fallback di antara tag pembuka dan penutupnya.
2. Baris 11 (tautan unduh): fallback berupa tautan; tautan kedua di luar object tetap disarankan untuk kegagalan render beruntun.
3. Baris 14 (embed): ditulis tanpa tag penutup sebagai void element; bila PDF gagal, area ini kosong tanpa pesan.
4. Baris 15 (paragraf penjelas): menyatakan sumber tampilan agar pembaca tidak mencari plugin yang tak diperlukan.

Ketiga elemen sematan kini di tangan kita: iframe untuk dokumen, object dengan jaring pengaman, dan embed tanpa fallback. Ketiganya membagi satu sifat yang belum dibahas utuh: dokumen sematan membawa biaya dan aturan keamanannya sendiri — pembahasan penutup section ini.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen embed
• MDN Web Docs — Elemen object
• WHATWG — HTML Living Standard: Iframes, embeds, and objects

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Brosur Warung Siti</title>
</head>
<body>
  <h1>Brosur menu warung Siti</h1>
  <object data="brosur-menu.pdf" type="application/pdf" width="420" height="300">
    <p>Pratinjau gagal tampil. <a href="brosur-menu.pdf">Unduh brosur menu</a>.</p>
  </object>
  <h2>Brosur pada bagian samping</h2>
  <embed src="brosur-menu.pdf" type="application/pdf" width="420" height="300">
  <p>Kedua area memakai penampil PDF bawaan browser, tanpa plugin tambahan.</p>
</body>
</html>