Belajar HTML - Memahami HTML dan Peranannya dalam Web
Episode ini membedah apa itu HTML, sejarah singkatnya, posisinya dalam tumpukan web bersama CSS dan JavaScript, serta bagaimana browser memproses markup menjadi DOM dan halaman yang terlihat.
#Pendahuluan
Di episode 0 kalian sudah menyiapkan environment: text editor, browser, server lokal, dan project pertama. Sekarang saatnya masuk ke inti series ini — memahami apa itu HTML dan peranannya dalam web. Sebelum menulis banyak tag, penting untuk tahu mengapa HTML ada dan bagaimana posisinya dalam tumpukan teknologi web.
Episode 1 membahas definisi HTML, sejarah singkatnya, bagaimana browser memproses markup menjadi halaman, dan peran HTML dibanding CSS dan JavaScript. Ini adalah fondasi konseptual yang akan kalian pakai di seluruh 22 episode berikutnya.
#Apa itu HTML
#Kepanjangan dan Makna
HTML adalah singkatan dari HyperText Markup Language. Bukan bahasa pemrograman — HTML adalah bahasa markup, artinya bahasa untuk menandai bagian-bagian konten agar punya makna dan struktur. Kalian tidak menulis logika seperti perulangan atau percabangan; kalian menulis elemen yang mendeskripsikan judul, paragraf, tautan, gambar, dan seterusnya.
Kata HyperText mengacu pada tautan yang menghubungkan satu dokumen ke dokumen lain — inilah yang membentuk web sebagai jaring dokumen yang saling terkait. Setiap kali kalian mengklik tautan, kalian sedang menavigasi hiperteks.
#Sejarah Singkat
HTML lahir pada tahun 1991 ketika Tim Berners-Lee merilis dokumen pertama yang mendeskripsikan tag yang dipakai di CERN. Sejak itu HTML terus berkembang: HTML 4 pada akhir 1990-an, XHTML yang gagal populer, lalu HTML5 yang distandarkan sekitar tahun 2014 dan menjadi fondasi web modern.
Saat ini HTML dikelola oleh WHATWG sebagai HTML Living Standard — bukan versi yang dirilis sekaligus, melainkan spesifikasi yang terus diperbarui. Inilah kenapa kalian akan sering melihat fitur baru HTML muncul tanpa menunggu "versi besar" berikutnya.
#Peran HTML dalam Tumpukan Web
#Tiga Lapisan Web
Sebuah halaman web modern terdiri dari tiga lapisan yang saling melengkapi:
- HTML menyusun konten dan struktur: judul, paragraf, gambar, tombol.
- CSS mengatur presentasi: warna, ukuran, jarak, dan layout.
- JavaScript mengatur perilaku: respons terhadap klik, validasi form, dan pembaruan konten.
Analogi yang sering dipakai: HTML adalah kerangka bangunan, CSS adalah cat dan furnitur, sedangkan JavaScript adalah listrik dan pipa air. Sebuah bangunan yang kokoh dimulai dari kerangka yang benar — di sinilah HTML berperan.
#Kenapa Struktur Lebih Dulu
Banyak pemula terburu-buru menulis CSS dan JavaScript sebelum struktur HTML-nya benar. Padahal keduanya bekerja di atas struktur. CSS membutuhkan selector yang menargetkan elemen HTML, dan JavaScript membutuhkan node dalam dokumen. Struktur yang kacau akan membuat lapisan di atasnya ikut kacau.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Lapisan Web</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<p>Konten ini disusun oleh HTML.</p>
<script src="js/app.js"></script>
</body>
</html>Pada contoh di atas, tag link menyambungkan CSS dan tag script menyambungkan JavaScript — keduanya bekerja karena struktur HTML sudah ada lebih dulu.
#Bagaimana Browser Memproses HTML
#Dari URL Menjadi Halaman
Ketika kalian membuka sebuah alamat, browser menjalankan beberapa tahap:
- Mengirim permintaan HTTP dan menerima dokumen HTML.
- Mengurai (parse) markup menjadi DOM, sebuah pohon node yang mewakili struktur dokumen.
- Mengunduh dan memproses CSS, lalu menggabungkannya dengan DOM untuk menghitung gaya.
- Menjalankan JavaScript, lalu merender halaman ke layar.
DOM adalah representasi internal dokumen yang bisa diakses dan dimodifikasi oleh JavaScript. Meski kalian belum perlu mendalaminya sekarang, pahami bahwa DOM inilah jembatan antara HTML dan JavaScript.
#Melihat HTML Asli Sebuah Situs
Biasakan memeriksa markup halaman sungguhan. Salah satu cara paling sederhana lewat terminal:
curl -s https://example.comPerintah curl -s https://example.com mengambil isi dokumen yang sama persis dengan yang diterima browser, minus proses rendering. Kalian akan melihat tag HTML murni — latihan yang bagus untuk membaca markup orang lain.
Untuk memeriksa header respons, tambahkan opsi -I:
curl -sI https://example.comHeader menampilkan kode status seperti 200 OK, tipe konten, dan server yang merespons — petunjuk awal tentang bagaimana sebuah halaman dikirim ke browser.
#Ekosistem dan Sumber Belajar
#Standar dan Validator
Untuk memastikan markup kalian benar, gunakan W3C HTML Validator di alamat https://validator.w3.org. Validator memeriksa dokumen terhadap standar dan melaporkan peringatan serta error. Contoh sederhana yang sering terdeteksi: tag yang tidak ditutup, atribut yang salah eja, dan elemen yang diletakkan di tempat yang tidak semestinya.
#Sumber Referensi Utama
Dua sumber yang wajib kalian hafalkan alamatnya:
- MDN Web Docs di
https://developer.mozilla.org— dokumentasi HTML paling lengkap dan akurat. - WHATWG HTML Standard di
https://html.spec.whatwg.org— spesifikasi resmi untuk mereka yang ingin mendalami.
Jadikan MDN sebagai kebiasaan: setiap kali menemukan tag baru, buka halaman MDN-nya dan baca bagian Usage notes. Kebiasaan ini akan mempercepat pemahaman kalian jauh melampaui menghafal.
#Penutup
Episode 1 meletakkan fondasi konseptual: HTML adalah bahasa markup yang menyusun konten, berbeda dari CSS yang mengatur tampilan dan JavaScript yang mengatur perilaku. Kalian juga memahami bagaimana browser memproses markup menjadi DOM, serta tahu ke mana harus mencari referensi dan validasi.
Inti yang harus dibawa pulang:
- HTML adalah bahasa markup, bukan bahasa pemrograman.
- HTML, CSS, dan JavaScript adalah tiga lapisan: struktur, presentasi, dan perilaku.
- Browser mengubah markup menjadi DOM sebelum dirender.
- HTML5 menjadi dasar web modern dan terus dikelola sebagai Living Standard.
- Gunakan MDN untuk referensi dan W3C Validator untuk pemeriksaan.
Di episode 2 selanjutnya kita akan membahas struktur dasar dokumen HTML — peran <!DOCTYPE html>, elemen html, head, dan body, plus metadata penting di dalam head. Kalian akan membangun dokumen lengkap pertama yang menjadi pola untuk semua episode berikutnya.