Bài 1 · Cơ bản · 15 phút
HTML là gì: bộ xương trang web
Biên soạn bởi Nguyễn Anh Tuấn
HTML là ngôn ngữ ĐÁNH DẤU (markup), không phải lập trình: thẻ (tag), phần tử (element), thuộc tính (attribute); cấu trúc doctype/html/head/body.
Mở một trang báo điện tử lên, mèo con thấy gì? Một tiêu đề to, vài đoạn văn, mấy tấm ảnh có chú thích, đôi khi một danh sách. Mắt người nhìn phát là biết đâu là tiêu đề, đâu là đoạn. Nhưng máy tính thì không - nó cần được chỉ rõ từng phần là gì.
Đó chính là việc của HTML - viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu. "Đánh dấu" (markup) giống lúc bạn cầm bút dạ quang gạch chân và ghi chú lên một tờ giấy: "chỗ này là tựa đề", "chỗ kia là đoạn cần nhớ". HTML cũng đánh dấu như vậy, nhưng để cho trình duyệt đọc.
- ▸HTML là ngôn ngữ ĐÁNH DẤU (markup): mô tả phần nào của trang là gì.
- ▸Mắt người tự hiểu bố cục; máy thì cần được đánh dấu rõ ràng.
- ▸HTML là bộ xương của mọi trang web - thứ đầu tiên cần học khi làm web.
Ai tạo ra HTML?
Nhiều người quen miệng nói "lập trình HTML", nhưng nói cho đúng thì HTML không phải ngôn ngữ lập trình. Nó không cộng trừ, không có câu lệnh "nếu… thì…", không lặp đi lặp lại. Nó chỉ mô tả: "đây là tiêu đề", "đây là đoạn văn". Giống viết một lá thư có định dạng, chứ không phải giải một bài toán.
Cách đánh dấu là bọc nội dung giữa hai thẻ (tag): một thẻ mở và một thẻ đóng. Ví dụ <p> mở một đoạn văn, </p> đóng nó lại. Cả cụm gộp lại gọi là một phần tử (element):
Đôi khi một thẻ mang thêm thuộc tính (attribute) để bổ sung thông tin, viết theo dạng tên="giá trị" - như href của một liên kết. Thử vài phần tử:
vai-the.html · vài phần tử HTML (lưu .html rồi mở bằng trình duyệt)
<h1>Mèo Ham Học</h1>
<p>Học công nghệ bằng tiếng Việt.</p>
<a href="https://meohamhoc.vn">Vào trang chủ</a>- ▸Phần tử = thẻ mở + nội dung + thẻ đóng (vd <p>…</p>).
- ▸Thẻ đóng giống thẻ mở nhưng thêm dấu gạch chéo: </p>.
- ▸Thuộc tính bổ sung thông tin cho thẻ: href="…" cho biết liên kết trỏ đâu.
Một trang HTML hoàn chỉnh không chỉ là vài thẻ rời. Nó có một bộ khung cố định: dòng khai báo <!doctype html> (báo cho trình duyệt "đây là HTML hiện đại"), rồi thẻ <html> bọc tất cả, bên trong chia làm hai phần lớn:
trang-dau-tien.html · khung tối thiểu của một trang
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Trang đầu tiên của mèo con</title>
</head>
<body>
<h1>Xin chào!</h1>
<p>Đây là trang HTML đầu tiên của mình.</p>
</body>
</html>- ▸<head>: thông tin cho MÁY - tiêu đề tab, bảng mã, mô tả cho Google. Không hiện thành nội dung.
- ▸<body>: phần người dùng THẤY - tiêu đề, đoạn văn, ảnh, nút…
- ▸lang="vi" cho biết trang bằng tiếng Việt; charset="utf-8" để hiện đúng dấu tiếng Việt.
head và body
Khi mở trang, trình duyệt đọc HTML từ trên xuống và dựng các thẻ lồng nhau thành một cái cây. Cây này tên là DOM (Document Object Model). Thẻ <html> là gốc; <head> và <body> là hai nhánh lớn; mỗi thẻ nằm trong thẻ khác trở thành một nhánh con.
Vì mọi thứ là một cây có thứ bậc, việc lồng thẻ cho đúng rất quan trọng: thẻ mở trước thì đóng sau, không được chồng chéo. Sau này CSS và JavaScript đều dựa trên cái cây này để tô màu và làm cho trang tương tác.
Trung thực
Một trang web thật được dựng bằng ba lớp, mỗi lớp một việc:
- ▸HTML - CẤU TRÚC & ý nghĩa (bộ xương): phần nào là gì.
- ▸CSS - TRÌNH BÀY (da thịt, màu sắc, bố cục): cho đẹp.
- ▸JavaScript - TƯƠNG TÁC (cử động): bấm nút, gọi dữ liệu, phản hồi.
Cả khoá này tập trung vào lớp đầu tiên - HTML. Vì chưa có CSS, các trang mèo con làm ra sẽ trông mộc mạc: chữ đen, nền trắng, không màu mè. Đừng lo - đó là chủ ý. Cấu trúc đúng ngay từ đầu thì sau này CSS làm đẹp rất nhanh, Google hiểu trang tốt hơn (sợi chỉ đỏ này dẫn tới bài Semantic HTML là gì ở giữa khoá), và người khác (kể cả chính bạn vài tháng sau) đọc lại dễ dàng.
Bước tiếp theo
Câu hỏi thường gặp
Gần như không. Bạn chỉ cần một trình soạn thảo (VS Code, hoặc thậm chí Notepad) và một trình duyệt. Gõ HTML, lưu thành file đuôi .html, rồi mở file đó bằng trình duyệt là thấy kết quả ngay - không phải cài "ngôn ngữ" gì cả.
Không. HTML là ngôn ngữ ĐÁNH DẤU (markup): nó MÔ TẢ phần nào của trang là tiêu đề, là đoạn văn, là ảnh… chứ không tính toán hay ra quyết định (không có phép tính, không if, không vòng lặp). Phần "lập trình" thật - logic, tương tác - là việc của JavaScript, học ở khoá khác.
Vì chưa có CSS. HTML chỉ lo CẤU TRÚC; CSS mới lo màu sắc, phông chữ, bố cục. Một trang HTML thuần trông mộc là chuyện bình thường và đúng ý ở giai đoạn này - "cấu trúc đúng trước, đẹp sau".
Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.
Trả lời vài câu để chắc rằng em đã nắm bài.
HTML thuộc loại ngôn ngữ nào?
- 1
HTML trong một câu
Bằng lời của mèo con, giải thích "HTML là gì?" trong 1-2 câu mà KHÔNG dùng từ "lập trình".
✅ Hoàn thành khi: Nêu được: HTML là ngôn ngữ đánh dấu, dùng để cho máy biết phần nào của trang là tiêu đề, đoạn văn, ảnh…
- 2
Soi một phần tử
Cho phần tử <h1>Mèo Ham Học</h1>. Chỉ ra đâu là thẻ mở, đâu là nội dung, đâu là thẻ đóng.
✅ Hoàn thành khi: Thẻ mở: <h1> · nội dung: "Mèo Ham Học" · thẻ đóng: </h1> (có dấu gạch chéo).
- 3
Đọc thuộc tính
Trong <a href="https://meohamhoc.vn">Mèo</a>: đâu là thuộc tính, giá trị của nó là gì, và nó dùng để làm gì?
✅ Hoàn thành khi: Thuộc tính: href · giá trị: "https://meohamhoc.vn" · cho biết liên kết này trỏ tới đâu.
- 4
Viết khung một trang
Tự gõ khung một trang HTML hợp lệ: doctype, thẻ html (lang="vi"), head có title, body có một h1.
✅ Hoàn thành khi: Có đủ <!doctype html>, <html lang="vi">, <head><title>…</title></head>, <body><h1>…</h1></body> - lồng đúng thứ tự.
- 5
head hay body?
Mỗi thứ sau nằm trong head hay body: (a) tiêu đề hiện trên tab; (b) một đoạn văn người đọc; (c) khai báo bảng mã charset; (d) ảnh sản phẩm.
✅ Hoàn thành khi: head: (a) tiêu đề tab, (c) charset. body: (b) đoạn văn, (d) ảnh.
- 6
Vẽ cây DOM
Vẽ cây DOM cho trang: html chứa head (chứa title) và body (chứa h1 và một p).
✅ Hoàn thành khi: html ở gốc; hai nhánh head và body; title nằm dưới head; h1 và p nằm dưới body.