HTML, CSS, dan JavaScript
, di dalam browser, dibangun dari tepat tiga bahasa. Kamu tidak perlu menulisnya dengan tangan, tapi kamu perlu tahu apa yang dimiliki masing-masing.
HTML (HyperText Markup Language) adalah struktur — konten dan kerangkanya. Ia berkata "ini judul, ini paragraf, ini tombol." Ia adalah kata benda dari sebuah halaman; dengan sendirinya, HTML adalah dokumen polos tanpa gaya, seperti file teks dengan label. Browser mengubah HTML-mu menjadi pohon objek yang hidup di memori yang disebut DOM (Document Object Model); ketika kode "mengubah halaman," yang sebenarnya diubah adalah DOM-nya, dan browser menggambar ulang untuk menyesuaikan.
CSS (Cascading Style Sheets) adalah gaya — bagaimana tampilan segala sesuatunya. Warna, font, jarak, tata letak, rata kiri atau tengah, layar kecil versus besar. CSS tidak mengubah apa yang ada di halaman, hanya bagaimana itu ditampilkan. Kalau HTML adalah kata benda, CSS adalah kata sifat.
JavaScript (JS) adalah perilaku — apa yang terjadi ketika kamu berinteraksi. Ia mendengarkan klik, mengirim data ke , menampilkan spinner, memperbarui DOM ketika jawabannya kembali. HTML dan CSS itu statis; JavaScript membuat sebuah halaman melakukan sesuatu. Ia adalah kata kerja. (Bahasa yang sama juga umum dipakai menjalankan backend, itu sebabnya kamu akan melihatnya di mana-mana.)
Satu cara untuk membayangkan pembagian ini: HTML membangun sebuah pohon (DOM), CSS mewarnainya, dan JavaScript menjangkau masuk dan mengubahnya:
HTML ─▶ builds the DOM tree CSS ─▶ styles it JS ─▶ changes it
┌──────────────────────────┐
│ page (document) │
│ ├── header │ colors, fonts, on click,
│ │ └── "My App" │ spacing applied update a node
│ └── form │ to each node → browser redraws
│ ├── input (name) │
│ └── button "Save" │
└──────────────────────────┘