Cara Kerja HTML

Ketika pengunjung mengetik alamat www.example.com , halaman lengkap dengan judul, paragraf, dan daftar menu tampil dalam hitungan detik. Proses itu tidak terjadi sekaligus: dokumen HTML berpindah dari server, dibaca bagian demi bagian, lalu dirender. Pada Chapter ini kita mengikuti perjalanan tersebut dari awal hingga akhir, mulai dari permintaan HTTP hingga halaman tampil di layar. Pemahaman alur ini menjadi dasar untuk Chapter-Chapter berikutnya.

Perjalanan Dokumen dari Server ke Browser #

Komunikasi antara browser dan server berlangsung dengan HTTP (HyperText Transfer Protocol), protokol pengiriman berbasis teks. Alurnya dapat kita urutkan sebagai berikut:

1. Pengunjung mengetik URL: browser membaca alamat yang diketik dan mengenali domain www.example.com yang dituju.
2. Browser mengirim HTTP request: pesan berbasis teks yang berisi permintaan dokumen utama.
3. Server membalas dengan HTTP response: server mengirim balik baris status (misalnya 200 OK) beserta isi dokumen HTML.
4. Browser mulai merender: isi response dibaca dan halaman disusun di layar.

Diagram berikut merangkum alur tersebut dari server hingga halaman tampil:

Diagram di atas menegaskan dua pihak yang bekerja sama: server yang menyimpan dan mengirim dokumen, serta browser yang membaca dan merender. Request dan response berlangsung melalui jaringan, sedangkan parsing hingga render berlangsung di dalam browser; bagian kedua itulah yang kita selami berikutnya.

Dari Byte Menjadi Node #

Dokumen HTML yang sampai ke browser berupa rangkaian byte, yaitu data mentah tanpa makna. Browser tidak langsung menggambar halaman; parser HTML mengolah byte tersebut melalui beberapa tahap. Parser menerjemahkan byte menjadi karakter sesuai pengodean yang ditetapkan, mengelompokkan karakter menjadi token saat bertemu tanda < dan >, lalu merakit token menjadi node. Node-node tersebut tersusun menjadi pohon struktur bernama DOM (Document Object Model), representasi halaman yang dipakai saat merender.

Ambil satu elemen paragraf sederhana sebagai ilustrasi:

<p>Menu tersaji setiap pagi.</p>

Output yang Dihasilkan:

Parser menghasilkan token secara berurutan:
  - token tag pembuka : <p>
  - token teks        : Menu tersaji setiap pagi.
  - token tag penutup : </p>

Tiga token di atas dirakit menjadi satu node paragraf berisi teks; seluruh elemen dokumen menjalani proses yang sama. Simpan contoh berikut sebagai file contoh-alur.html, lalu buka dengan browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Menu Warung Kopi</title>
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Menu tersaji setiap pagi.</p>
  <ul>
    <li>Kopi susu</li>
    <li>Roti bakar</li>
  </ul>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Warung Kopi Melati" di bagian atas halaman
  - Satu paragraf pengantar tepat di bawahnya
  - Daftar berbutir berisi "Kopi susu" dan "Roti bakar"
  - Teks "Menu Warung Kopi" pada tab browser

Mari kita telaah apa yang dilakukan parser pada baris-baris di atas:

1. Baris 1 (<!doctype html>): parser memasuki mode standar dengan aturan HTML modern.
2. Baris 2 (<html lang="id">): elemen akar yang menjadi node paling atas pada DOM.
3. Baris 3-6 (<head> … </head>): bagian meta; <meta charset="utf-8"> menentukan cara byte diterjemahkan menjadi karakter, dan <title> menghasilkan teks pada tab browser.
4. Baris 7 (<body>): awal bagian konten yang terlihat oleh pengunjung.
5. Baris 8 (<h1>): tag pembuka, teks, dan tag penutup dirakit menjadi node heading yang dirender besar dan tebal.
6. Baris 9 (<p>): node paragraf dengan jarak vertikal bawaan.
7. Baris 10-13 (<ul> … </ul>): node daftar sebagai induk dengan dua node li sebagai anak; parser menuntaskan isi induk sebelum menutupnya, sesuai sifat nested. Section Lists membahasnya lebih lengkap.
8. Baris 14-15: penutup </body> dan </html> menandai akhir parsing.

Elemen sebagai Instruksi Struktur #

Hasil parsing menunjukkan peran sebenarnya setiap elemen: elemen adalah instruksi struktur untuk browser. Elemen h1 menyatakan judul terpenting, sehingga browser merendernya besar dan tebal. Elemen p menyatakan paragraf, dan browser menambahkan jarak vertikal di antara paragraf. Elemen ul dengan anak li menyatakan daftar, sehingga browser menampilkan butir sebelum tiap barisnya.

CSS dan JavaScript Menyusul #

DOM hasil parser menjadi pijakan dua teknologi lainnya. Saat parser menemukan elemen link yang menunjuk file CSS, browser mengunduhnya dan menerapkan tampilan pada struktur. Saat parser menemukan elemen script, JavaScript diunduh lalu dijalankan dan dapat mengubah DOM tanpa dimuat ulang. Karena keduanya menempel pada struktur, dokumen HTML yang tertata menjadi langkah pertama. Bagian HTML dan CSS serta HTML dan JavaScript membahasnya mendalam.

Alur request, parsing, dan render berlangsung setiap kali halaman dibuka; dengan memahaminya, kita siap melihat posisi HTML dalam pekerjaan sehari-hari para pengembang web. Chapter HTML dalam Web Development membahasnya berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — How browsers work
• MDN Web Docs — Document Object Model (DOM)
• WHATWG — HTML Living Standard

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Menu Warung Kopi</title>
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Menu tersaji setiap pagi.</p>
  <ul>
    <li>Kopi susu</li>
    <li>Roti bakar</li>
  </ul>
</body>
</html>