HTML adalah bagian dari setiap halaman web yang bertugas menyusun struktur dan makna konten, sedangkan urusan tampilan dan perilaku berada di lapisan lain. Topik ini menegaskan kedudukan HTML di antara tiga lapisan teknologi web, menjelaskan maksud markup yang bermakna, lalu menetapkan batas mengenai apa yang bukan tugas HTML. Setelah topik ini selesai dibaca, pembagian kerja antara HTML, CSS, dan JavaScript dapat dinyatakan dengan tegas, dan keputusan menempatkan sesuatu pada lapisan yang tepat menjadi lebih mudah.
Tiga lapisan teknologi web#
Halaman web yang lengkap dibangun dari tiga lapisan teknologi yang masing-masing menangani wilayah yang berbeda. HTML menyediakan struktur dan makna, CSS mengatur tampilan, sedangkan JavaScript menambahkan perilaku. Ketiganya dijaga terpisah karena berubah dengan alasan yang berbeda: konten berubah ketika informasi diperbarui, gaya berubah ketika rancangan diperbarui, dan perilaku berubah ketika fungsi ditambahkan. Perubahan pada satu lapisan idealnya tidak memaksa perubahan pada lapisan lain.
| Lapisan | Teknologi | Tugas inti | Contoh pernyataannya |
|---|---|---|---|
| Struktur | HTML | Menandai jenis dan hubungan antarkonten | Teks ini adalah judul utama, deret ini adalah daftar piket |
| Gaya | CSS | Mengatur tampilan dari struktur yang ada | Judul ini berukuran besar, daftar ini menjorok ke kanan |
| Perilaku | JavaScript | Mengendalikan respons terhadap interaksi pengguna | Saat tombol ditekan, tandai piket yang sudah selesai |
Ketiga lapisan berdiri di atas dokumen HTML yang sama. Browser membaca struktur tersebut, kemudian mempercantik halaman dengan CSS dan menghidupkannya dengan JavaScript apabila keduanya tersedia. Apabila salah satu lapisan tidak dimuat, halaman tetap dapat digunakan dalam bentuk yang lebih sederhana. Halaman yang hanya terdiri atas HTML tetap terbaca seluruh isinya, meskipun tampilannya polos, karena judul tetap menjadi judul dan daftar tetap menjadi daftar. Kemampuan bertahan tanpa lapisan lain ini menunjukkan bahwa struktur adalah lapisan yang paling mendasar.
HTML sebagai markup bermakna#
HTML (HyperText Markup Language) adalah bahasa markup, yaitu bahasa untuk menandai konten agar jenis dan hubungannya dapat dibaca mesin. Tanda yang disisipkan di sekeliling teks dikenal sebagai tag. Sebuah elemen umumnya terdiri atas tag pembuka, isi, dan tag penutup, sedangkan atribut melengkapi elemen dengan informasi tambahan berupa pasangan nama dan nilai. Contoh berikut memuat satu elemen beserta atributnya.
<p>
Piket pagi dimulai pukul
<time datetime="07:00">tujuh</time>.
</p>Contoh di atas memperlihatkan makna yang tidak tampak pada tampilan. Bagi manusia, tulisan tujuh adalah penanda jam pagi. Bagi mesin, atribut datetime menyatakan nilai 07:00 yang dapat dibaca, dibandingkan, dan diurutkan. Inilah ciri markup bermakna: elemen menyatakan jenis kontennya, bukan sekadar membungkus teks. Elemen h1 menyatakan judul utama, elemen ul menyatakan daftar, dan elemen a menyatakan tautan, masing-masing terlepas dari bentuk akhirnya di layar.
Bagian hyper pada nama HTML merujuk pada hypertext, yakni teks yang saling terhubung melalui tautan. Elemen a adalah wujudnya, dengan atribut href yang menunjuk dokumen lain, sehingga satu halaman dapat merujuk halaman lain di seluruh web. Kemampuan menghubungkan dokumen inilah yang membedakan web dari kumpulan berkas yang berdiri sendiri.
HTML adalah berkas teks biasa#
Sebuah dokumen HTML tidak memerlukan format khusus. Isinya adalah teks biasa (plain text) yang disimpan dalam berkas berekstensi .html, umumnya dengan pengodean karakter UTF-8. Editor teks apa pun dapat membuka dokumen HTML, dan perintah berikut membuktikannya dengan membuat berkas kecil lalu menampilkan isinya.
# membuat berkas HTML kecil dari teks biasa
printf '<h1>Jadwal Piket</h1>\n<p>Senin: Ali</p>\n' > jadwal.html
# menampilkan isi berkas tanpa mengubah apa pun
cat jadwal.html<h1>Jadwal Piket</h1>
<p>Senin: Ali</p>Keluaran di atas sama persis dengan teks pada perintahnya, karena tidak ada pemrosesan lain yang terjadi. Berkas yang sama kemudian dibaca oleh dua alat dengan cara yang berbeda. Editor menampilkan teksnya apa adanya, sedangkan browser menafsirkan tag di dalamnya dan menampilkan halaman terformat. Sumber dan tampilan adalah dua wajah dari berkas yang sama.
Ekstensi .html tidak mengubah isi berkas, melainkan memberi tahu sistem operasi bahwa berkas itu dibuka dengan browser. Penamaan yang rapi mempermudah kerja sehari-hari, misalnya huruf kecil, tanpa spasi, dan ekstensi yang selalu ditulis dengan benar. Pengodean UTF-8 juga sebaiknya dipertahankan di seluruh berkas, karena karakter di luar ASCII dapat tampil kacau apabila pengodean berkas tidak cocok dengan pengodean yang dibaca browser.
Apa yang bukan tugas HTML#
Mengamati apa yang bukan tugas HTML sama pentingnya dengan mengamati tugasnya. Mengatur warna, ukuran huruf, dan tata letak adalah tugas CSS. Mengendalikan apa yang terjadi ketika tombol ditekan adalah tugas JavaScript. HTML menyediakan struktur yang kemudian ditata oleh CSS dan dihidupkan oleh JavaScript.
HTML juga bukan bahasa pemrograman. Bahasa pemrograman memiliki konstruk untuk mengendalikan alur, seperti variabel, percabangan, dan perulangan, sedangkan HTML tidak memiliki ketiganya. Elemen dan atribut menyatakan jenis konten, bukan langkah komputasi. Oleh karena itu, halaman yang hanya terdiri atas HTML tidak dapat menghitung, memutuskan, atau merespons interaksi. Pekerjaan semacam itu sepenuhnya milik lapisan perilaku.
Cara paling ringkas mengamati batas ini adalah melepas lapisan gaya dari halaman yang sedang tampil. Demo berikut menampilkan satu kartu jadwal piket dengan gaya CSS yang sederhana. Jalankan demo tersebut, tekan tombolnya, kemudian amati apa yang hilang dan apa yang tetap berada di tempatnya.
Ketika gaya dilepas, warna, garis, dan jaraknya hilang, tetapi judul tetap menjadi judul dan daftar tetap menjadi daftar. Yang hilang adalah kontribusi CSS, sedangkan struktur HTML tidak tersentuh. Prinsip ini menjadi alasan menuliskan struktur terlebih dahulu dengan benar sebelum mengatur gaya. Memperbaiki gaya jauh lebih mudah dilakukan daripada membongkar struktur yang keliru.
Kesalahan umum#
- Mengandalkan HTML untuk mengatur tampilan. Kebiasaan ini berakar dari masa ketika HTML masih memiliki atribut presentasi seperti align dan bgcolor. Atribut semacam itu sudah usang dan digantikan CSS, sehingga seluruh pengaturan tampilan didelegasikan ke lapisan gaya. Elemen tetap dipilih berdasarkan maknanya.
- Menganggap halaman rusak karena tampil tanpa gaya. Ketika berkas CSS gagal dimuat, halaman tampak polos dan seolah rusak. Padahal strukturnya utuh, dan halaman itu justru memperlihatkan kerja HTML secara murni. Perbaikan dilakukan pada lapisan gaya yang gagal dimuat, bukan pada markup.
- Mencari perulangan dan percabangan di dalam HTML. Kebutuhan semacam itu adalah tanda bahwa perilaku diminta, sehingga tempatnya ada di JavaScript. Menumpuk elemen kosong atau menyalahgunakan atribut bukan penyelesaian yang benar. Kenali batas HTML, lalu pindahkan logika ke lapisan yang tepat.
- Menilai dokumen dari tampilannya saja. Sebuah halaman dapat tampak benar padahal strukturnya keliru, misalnya daftar yang ditulis sebagai deret paragraf biasa. Amati markupnya melalui editor atau validator, bukan hanya tampilannya.
Ringkasan#
- HTML menyusun struktur dan makna konten, CSS mengatur tampilan, sedangkan JavaScript menambahkan perilaku.
- Elemen menyatakan jenis kontennya melalui tag dan atribut, sehingga dokumen tetap bermakna tanpa satu pun gaya.
- Dokumen HTML adalah berkas teks biasa berekstensi .html yang ditafsirkan browser menjadi halaman terformat.
- HTML bukan bahasa pemrograman karena tidak memiliki variabel, percabangan, dan perulangan, sehingga perilaku selalu berada di lapisan JavaScript.
Referensi#
- HTML: HyperText Markup Language — MDN — Dokumentasi rujukan untuk elemen, atribut, dan panduan HTML.
- Learn HTML — MDN — Panduan dasar HTML untuk pengembang web pemula.
- HTML Living Standard — WHATWG — Spesifikasi resmi HTML yang diperbarui secara berkelanjutan.