HTML, CSS, và JavaScript
, trong trình duyệt, được xây dựng từ đúng ba ngôn ngữ. Bạn không cần phải tự tay viết chúng, nhưng bạn cần biết mỗi ngôn ngữ phụ trách điều gì.
HTML (HyperText Markup Language — Ngôn ngữ Đánh dấu Siêu văn bản) là phần cấu trúc — nội dung và bộ khung của nó. Nó nói "đây là một tiêu đề, đây là một đoạn văn, đây là một nút bấm." Nó là danh từ của trang web; tự thân nó, HTML là một tài liệu trơn, không có kiểu dáng, giống như một tệp văn bản có gắn nhãn. Trình duyệt biến HTML của bạn thành một cây đối tượng sống, nằm trong bộ nhớ, gọi là DOM (Document Object Model — Mô hình Đối tượng Tài liệu); khi mã lệnh "thay đổi trang," thực chất nó đang thay đổi DOM, và trình duyệt vẽ lại để khớp với nó.
CSS (Cascading Style Sheets — Bảng Kiểu Xếp tầng) là phần kiểu dáng — mọi thứ trông như thế nào. Màu sắc, phông chữ, khoảng cách, bố cục, căn trái hay căn giữa, màn hình nhỏ hay lớn. CSS không thay đổi cái gì có trên trang, chỉ thay đổi cách nó được trình bày. Nếu HTML là danh từ, thì CSS là tính từ.
JavaScript (JS) là phần hành vi — chuyện gì xảy ra khi bạn tương tác. Nó lắng nghe cú bấm, gửi dữ liệu tới , hiện một biểu tượng xoay chờ, cập nhật DOM khi câu trả lời quay về. HTML và CSS là tĩnh; JavaScript khiến trang web làm điều gì đó. Nó là động từ. (Cùng một ngôn ngữ này cũng thường chạy cả backend, đó là lý do bạn sẽ thấy nó ở khắp nơi.)
Một cách để hình dung sự phân chia này: HTML xây một cái cây (DOM), CSS tô màu cho nó, và JavaScript thò tay vào và thay đổi nó:
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" │
└──────────────────────────┘