💡 ULASAN & REFERENSI • DIPERBARUI: 24 October 2026 • REDAKSI AZWINN

Ekstensi SHTML: Pengertian, Fungsi, dan Cara Kerjanya

Ekstensi .shtml merujuk pada file web yang menggunakan teknologi Server Side Includes (SSI). Berbeda dengan file HTML statis standar yang langsung dikirim oleh peladen (server) web ke peramban pengguna tanpa pemrosesan, file SHTML dianalisis terlebih dahulu oleh server sebelum ditampilkan. Direktif SSI yang disisipkan di dalamnya memungkinkan pengembang web menyertakan konten dari file lain (seperti header, footer, atau menu navigasi) secara dinamis ke dalam beberapa halaman web sekaligus.

Penggunaan utama ekstensi ini adalah untuk efisiensi pemeliharaan situs web berukuran kecil hingga menengah tanpa harus mengimplementasikan sistem manajemen konten (CMS) yang kompleks seperti WordPress atau arsitektur backend penuh seperti PHP dan Node.js. Ketika peramban meminta halaman SHTML, server web (umumnya Apache atau Nginx) memproses perintah SSI di dalam file tersebut, menggabungkannya, lalu merendernya menjadi dokumen HTML standar murni untuk dikirim ke pengguna.

Karakteristik Teknis dan Perbandingan SHTML vs HTML

Secara sintaks, file SHTML menggunakan struktur HTML standar yang dipadukan dengan instruksi khusus berbasis komentar HTML yang dikenal sebagai direktif SSI. Format dasar instruksi SSI ditulis dalam bentuk <!--#directive parameter="value" -->.

Parameter File HTML Standar File SHTML (Server Side Includes)
Pemrosesan Server Tidak ada pemrosesan (dikirim langsung). Dipindai dan diproses oleh modul server web.
Penyertaan File (Include) Tidak didukung secara native (harus manual atau pakai iframe). Didukung via <!--#include virtual="file.html" -->.
Kinerja (Performance) Sangat cepat karena murni statis. Sedikit lebih lambat karena butuh parsing server ringan.
Variabel Dinamis Tidak bisa menampilkan tanggal/waktu server secara langsung. Bisa menampilkan tanggal, waktu, atau variabel lingkungan server.

Direktif Umum Server Side Includes (SSI)

Dalam file SHTML, terdapat beberapa perintah atau direktif yang paling sering digunakan oleh pengembang web untuk menyederhanakan pengelolaan situs:

  • include: Menyisipkan konten dari file eksternal (misalnya menu navigasi atau footer) ke dalam halaman utama.
  • echo: Menampilkan variabel sistem, seperti waktu modifikasi file atau alamat IP pengunjung.
  • flastmod: Menampilkan tanggal dan waktu terakhir file tersebut dimodifikasi.
  • fsize: Menampilkan ukuran dari file yang ditentukan.
  • if / else: Memberikan logika bersyarat sederhana di dalam dokumen HTML.

Contoh Penerapan Kode SHTML

Berikut adalah contoh implementasi nyata bagaimana file header.html disisipkan ke dalam halaman utama berformat SHTML menggunakan direktif SSI:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Utama SHTML</title>
</head>
<body>
    <!-- Menyisipkan file header secara dinamis -->
    <!--#include virtual="/includes/header.html" -->

    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini diproses menggunakan Server Side Includes.</p>
        <p>Dokumen ini terakhir diubah pada: <!--#flastmod file="index.shtml" --></p>
    </main>

    <!-- Menyisipkan file footer secara dinamis -->
    <!--#include virtual="/includes/footer.html" -->
</body>
&

Cara Mengaktifkan SHTML di Server Web Apache

Secara default, beberapa server web mungkin tidak mengaktifkan pemrosesan SSI untuk ekstensi .shtml guna mengoptimalkan kinerja. Jika Anda menggunakan server Apache, pastikan modul include_module sudah aktif, lalu tambahkan konfigurasi berikut ke dalam file httpd.conf atau berkas .htaccess:

<FilesMatch "\.shtml$">
    SetOutputHandler server-parsed
</FilesMatch>

Options +Includes

Setelah konfigurasi tersebut diterapkan dan server dimuat ulang (restart), server web akan mengenali ekstensi SHTML dan mengeksekusi seluruh perintah SSI yang ada di dalamnya sebelum dikirimkan ke peramban pengguna.

🔍 Orang Lain Juga Mencari Ini