Ekstensi file .shtml digunakan untuk halaman web yang menerapkan teknologi Server Side Includes (SSI). Berbeda dengan file HTML biasa (.html) yang diproses sepenuhnya langsung oleh browser pengunjung, file SHTML diproses terlebih dahulu oleh server web (seperti Apache atau NGINX) sebelum dikirim ke peramban pengguna. Fungsi utamanya adalah memungkinkan pengembang web menyisipkan konten dari satu file ke dalam file HTML lainnya secara dinamis, seperti menyertakan komponen header, footer, atau navigasi yang sama di banyak halaman tanpa harus menulis ulang kodenya satu per satu.
Fungsi Utama dan Cara Kerja SHTML
Sebelum teknologi manajemen konten berbasis database seperti WordPress mendominasi, web statis berukuran besar sangat merepotkan ketika harus memperbarui menu navigasi atau footer. Jika sebuah situs memiliki 50 halaman statis (.html), mengubah tautan pada menu membutuhkan pengeditan manual di 50 file berbeda. Dengan menggunakan SHTML dan perintah SSI, pengembang cukup membuat satu file footer.html, lalu memanggilnya di setiap halaman menggunakan baris kode singkat.
Ketika server mendeteksi ekstensi .shtml pada sebuah permintaan URL, server akan memindai isi file tersebut untuk mencari arahan SSI (diawali dengan format <!--#... -->), mengeksekusinya, menggabungkan konten yang dimaksud, lalu mengirimkan hasil akhirnya sebagai HTML standar ke perangkat pengunjung.
Contoh Perintah Dasar Server Side Includes (SSI)
<!--#include virtual="/header.html" -->
<h1>Selamat Datang di Situs Kami<l/h1>
<p>Ini adalah konten utama halaman web.</p>
<!--#include virtual="/footer.html" -->Perbedaan Utama HTML, SHTML, dan PHP
Untuk memahami posisi SHTML dalam ekologi pengembangan web modern, berikut adalah tabel perbandingan komparatif antara file HTML standar, SHTML, dan PHP.
| Fitur / Aspek | HTML (.html) | SHTML (.shtml) | PHP (.php) |
|---|---|---|---|
| Pemrosesan | Client-side (oleh browser) | Server-side (SSI sederhana) | Server-side (pemrograman dinamis) |
| Tingkat Kompleksitas | Sangat Rendah (Statis murni) | Rendah (Modularisasi dasar) | Tinggi (Database, logika, API) |
| Penggunaan Utama | Halaman web tunggal tanpa komponen berulang | Situs web jadul/menengah untuk menyertakan header/footer | Situs web modern, CMS, e-commerce |
| Dukungan Server | Semua web server | Membutuhkan modul SSI aktif di server | Membutuhkan interpreter PHP terinstal |
Cara Membuka dan Mengedit File SHTML
Karena file SHTML pada dasarnya berisi kode teks markah (markup), Anda dapat membukanya dengan mudah menggunakan berbagai aplikasi penyunting teks standar. Namun, untuk melihat hasil eksekusi perintah SSI secara utuh, file tersebut harus diunggah ke web server yang mendukung SSI atau dijalankan melalui lingkungan server lokal (localhost).
- Mengedit Kode: Gunakan teks editor seperti Visual Studio Code, Notepad++, Sublime Text, atau Notepad bawaan sistem operasi.
- Melihat Hasil Render: Buka file melalui URL server (misal:
http://localhost/index.shtml). Jika dibuka langsung dengan klik ganda dari folder lokal (file:///...), perintah SSI umumnya tidak akan tampil karena browser tidak mengeksekusi instruksi server-side. - Konfigurasi Server: Pastikan web server Anda (seperti Apache) mengizinkan eksekusi SSI melalui konfigurasi direktif
AddHandler server-parsed .shtmlatauOptions +Includespada file.htaccess.
Relevansi SHTML di Era Modern
Saat ini, penggunaan ekstensi .shtml sudah sangat jarang ditemukan pada proyek web baru. Sebagian besar pengembang web telah beralih menggunakan bahasa pemrograman sisi server seperti PHP, kerangka kerja (framework) JavaScript modern seperti React atau Next.js, ataupun Content Management System (CMS) seperti WordPress. Meskipun demikian, Anda mungkin masih menjumpai file berformat .shtml pada situs web warisan (legacy systems) yang dibangun pada akhir tahun 1990-an hingga 2000-an awal yang belum pernah dimigrasikan ke platform baru.