Vietcodex

HTML, CSS, JavaScript — 3 ngôn ngữ tạo nên mọi website

HTML là 'khung xương' (cấu trúc), CSS là 'quần áo' (vẻ ngoài), JavaScript là 'hoạt động' (tương tác). Hiểu vai trò 3 ngôn ngữ giúp bạn đọc được code frontend, ước lượng công sức dev và phân chia việc designer vs developer.

11 phút đọcCập nhật 2026-05-19
Đang tải audio...
Mục lục bài viết(21)
HTML5 và CSS3 — hai trong ba ngôn ngữ web frontend

HTML5 và CSS3 — logo chính thức của hai ngôn ngữ web. HTML5 (màu cam) chịu trách nhiệm cấu trúc, CSS3 (màu xanh) quyết định vẻ ngoài. JavaScript là ngôn ngữ thứ ba bổ sung tương tác. Cả ba chạy nguyên bản trong trình duyệt. Nguồn: Wikimedia Commons (CC BY 3.0).

Hiểu đơn giản nhất

Một website hoàn chỉnh giống như một người mặc đẹp đang chuyển động:

Thành phầnTrên web là...Trên người là...
Cấu trúc nội dungHTMLKhung xương (định vị tay, chân, đầu)
Vẻ ngoàiCSSQuần áo, makeup, kiểu tóc
Hoạt động/tương tácJavaScriptHơi thở, đi đứng, nói cười

Bạn không thể có "người" chỉ với khung xương (chỉ HTML = web tróc trụi, xấu). Cũng không thể có "người" mà chỉ có quần áo không có khung (CSS không có HTML thì vẽ vào đâu?). JavaScript không bắt buộc — có những trang web tĩnh chỉ HTML+CSS, nhưng mọi web có tương tác (form, đăng nhập, giỏ hàng) đều cần JS.

Cả 3 chạy trong trình duyệt (Chrome, Safari, Firefox). Bạn không cần cài gì thêm.

Tại sao bạn cần biết

  • Đọc được code frontend cơ bản. Nhìn vào file .html, .css, .js không bị "khớp tay" — đoán được file nào làm gì.
  • Phân chia việc đúng người. Designer Figma → frontend dev code HTML+CSS (~50% công) → JS dev làm tương tác (~50% công).
  • Hiểu vì sao web load nhanh chậm. HTML/CSS render ngay khi browser nhận; JS phải tải + parse + chạy → mỗi MB JS thêm ~200-500ms load.
  • Tự sửa text/ảnh đơn giản trên WordPress mà không phiền dev. Biết <h2>Tiêu đề</h2> đổi thành <h2>Tiêu đề mới</h2> là xong.

HTML — khung xương

HTML (HyperText Markup Language, 1991) là ngôn ngữ "đánh dấu nội dung" bằng các tag (thẻ). Mỗi tag mang một ý nghĩa cụ thể — đây là tiêu đề, đây là đoạn văn, đây là ảnh, đây là link.

Cấu trúc tối thiểu

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Trang chủ VietCodex</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Chào mừng đến VietCodex</h1>
    <p>Chúng tôi build web, app, SaaS bằng AI.</p>
    <a href="/dich-vu">Xem dịch vụ</a>
  </body>
</html>

Trình duyệt đọc từ trên xuống, hiển thị nội dung tương ứng. <head> chứa metadata (không hiện), <body> chứa nội dung (hiện ra).

Tags HTML phổ biến

TagÝ nghĩaVí dụ
<h1> – <h6>Tiêu đề (h1 quan trọng nhất, h6 nhỏ nhất)<h1>Tiêu đề bài</h1>
<p>Đoạn văn<p>Nội dung đoạn.</p>
<a href="...">Link đi nơi khác<a href="/blog">Blog</a>
<img src="..." alt="...">Ảnh<img src="logo.png" alt="Logo" />
<ul> + <li>Danh sách không thứ tự<ul><li>Mục 1</li></ul>
<ol> + <li>Danh sách có số thứ tự<ol><li>Bước 1</li></ol>
<table>Bảng<table><tr><td>...</td></tr></table>
<form>Form nhập liệu<form><input /><button>OK</button></form>
<div>Container chia khối<div class="card">...</div>
<span>Container inline<span class="hl">red text</span>
<button>Nút bấm<button>Đặt hàng</button>
<input>Ô nhập<input type="email" />

HTML có ~110 tag tổng cộng nhưng dùng nhiều nhất chỉ 15-20 tag trên. Học HTML trong 1-2 ngày là đủ.

Sơ đồ phân loại element HTML — Flow, Sectioning, Heading, Phrasing, Embedded, Interactive, Metadata

Sơ đồ phân loại các category của element HTML theo HTML5 spec — mỗi tag thuộc một hoặc nhiều category, quyết định nó nằm được ở vị trí nào trong cây HTML. Ví dụ: tag <p> thuộc Flow + Phrasing, dùng được trong section nhưng KHÔNG dùng được trong <title>. Nguồn: Wikimedia Commons (CC BY-SA 3.0).

CSS — quần áo và makeup

CSS (Cascading Style Sheets, 1996) quyết định web "trông như thế nào" — màu sắc, font, kích thước, khoảng cách, layout, animation. Không có CSS, mọi web đều trông giống Wikipedia 1995 (text đen Times New Roman trên nền trắng).

Ví dụ CSS đơn giản

h1 {
  color: #0f766e;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}
 
.btn-primary {
  background: #0f766e;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
}
 
.btn-primary:hover {
  background: #134e4a;
}

Cấu trúc: selector (chọn HTML element nào) { declarations (cặp property: value;) }.

CSS làm được gì

  • Layout: Flexbox, Grid — sắp xếp khối thành cột, hàng, lưới
  • Responsive (giao diện co dãn theo màn hình): web nhìn khác trên mobile vs desktop với cùng HTML
  • Typography: font, kích thước, khoảng cách dòng
  • Color: màu chữ, nền, gradient
  • Animation: hover effect, fade in/out, parallax
  • Print: web in ra giấy nhìn khác trên màn

CSS framework (bộ khung lập trình có sẵn) — bộ Lego dựng sẵn

Viết CSS từ con số 0 cho mỗi dự án mất thời gian. Framework cung cấp class CSS có sẵn:

FrameworkTriết lýPhù hợp với
Tailwind CSSUtility-first — class trực tiếp trong HTML (text-blue-500 p-4)Dự án 2026 mới, dev có kinh nghiệm
shadcn/uiTailwind + component (khối UI tái sử dụng — Button, Modal, Card)Next.js apps, SaaS (Software as a Service — phần mềm dạng dịch vụ), dashboard
BootstrapComponent có sẵn (btn btn-primary)Dự án truyền thống, admin panel
Material UITheo design Google MaterialApp có brand "Google-ish"
CSS thuầnViết tay từ đầuDesigner pixel-perfect, dự án design unique

90% web 2026 dùng Tailwind hoặc shadcn/ui — bao gồm cả wiki VietCodex bạn đang đọc.

JavaScript — hoạt động và cử động

Logo JavaScript — chữ JS trên nền vàng

Logo không chính thức của JavaScript — màu vàng đặc trưng. JavaScript ra đời 1995 tại Netscape, ban đầu chỉ chạy trong trình duyệt, giờ chạy được khắp nơi: server (Node.js), mobile (React Native), desktop (Electron), IoT. Nguồn: Wikimedia Commons (trademark fair use).

JavaScript (JS, 1995, Brendan Eich viết trong 10 ngày tại Netscape) là ngôn ngữ duy nhất chạy được nguyên bản trong trình duyệt. Nó thêm "sự sống" vào trang web:

  • Form validation (kiểm tra email đúng format trước khi submit)
  • Modal popup khi bấm nút
  • Animation khi scroll
  • Tải dữ liệu mới mà không reload trang (fetch API)
  • Bộ đếm thời gian, đồng hồ đếm ngược
  • Đăng nhập, đăng xuất, lưu giỏ hàng

Ví dụ JS cơ bản

// Lấy nút bấm có id="btn-buy"
const button = document.getElementById("btn-buy");
 
// Khi bấm nút...
button.addEventListener("click", async () => {
  // Gửi API đặt hàng
  const response = await fetch("/api/order", {
    method: "POST",
    body: JSON.stringify({ productId: 123 }),
  });
  const data = await response.json();
  
  // Hiển thị thông báo
  alert(`Đặt hàng thành công! Mã đơn: ${data.orderId}`);
});

Đoạn code trên kết hợp: DOM manipulation (getElementById) + Event handling (addEventListener) + Async (await) + API call (fetch) — 4 khái niệm cốt lõi của JS.

JavaScript chạy ở đâu

Môi trườngĐể làm gì
Trình duyệtFrontend — sửa DOM, gọi API, animation
Node.js (server)Backend — xử lý request, kết nối DB, gửi mail
Mobile (React Native, Capacitor)App iOS/Android dùng JS
Desktop (Electron)App PC dùng JS (VS Code, Discord, Slack)
IoT (Espruino, Johnny-Five)Lập trình thiết bị nhúng

JS bắt đầu từ trình duyệt, giờ chạy được khắp nơi. Đây là lý do dev biết JS có thể làm web + app + backend chỉ với 1 ngôn ngữ.

Framework JS

Viết JS thuần (vanilla) cho web phức tạp khó duy trì → dùng framework:

FrameworkTạo bởiPhù hợp
ReactFacebook (2013)SaaS, dashboard, web app phức tạp — phổ biến nhất 2026
VueEvan You (2014)Web vừa, dev solo, Trung Quốc + VN ưa chuộng
SvelteRich Harris (2016)Web nhỏ tối ưu performance
Next.jsVercel (2016)Full-stack React, SEO tốt, đa dùng nhất cho new dự án
NuxtSébastien Chopin (2016)Full-stack Vue
Vanilla JS(không)Web đơn giản, không muốn dependency

Ví dụ thực tế: anatomy của nút "Đặt hàng" trên Shopee

Trên app Shopee, nút "Đặt hàng" gồm 3 lớp HTML/CSS/JS làm việc cùng nhau:

Lớp HTML (cấu trúc)

<button id="btn-buy" class="btn-primary" data-product-id="123">
  Đặt hàng
</button>

Đây nói với trình duyệt: "có một nút bấm, label là 'Đặt hàng', thuộc product id 123".

Lớp CSS (vẻ ngoài)

.btn-primary {
  background: #ee4d2d;       /* Màu cam đặc trưng Shopee */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
 
.btn-primary:hover {
  background: #d23f24;       /* Sẫm hơn khi hover */
}
 
.btn-primary:active {
  transform: translateY(1px); /* Nhún xuống khi bấm */
}

CSS biến nút trở thành "trông như button Shopee" — màu cam đặc trưng, bo góc, hover effect.

Lớp JavaScript (tương tác)

document.getElementById("btn-buy").addEventListener("click", async (e) => {
  const productId = e.target.dataset.productId;
  
  // Disable nút trong khi xử lý
  e.target.disabled = true;
  e.target.textContent = "Đang xử lý...";
  
  try {
    const response = await fetch("/api/orders", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ productId, quantity: 1 }),
    });
    const data = await response.json();
    
    if (response.ok) {
      window.location.href = `/orders/${data.orderId}/success`;
    } else {
      alert("Đặt hàng thất bại: " + data.error);
    }
  } catch (err) {
    alert("Lỗi mạng, thử lại sau.");
  } finally {
    e.target.disabled = false;
    e.target.textContent = "Đặt hàng";
  }
});

JS xử lý: lấy productId từ data attribute, gọi API /api/orders, hiển thị loading, xử lý lỗi, redirect khi thành công. Toàn bộ tương tác "bấm rồi xảy ra gì" là việc của JavaScript.

Phân chia thời gian dev cho 1 nút như trên:

  • HTML: ~5% (1 dòng)
  • CSS: ~20% (10-30 dòng, design + animation)
  • JS: ~75% (50-100 dòng, logic + error handling + API + state)

Khi nào dùng gì

Bạn buildHTMLCSSJavaScript
Landing page giới thiệuCóCóTối thiểu (smooth scroll, menu mobile)
Blog đọc onlyCóCóKhông cần
Web có form liên hệCóCóCần (validate + submit)
Web e-commerce có giỏ hàngCóCóBắt buộc nhiều
Dashboard / admin panelCóCóBắt buộc nhiều
Web 1-page (SPA)Có (auto-gen)Có (auto-gen)Toàn bộ
Game trong browserCó (canvas tag)Tối thiểuToàn bộ

Designer hay Developer — ai làm gì

Vai tròHTMLCSSJavaScriptSalary VN 2026 (mid)
UI/UX DesignerHiếmHiếmKhông12-25 triệu
HTML/CSS coderThành thạoĐỉnhCơ bản12-20 triệu
Frontend DeveloperThành thạoThành thạoĐỉnh18-35 triệu
Full-stack DeveloperThành thạoTrung bìnhĐỉnh20-40 triệu
Backend DeveloperCơ bảnHiếmCơ bản18-35 triệu

Pattern dự án VN: 1 designer Figma → 1 frontend dev code HTML/CSS/JS → 1-2 backend dev cho API + DB.

Tóm tắt 1 dòng

HTML = khung xương (cấu trúc), CSS = quần áo (vẻ ngoài), JavaScript = hoạt động (tương tác). Cả ba chạy nguyên bản trong trình duyệt, không cần cài gì. Web tĩnh chỉ cần HTML+CSS, web có tương tác bắt buộc thêm JS. 80% web 2026 dùng Tailwind cho CSS + React/Next.js cho JS.

Đọc tiếp

Câu hỏi thường gặp

Tôi không làm dev, có cần học HTML/CSS không?
Học cơ bản (2-4 buổi YouTube) rất đáng cho marketer, content writer, founder. Lợi: tự sửa text/ảnh trên WordPress mà không phiền dev, đọc được template ngoài chỉnh chỉnh cho web mình, hiểu được dev báo cáo 'phần này phải code CSS thêm 2 ngày'. JavaScript thì khó hơn, có thể bỏ qua nếu không tự build.
Tại sao web chỉ HTML/CSS load nhanh hơn web có JavaScript nhiều?
Vì HTML/CSS trình duyệt parse + render thẳng, ~50-200ms. JavaScript phải tải file (50KB-2MB), parse, chạy, rồi mới sửa DOM — thêm 200-2000ms. Một bài blog 1000 từ chỉ cần HTML/CSS = load 0.5s. Một SPA React = load 2-5s. Vì vậy blog/landing page ưu tiên 'static HTML', SaaS mới dùng SPA.
CSS framework như Tailwind có tốt hơn viết CSS tay không?
Tailwind nhanh hơn ~3-5 lần cho dev có kinh nghiệm — viết class trực tiếp trong HTML thay vì jump giữa 2 file. Bootstrap có sẵn component (button, modal) — tiết kiệm thời gian dự án đơn giản. CSS tay phù hợp với designer pixel-perfect + dự án có brand identity mạnh. 80% dự án 2026 chọn Tailwind hoặc shadcn/ui (built on Tailwind).
Vanilla JavaScript vs React/Vue — chọn cái nào?
Web đơn giản (form, vài animation): Vanilla JS đủ và nhẹ nhất (~10KB). Web app phức tạp (dashboard, SPA): React/Vue/Svelte cần thiết. Quy tắc: nếu web có > 3 trang có state phức tạp → framework. Nếu chỉ 1-2 form + animation → Vanilla. Đừng dùng React cho landing page tĩnh — overkill và làm chậm web.
JavaScript trong trình duyệt và Node.js là cùng ngôn ngữ?
Cùng ngôn ngữ JavaScript (ECMAScript), khác môi trường chạy. JS trong trình duyệt có `document`, `window`, `fetch` — DOM APIs để sửa giao diện. Node.js không có DOM nhưng có `fs` (file system), `http` (server), `process` — APIs để build backend. Cú pháp giống nhau ~95%. Học JS xong có thể làm cả frontend (browser) lẫn backend (Node.js).
TypeScript là gì? Khác JavaScript thế nào?
TypeScript = JavaScript + type system. Bạn khai báo trước biến này là số, biến kia là chuỗi — IDE báo lỗi khi sai. Trình duyệt KHÔNG hiểu TypeScript trực tiếp; phải biên dịch (compile) thành JavaScript. Lợi: bắt 50-70% bug ở compile time, IDE autocomplete tốt hơn 5x. 90% dự án professional 2026 dùng TypeScript thay JS thuần.
Tôi muốn sửa text trên web WordPress, có cần biết HTML không?
Biết HTML cơ bản giúp ÍCH nhưng không bắt buộc. WordPress có visual editor (Gutenberg, Elementor) — gõ như Word. Khi cần custom: thẻ <h2>, <strong>, <a href> 5 thẻ là đủ 95% trường hợp. Học 1 buổi đọc tài liệu HTML cơ bản trên W3Schools hoặc MDN là đủ.
Tôi học HTML/CSS/JS theo thứ tự nào?
Thứ tự đúng: (1) HTML 1-2 ngày — biết viết khung trang; (2) CSS 1-2 tuần — biết tạo layout, responsive; (3) JavaScript 1-3 tháng — vòng lặp, function, fetch API, DOM manipulation; (4) Framework (React/Vue) 1-2 tháng. Tài nguyên VN: F8 School (miễn phí, tiếng Việt), CodeCademy (interactive, tiếng Anh), freeCodeCamp (cam kết job ready).