Bài 3: HTML — cấu trúc một trang web
Sau khi hiểu web hoạt động thế nào (Bài 1) và cài công cụ (Bài 2), giờ ta viết HTML thật. HTML là bộ khung nội dung của trang. Cuối bài, bạn sẽ có khung trang cá nhân đầu tiên hiển thị được trong trình duyệt — viên gạch đầu của trang web mà ta sẽ đưa lên mạng ở cuối series.
⏱️ Cách học bài này (~30 phút): đọc về thẻ + khung trang (10’), tự gõ và mở trong trình duyệt các bài thực hành (12’), xem lỗi thường gặp (4’), lưu file mang về (4’).
Mục tiêu bài học
Sau bài này bạn sẽ:
- Hiểu thẻ (tag) HTML và cặp mở/đóng.
- Nhớ khung chuẩn của một trang HTML.
- Dùng các thẻ nội dung cơ bản: tiêu đề
<h1>–<h6>, đoạn văn<p>. - Tự tạo file
index.htmllà khung trang cá nhân của bạn.
🎯 Đóng góp vào đích series: bài này dựng khung trang cá nhân — mảnh đầu tiên của trang web bạn sẽ deploy ở cuối series (đích: 1 trang cá nhân có URL chia sẻ được).
1. Thẻ (tag) HTML là gì?
HTML đánh dấu nội dung bằng thẻ đặt trong dấu ngoặc nhọn. Phần lớn thẻ đi theo cặp mở/đóng, bao quanh nội dung:
<p>Đây là một đoạn văn.</p>
<p>= thẻ mở,</p>= thẻ đóng (có dấu/).- Nội dung nằm giữa hai thẻ.
Thẻ có thể lồng nhau, nhưng phải đóng đúng thứ tự (mở sau → đóng trước).
2. Khung chuẩn của một trang HTML
Mọi trang HTML đều có bộ khung này — học thuộc:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Tiêu đề trên tab trình duyệt</title>
</head>
<body>
<!-- Nội dung hiển thị nằm ở đây -->
</body>
</html>
Giải thích từng phần:
<!DOCTYPE html>— báo cho trình duyệt đây là HTML hiện đại.<html lang="vi">— gốc của trang,lang="vi"cho biết tiếng Việt.<head>— thông tin không hiển thị trên trang: bảng mãcharset="UTF-8"(để hiện đúng tiếng Việt có dấu) và<title>(tên trên tab).<body>— mọi thứ người xem nhìn thấy nằm trong đây.
3. Code mẫu có chú thích — khung trang cá nhân
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang của Lan</title> <!-- hiện trên tab -->
</head>
<body>
<h1>Nguyễn Thị Lan</h1> <!-- tiêu đề lớn nhất, mỗi trang nên có 1 -->
<p>Xin chào! Tôi là nhân viên marketing.</p> <!-- đoạn giới thiệu -->
<h2>Về tôi</h2> <!-- tiêu đề mục, nhỏ hơn h1 -->
<p>Tôi thích viết nội dung và chụp ảnh.</p>
</body>
</html>
Cách chạy: lưu thành file index.html, rồi nhấp đúp mở bằng trình duyệt. Kết quả hiển thị: dòng “Nguyễn Thị Lan” cỡ chữ lớn, bên dưới là đoạn giới thiệu và mục “Về tôi”. Tab trình duyệt ghi “Trang của Lan”.
Lưu ý: <h1> to nhất, <h2>…<h6> nhỏ dần — dùng để phân cấp tiêu đề, không phải để chỉnh cỡ chữ (việc đó dành cho CSS ở Bài 5).
4. Bài thực hành (tự gõ và mở trong trình duyệt)
Bài 1. Tạo file index.html với khung chuẩn ở mục 2, đặt <title> là tên bạn.
Bài 2. Thêm <h1> tên bạn và 1 đoạn <p> giới thiệu, mở trong trình duyệt xem kết quả.
Bài 3. Thêm mục <h2>Sở thích</h2> và 2 đoạn <p> mô tả sở thích.
Bài 4. Thử lồng sai (mở <h1> mà quên </h1>) rồi mở trình duyệt để thấy trang vỡ thế nào — sau đó sửa lại.
✅ Kết quả mong đợi: mở file trong trình duyệt thấy tiêu đề lớn + các đoạn văn, tiếng Việt hiển thị đúng dấu (nhờ
charset="UTF-8"), tab ghi đúng tên bạn.
5. Lỗi thường gặp & cách sửa
| Lỗi | Biểu hiện | Cách sửa |
|---|---|---|
Quên thẻ đóng (</p>, </h1>) |
phần dưới bị “dính” vào tiêu đề, bố cục vỡ | đóng đủ mọi thẻ, đúng thứ tự |
| Tiếng Việt ra ký tự lạ (Ã, Æ) | thiếu <meta charset="UTF-8"> |
thêm dòng charset vào <head> |
| Mở file thấy nguyên code | lưu sai đuôi (.txt) |
lưu lại với đuôi .html |
| Lồng thẻ sai thứ tự | trình duyệt hiển thị lộn xộn | mở sau thì đóng trước: <p><b>...</b></p> |
💾 Mang về — file hoàn chỉnh
Lưu file index.html (khung trang cá nhân ở mục 3) vào một thư mục dự án. Đây là mảnh đầu tiên của trang cá nhân; các bài sau sẽ thêm ảnh, liên kết (Bài 4), màu sắc và bố cục (Bài 5–7).
Thuật ngữ chốt
| Thuật ngữ | Giải thích ngắn |
|---|---|
| HTML | Ngôn ngữ đánh dấu cấu trúc/nội dung trang web. |
| Thẻ (tag) | Từ khoá trong < > đánh dấu nội dung; thường đi cặp mở/đóng. |
<head> |
Phần thông tin không hiển thị (title, charset…). |
<body> |
Phần nội dung người xem nhìn thấy. |
charset="UTF-8" |
Bảng mã giúp hiển thị đúng tiếng Việt có dấu. |
Tự kiểm tra
1. Thẻ đóng của <h2> viết thế nào?
2. Nội dung hiển thị cho người xem nằm trong thẻ nào?
3. Vì sao cần <meta charset="UTF-8">?
4. (Mini-task) Tạo index.html khung trang cá nhân của bạn (tên + 1 đoạn giới thiệu) và mở trong trình duyệt.
Gợi ý đáp án
- 1:
</h2>. - 2: trong
<body>. - 3: để trình duyệt hiển thị đúng tiếng Việt có dấu, tránh ký tự lỗi.
- 4: (tự làm) — đạt khi trình duyệt hiện tiêu đề + đoạn văn, tiếng Việt đúng dấu.
Ghi nhớ nhanh
- HTML = các thẻ đánh dấu nội dung; phần lớn đi cặp mở/đóng.
- Khung chuẩn:
<!DOCTYPE html>→<html>→<head>(title, charset) →<body>(nội dung). <h1>–<h6>phân cấp tiêu đề;<p>cho đoạn văn.
Bài tập về nhà: mở rộng index.html thành 3 mục (<h2>) với nội dung thật của bạn. Ôn lại Bài 1: Web hoạt động thế nào. Bài 4: thêm liên kết, ảnh, danh sách và bảng.
Câu hỏi thường gặp
Thẻ HTML là gì?
Thẻ (tag) là từ khoá đặt trong dấu ngoặc nhọn để đánh dấu nội dung, vd <p>…</p> cho đoạn văn. Phần lớn thẻ đi theo cặp mở/đóng; thẻ đóng có thêm dấu gạch chéo: </p>.
Có cần cài gì để xem trang HTML không?
Không. Bạn chỉ cần lưu file đuôi .html rồi mở bằng trình duyệt (nhấp đúp hoặc kéo vào trình duyệt). Mọi máy đều có sẵn trình duyệt nên không cần cài thêm.
Phù thủy bàn phím, mê tự động hoá và 'lười thông minh'. Gom phần mềm, code và AI thành mấy phép nhỏ giúp bạn xong việc trước giờ nghỉ trưa.
Bài liên quan
Bài 2: Biến và kiểu dữ liệu trong Python
Bài 2 series Python cho người mới (bài học 30 phút): hiểu biến, 4 kiểu dữ liệu cơ bản và ép kiểu qua một chương trình tính BMI tự viết — kèm bài tập gõ code, lỗi thường gặp và code mang về.
Các ngôn ngữ lập trình đáng học nhất 2026 (chọn theo mục tiêu)
Đừng hỏi ‘ngôn ngữ nào tốt nhất’ — hãy hỏi ‘mình muốn làm gì’. Bài viết gợi ý ngôn ngữ nên học theo từng mục tiêu (web, dữ liệu/AI, app, tự động hoá) và cách chọn ngôn ngữ đầu tiên.
Học JavaScript từ con số 0: lộ trình cho người mới
JavaScript là ngôn ngữ của web. Bài viết vạch lộ trình tự học từ con số 0: nền tảng cần nắm theo đúng thứ tự, dự án thực hành cho từng mốc, và những bẫy khiến người mới bỏ cuộc.