HTML (Hypertext Markup Language) adalah pendekatan berbasis teks untuk menggambarkan bagaimana konten yang ada di dalam file HTML disusun. Markup ini memberi tahu browser web cara menampilkan teks, gambar, dan berbagai jenis multimedia lainnya di halaman web.
HTML merupakan rekomendasi resmi dari World Wide Web Consortium (W3C) dan umumnya diikuti oleh semua browser utama, baik di desktop maupun perangkat mobile. Versi terbaru dari spesifikasi ini adalah HTML5.
Bagaimana HTML Bekerja
HTML itu sebenarnya cuma file teks biasa yang berisi sintaks tertentu, konvensi penamaan, dan struktur khusus yang memberi tahu komputer dan web server bahwa file tersebut adalah HTML dan harus dibaca sebagai HTML. Dengan menerapkan aturan-aturan HTML ini pada file teks lewat text editor apa pun, kita bisa bikin dan desain halaman web sederhana, lalu mengunggahnya ke internet.
Hal paling dasar dalam penulisan HTML adalah menyertakan deklarasi tipe dokumen di awal file. Ini penting banget karena bagian inilah yang memberi tahu komputer bahwa “ini file HTML loh.” Format header dokumennya seperti ini: <!DOCTYPE html>. Harus ditulis persis begitu, tanpa isi tambahan di dalamnya. Kalau ada konten sebelum deklarasi ini, komputer nggak bakal ngeh kalau itu HTML.
Doctype ini sebenarnya bukan cuma buat HTML aja, tapi juga dipakai buat dokumen lain yang berbasis SGML (Standard Generalized Markup Language). SGML ini adalah standar umum buat mendefinisikan markup language. HTML sendiri adalah salah satu jenis markup language yang termasuk dalam keluarga SGML dan pakai deklarasi doctype.
Satu hal penting lainnya, file HTML harus disimpan dengan ekstensi .html. Kalau doctype memberi tahu dari dalam bahwa itu HTML, ekstensi filenya ngasih tahu dari luar. Dengan dua tanda ini, komputer bisa mengenali file sebagai HTML baik saat dibaca atau belum dibaca. Ini penting banget saat upload ke web, karena server harus tahu dulu isi file itu HTML sebelum bisa dikirim ke klien.
Setelah file disimpan sebagai HTML dan deklarasi doctype ditulis, kita bisa mulai nerapin semua sintaks HTML lainnya untuk kustomisasi halaman web. Biasanya, nanti bakal ada beberapa file HTML yang mewakili berbagai halaman dalam satu website. Nah, semua file itu harus diunggah sesuai dengan struktur folder aslinya. Soalnya, setiap halaman bakal saling ngelink lewat path file-nya. Kalau struktur foldernya beda waktu di-upload, link-nya bisa rusak dan halaman bisa hilang karena path-nya nggak cocok.
Elemen Dasar dalam HTML
Dalam HTML, file teks ditandai lebih lanjut dengan teks tambahan yang menjelaskan bagaimana dokumen harus ditampilkan. Supaya markup-nya nggak nyampur sama isi konten asli, dipakai sintaks HTML khusus yang unik. Komponen-komponen spesial ini disebut tag HTML. Tag ini bisa punya pasangan nama-nilai yang disebut atribut, dan konten yang ada di dalam tag disebut elemen HTML.
Elemen HTML selalu punya tag pembuka, isi di tengah, dan tag penutup. Atribut biasanya ditulis di tag pembuka dan bisa memberikan info tambahan tentang elemen tersebut. Elemen HTML secara umum dibagi dua jenis:
- Block-level element: dimulai di baris baru dan memenuhi ruang tersendiri, kayak tag
<h1>dan<p>. - Inline element: tidak dimulai dari baris baru dan hanya mengambil ruang seperlunya. Biasanya dipakai untuk formatting dalam elemen block-level, seperti
<a>atau<strong>.
Kelebihan dan Kekurangan HTML
Kelebihan dari HTML antara lain:
- Sudah umum digunakan dan punya banyak sumber belajar.
- Bisa langsung dijalankan di semua browser.
- Cukup gampang dipelajari.
- Struktur kode sumbernya bersih dan konsisten.
- Bersifat open-source dan gratis digunakan.
- Bisa digabungin dengan bahasa backend lain seperti PHP.
Sedangkan kekurangannya:
- Fungsionalitasnya nggak terlalu dinamis, lebih cocok buat halaman statis.
- Setiap komponen harus dibuat secara manual meskipun mirip satu sama lain.
- Perilaku browser kadang nggak konsisten, terutama untuk fitur baru di browser lama.
Tag HTML yang Sering Digunakan
Tag HTML menentukan struktur halaman secara keseluruhan dan bagaimana elemen-elemen di dalamnya ditampilkan oleh browser. Beberapa tag HTML yang sering dipakai yaitu:
<h1>untuk heading level pertama.<h2>untuk heading level kedua.<p>untuk paragraf.<table>untuk menampilkan data dalam bentuk tabel.<ol>untuk daftar bernomor (ordered list).<ul>untuk daftar tak bernomor (unordered list).
Seperti yang disebut tadi, semua elemen HTML harus punya tag pembuka dan penutup. Misalnya tag pembuka <p> dan tag penutupnya </p>. Yang penutup ditandai dengan adanya slash (/).
Cara Menggunakan dan Mengedit HTML
Karena HTML sepenuhnya berbasis teks, kita bisa ngedit file HTML pakai program editor teks seperti Notepad++, Vi, atau Emacs. Intinya, selama file-nya berekstensi .html, browser seperti Chrome atau Firefox bisa langsung nampilin file itu sebagai halaman web.
Buat developer profesional, ada juga WYSIWYG editor yang bisa bantu bikin halaman web secara visual. Contohnya Netbeans, IntelliJ, Eclipse, dan Visual Studio dari Microsoft. Sebagian editor ini udah built-in, sebagian lagi bisa ditambahin lewat plugin.
Editor semacam ini biasanya juga punya fitur pengecekan HTML. Tapi bahkan browser modern pun sekarang udah punya devtools buat cek error kayak tag penutup yang hilang atau sintaks yang nggak valid.
Chrome dan Firefox misalnya, punya alat pengembang HTML yang bisa nampilin keseluruhan struktur HTML suatu halaman dan bahkan ngedit langsung dari browser dan liat hasilnya seketika.
HTML, CSS, dan JavaScript
HTML bagus buat bikin struktur halaman, tapi kurang powerful kalau bicara soal tampilan yang responsif. Jadi, biasanya HTML dipakai bareng dengan cascading style sheet (CSS) dan JavaScript (JS) buat tampilan dan fitur interaktif.
File HTML biasanya dihubungkan ke file CSS atau JS di bagian atas dokumen, lewat path file yang ditentukan. CSS bisa ngatur warna, font, dan style lainnya, sementara JavaScript memungkinkan penambahan fitur dinamis kayak pop-up atau image slider. Biasanya dipakai atribut class buat nyocokin elemen HTML dengan elemen di CSS atau JS.
Misalnya, kita pengen warna teks tertentu jadi merah. Kita bisa tulis styling-nya di file CSS, lalu tinggal tambahin atribut class ke bagian HTML yang diinginkan. Konsep yang sama juga berlaku buat JavaScript, cuma dengan fungsi yang berbeda.
Pemisahan antara struktur halaman (HTML) dan tampilannya (CSS/JS) ini dikenal dengan prinsip separation of concerns, dan jadi praktik terbaik dalam pengembangan web modern.
Sejarah dan Perkembangan
Di awal-awal web, HTML udah cukup buat menandai dokumen akademik dan teknis. Tapi makin berkembangnya internet dan makin banyaknya pengguna awam, kebutuhan akan tampilan dan interaktivitas juga meningkat.
HTML 4.01 dirilis tahun 1999, saat internet belum sepopuler sekarang, dan HTML5 baru distandardisasi tahun 2014. Selama masa itu, HTML mulai disalahgunakan bukan cuma buat struktur, tapi juga buat styling tampilan.
Contohnya, HTML4 sering banget dipakai buat ngatur font, warna background, dan posisi konten langsung di dalam tag HTML-nya. Padahal itu dianggap antipattern karena HTML seharusnya fokus ke struktur, bukan styling. Styling lebih cocok ditangani oleh CSS.
Perbedaan besar antara HTML4 dan HTML5 ada di penerapan prinsip separation of concerns. Di HTML5, tag seperti <b> dan <i> sudah dianggap deprecated, dan atribut seperti align di tag <p> udah dihapus dari spesifikasi.
Versi HTML
Berikut daftar versi HTML beserta tahun rilisnya. Tiap versi punya beberapa iterasi, tapi ini adalah versi-versi yang paling signifikan:
- HTML 1.0 — dirilis tahun 1992 — punya fitur terbatas, cuma sekitar 20 elemen.
- HTML 2.0 — tahun 1995 — mulai nambah elemen untuk fungsi matematika.
- HTML 3.2 — tahun 1996 — menghapus fungsi matematika dan menyatukan ekstensi dari vendor berbeda.
- HTML 4.0 — tahun 1997 — menawarkan tiga variasi tergantung jumlah elemen deprecated yang diperbolehkan.
- HTML 4.01 — tahun 1999 — hampir sama seperti 4.0.
- HTML5 — tahun 2014 — hadir setelah lama vakum karena W3C fokus ke XHTML.
- HTML 5.1 — tahun 2016 — menambahkan tag baru buat dukung media embedding.
- HTML 5.2 — tahun 2017 — berusaha supaya HTML makin mudah dipahami manusia maupun komputer.
- HTML 5.3 — belum dirilis — W3C dan WHATWG mulai kerja bareng sejak 2019 buat versi baru.
Fitur-fitur HTML5
HTML5 memperkenalkan beberapa elemen baru untuk meningkatkan interaktivitas, kemampuan multimedia, dan efisiensi semantik. Sekarang, kita nggak perlu lagi pakai plugin buat multimedia, karena semuanya bisa langsung ditaruh di dalam kode HTML. Beberapa elemen tersebut antara lain:
- Elemen grafis:
- <canvas>, yang menciptakan ruang kotak kosong tempat desainer web bisa menggambar menggunakan JavaScript.
- <svg>, yaitu wadah untuk grafik vektor yang skalabel (SVG).
- Elemen semantik:
- <header>, untuk membuat bagian kepala di atas halaman.
- <footer>, untuk membuat bagian kaki di bawah halaman.
- <article>, untuk menampilkan konten yang berdiri sendiri.
- <section>, buat mendefinisikan bagian-bagian seperti bab atau bagian dalam header/footer jika dibutuhkan lebih dari satu.
- <nav>, untuk membuat menu navigasi.
- Elemen multimedia:
- <audio>, untuk menyisipkan file MP3, WAV, dan OGG ke dalam HTML.
- <video>, untuk menyisipkan jenis video seperti MP4, WebM, dan OGG.
- Atribut baru untuk elemen <form>, yaitu area input data dari user di halaman web. Atribut baru ini termasuk number, date, calendar, dan range.
Fitur utama HTML5 lainnya meliputi:
- Menghilangkan atribut-atribut lama atau yang sudah nggak relevan.
- Edit konten secara offline (offline editing).
- Kemampuan drag-and-drop antar dokumen HTML5.
- Peningkatan fitur messaging.
- Parsing yang lebih rinci (parsing).
- Pendaftaran penangan MIME dan protokol.
- Standar umum untuk penyimpanan data dalam database SQL (Web SQL).
- Application Programming Interface (API) untuk aplikasi kompleks.
- Dukungan untuk pengembangan aplikasi perangkat mobile.
- MathML untuk formula matematika dan sains.
Walaupun fitur-fitur baru ini ditambahkan untuk mendukung penyisipan multimedia, perubahan pada spesifikasi HTML menunjukkan bahwa komunitas pengembang ingin HTML kembali ke tujuan utamanya, yaitu mendeskripsikan struktur konten. Jadi, lebih banyak fitur struktural yang ditambahkan, sementara fitur-fitur yang fokus ke format visual mulai dihapus. Supaya tetap kompatibel ke belakang, browser masih mendukung tag HTML yang sudah deprecated (usang), tapi pada akhirnya HTML bakal lebih berfokus ke struktur.
Standar Sintaks HTML
Dalam contoh HTML berikut ini, ada dua elemen HTML. Keduanya menggunakan tag paragraf yang sama, yaitu tag <p>, dan keduanya juga pakai atribut arah (directional) yaitu dir, tapi nilainya beda: satu pakai rtl (kanan ke kiri) dan satu lagi ltr (kiri ke kanan).
Perlu diperhatikan, ketika cuplikan HTML ini ditampilkan di browser, tag-tag HTML tersebut mempengaruhi bagaimana elemen HTML ditampilkan di halaman, tapi tag HTML atau atributnya sendiri nggak kelihatan. HTML hanya mendeskripsikan cara menampilkan konten, bukan untuk ditampilkan ke user secara langsung.
Agar browser bisa menampilkan halaman HTML tanpa error, maka HTML-nya harus *well-formed* alias terstruktur dengan baik. Artinya, setiap elemen HTML harus berada di antara tag pembuka — <p> — dan tag penutup — </p>. Selain itu, kalau ada tag baru di dalam tag lain, maka tag baru itu harus ditutup dulu sebelum tag yang menaunginya ditutup. Misalnya, <h1><p>HTML yang benar</p></h1> itu benar, sedangkan <h1><p>HTML yang salah</h1></p> itu salah struktur.
Aturan sintaks lainnya adalah atribut HTML harus ditulis dalam tanda kutip tunggal atau ganda. Meskipun sering diperdebatkan mana yang lebih “benar”, konsorsium W3C menyatakan bahwa dua-duanya sah-sah saja.
Saran terbaik: pilih salah satu gaya kutip dan konsisten di seluruh dokumen. Kamu juga bisa pakai alat pengecek gaya HTML (HTML style-checker) buat jaga konsistensi. Terkadang, tanda kutip tunggal wajib dipakai, misalnya saat nilai atribut mengandung tanda kutip ganda. Sebaliknya juga berlaku.
Yang juga penting, HTML dasarnya pakai bahasa Inggris. Karakter non-Inggris, seperti huruf Mandarin atau simbol khusus (misalnya huruf dengan aksen), bisa jadi nggak tampil dengan benar di halaman web. Buat mengatasi hal ini, kamu harus tentukan encoding karakter dengan elemen seperti ini: <meta charset=”utf-8″/>. Dalam hal ini, utf-8 adalah charset yang dipakai. Ini adalah charset default HTML untuk karakter berbahasa Inggris.