Mengapa HTML tidak mendukung fitur `include` secara bawaan?

 (frontendmasters.com)
2 poin oleh GN⁺ 2025-05-05 | 1 komentar | Bagikan ke WhatsApp
  • Dengan HTML saja, tidak ada fitur include untuk menyertakan elemen yang sama ke banyak halaman
  • CSS bisa memuat CSS, dan JavaScript bisa memuat JS, tetapi HTML tidak bisa mengambil HTML, sehingga hal ini menimbulkan pertanyaan
  • Untuk mengatasi masalah ini, berbagai JavaScript, bahasa templat, dan static site generator digunakan
  • Masalah kompleks seperti performa, keamanan, keterlambatan rendering, dan include melingkar menjadi hambatan penerapannya
  • Banyak developer menginginkan fitur include deklaratif murni di HTML, tetapi hingga kini belum tercermin dalam standar web

Pertanyaan tentang mengapa HTML tidak memiliki fitur include

Permasalahan

  • Ada ketidaknyamanan karena harus berulang kali menyisipkan header bersama di banyak halaman seperti index.html, about.html, dan contact.html
  • Developer ingin menggunakan kembali header yang didefinisikan sekali tanpa duplikasi

Metode alternatif yang sudah ada

  • Cara memuat HTML eksternal dengan fetch API JavaScript lalu menyisipkannya ke DOM
  • Server Side Includes (SSI), include di PHP, static site generator, dan bahasa templat sudah tersedia sebagai solusi
  • Elemen HTML seperti <iframe> dan <object> juga memungkinkan, tetapi tidak cocok karena masalah aksesibilitas, performa, dan isolasi gaya
  • Pada akhirnya, HTML sendiri tidak memiliki sintaks include yang sederhana

Mengapa HTML tidak memiliki fitur ini?

  • CSS dan JS masing-masing memiliki sintaks @import atau import, tetapi HTML tidak demikian
  • Standar web umumnya telah mengakomodasi fitur yang banyak digunakan developer, tetapi HTML include belum termasuk di dalamnya
  • Alasan yang diajukan dalam diskusi:
    • Potensi mengganggu kerja preload scanner
    • Masalah layout shift/flicker saat loading asinkron
    • Kompleksitas penanganan include bertingkat atau melingkar
    • Penolakan terhadap peningkatan trafik web hosting
    • Isu keamanan (CORS, CSP, dll.) dan benturan timing pada event loading dokumen
    • Atau mungkin sekadar karena prioritasnya rendah dan belum ada proposal yang jelas

Diskusi terkait

  • Sedang dibahas secara aktif di issue thread WHATWG di GitHub #2791
  • Di masa lalu, Chrome pernah memiliki HTML Imports, tetapi kemudian dihentikan seiring tidak adanya dukungan dari browser lain
  • Pendekatan alternatif seperti HTMX, Web Components, XSLT, dan SSI juga dibagikan

Ringkasan reaksi komunitas

  • Perkembangan HTML tetap berfokus pada markup statis, sehingga filosofi menyingkirkan fungsi yang bersifat logis masih kuat
  • Banyak orang menginginkan fitur ini, tetapi kebanyakan adalah developer individu yang sulit menyuarakannya dalam proses standardisasi
  • Ada juga analisis bahwa adopsinya akan sulit jika masalah performa, keamanan, pemrosesan rendering, dan pencegahan siklus tidak diselesaikan
  • Sebagian developer melihat fitur ini absen hanya karena konsep bahwa HTML seharusnya hanya menangani “hasil”

Kesimpulan

  • Hingga kini, HTML masih tidak memiliki fitur include murni, sehingga perlu menggantinya dengan berbagai tool dan bahasa eksternal
  • Namun, banyak developer masih mengharapkan struktur reuse sederhana berbasis HTML

Bacaan terkait

1 komentar

 
GN⁺ 2025-05-05
Komentar Hacker News
  • HTML secara historis merupakan aplikasi dari SGML, dan SGML mendukung fitur penyertaan. Dengan mendefinisikan "entitas" baru dan membuat entitas "sistem", entitas itu bisa dirujuk nanti untuk digantikan
    • Karena kompleksitas SGML, ada berbagai upaya untuk menyederhanakan HTML, dan dalam prosesnya fitur semacam ini dihapus
  • Pada akhir 90-an, ada upaya untuk menyelesaikan masalah ini. Sebagai webmaster situs web Analog Science Fiction, saya membuat banyak halaman statis dengan header dan sidebar yang sama. Lalu saya menemukan fitur server-side include Apache. Itu adalah cara untuk memeliharanya sebelum saya mengenal prinsip DRY
    • Masalah ini terus diselesaikan berulang kali dengan berbagai cara. Bagi orang yang mengatakan iframe sudah cukup, iframe tidak menyesuaikan ukurannya dengan konten. Solusi server-side memerlukan server. Mengapa tidak ada cara client-side yang sederhana? Menurut saya itu pertanyaan yang valid
  • Ada usulan fitur bernama HTML Imports. Ini dibuat sebagai bagian dari Web Components
    • HTML Imports adalah cara untuk menyertakan dan menggunakan kembali dokumen HTML di dalam dokumen HTML lain
    • Google mengimplementasikan spesifikasi yang diusulkan di Blink, tetapi perusahaan lain menolaknya karena berbagai alasan. Mozilla khawatir tentang kompleksitas implementasi, masalah keamanan, dan tumpang tindih dengan modul ES6. Karena tidak ada dukungan dari vendor, usulan itu resmi dihentikan
  • Netscape 4 memiliki fitur bernama inflow layers
    • Nama untuk fitur ini adalah transclusion. Ini adalah bagian dari Project Xanadu, dan awalnya dianggap sebagai fitur penting dari hypertext
    • MediaWiki menggunakan transclusion secara luas. Kadang wiki terasa seperti bentuk hypertext yang sesungguhnya
  • Frameset yang tepat — bukan iframe — sejak lama dimaksudkan untuk menjalankan fungsi semacam ini. Setidaknya ekspansi otomatis bekerja dengan baik dan pengguna bisa mengubah ukurannya
    • Ada banyak kritik terhadap frame, tetapi frame berhasil diterapkan pada hal-hal yang berguna seperti dokumentasi Java API
    • Saya pikir frameset tidak dipertahankan karena tidak memberi fleksibilitas yang cukup bagi desainer. Di perangkat seluler saat ini, frameset kemungkinan tidak akan bekerja dengan baik
  • Fitur "includes" dianggap sebagai sisi server dan diproses di luar browser web. HTML berada di sisi klien dan hanyalah sintaks markup sederhana, bukan bahasa pemrograman
    • Masalah ini adalah masalah yang sudah selesai. Masalah "includes" adalah cara semua pelajar desain web belajar PHP. Di sebagian besar CMS, "includes" menjadi "bagian template", dan itu salah satu hal pertama yang dijelaskan dalam dokumentasi
    • Tidak perlu menggunakan "includes" hanya dengan HTML. HTML adalah format presentasi dan tidak melakukan hal menarik tanpa CSS dan JS
  • Ada berbagai masalah dengan fitur penyertaan HTML
    • Jika main.html menyertakan child/include1.html, dan child/include1.html memiliki tautan src="include2.html", ke mana pengguna harus dibawa saat mengeklik tautan itu? Jika ke "include2.html", halaman itu akan kehilangan semua bagian lainnya. Jika ke main.html, bagaimana cara menentukan bahwa kali ini yang digunakan adalah include2.html dan bukan include1.html?
    • Sebaliknya, article1.html, article2.html, article3.html, dan seterusnya masing-masing bisa menyertakan header.html, footer.html, dan navi.html. Tetapi jika ingin menambahkan comments.html ke semua artikel, semua artikel harus diedit, dan pada akhirnya artikel dihasilkan berdasarkan template sehingga browser tidak perlu mendukung penyertaan
    • Jika header ingin mengetahui judul atau footer menginginkan tautan berikut/sebelumnya, diperlukan cara untuk meneruskan informasi ini antarpenyertaan, dan pada akhirnya halaman tetap harus dihasilkan sehingga penyertaan bukanlah solusinya
    • Penyertaan HTML kemungkinan besar secara praktis tidak akan berguna untuk sebagian besar kasus penggunaan
  • Ada isu publik di WHATWG tentang masalah ini
    • Fitur penyertaan sisi klien untuk HTML
  • HTML pernah memiliki fitur penyertaan, tetapi kehilangan popularitas
    • Istilah "include" yang sebenarnya adalah fitur XML, dan itulah fitur yang diinginkan artikel ini. HTML memiliki pendekatan alternatif yang sudah ada sebelum XML. Pendekatan itu adalah frame. Frame menawarkan lebih banyak kemampuan daripada penyertaan XML, dan karena itu HTML tidak mendapatkan fitur tersebut. Frame kehilangan popularitas karena penyalahgunaan, keamanan, aksesibilitas, dan berbagai masalah lainnya