Khi bạn mở một trang web trên trình duyệt (Chrome, Firefox, Edge…), bạn thấy các chữ, hình ảnh, nút bấm được sắp xếp gọn gàng. Nhưng làm sao tính toán được điều đó? Câu trả lời là HTML — ngôn ngữ cấu trúc web mà bất kỳ lập trình viên web nào cũng phải biết.
Bài này sẽ giúp bạn hiểu HTML là gì, tại sao cần dùng HTML, và cách viết cấu trúc trang web đầu tiên của mình. Sau bài này, bạn sẽ tự tin tạo một trang web đơn giản!
HTML là gì?
HTML viết tắt của HyperText Markup Language (Ngôn ngữ Đánh dấu siêu văn bản). Nó là một ngôn ngữ dùng để tạo cấu trúc và nội dung của trang web.
Thay vì viết chương trình phức tạp, HTML dùng các thẻ (tag) để “đánh dấu” các phần tử trên trang. Ví dụ:
<h1>dùng để tạo tiêu đề lớn<p>dùng để tạo đoạn văn<img>dùng để chèn hình ảnh<a>dùng để tạo liên kết (link)
HTML không phải ngôn ngữ lập trình (không có logic, không tính toán). Nó chỉ là bộ khung để xếp nội dung. Nếu HTML là xương của một trang web, thì CSS là da thịt (làm đẹp), và JavaScript là cơ (làm chuyển động).
Tại sao cần HTML?
Hãy tưởng tượng bạn muốn chia sẻ một bản tài liệu với bạn bè. Nếu bạn chỉ viết hết vào một file text (.txt), kết quả sẽ lộn xộn, khó đọc. Nhưng nếu bạn sử dụng các “thẻ” để đánh dấu (tiêu đề này là chương 1, đoạn này là chú thích…), tài liệu sẽ rõ ràng hơn nhiều.
HTML làm chính xác điều đó:
- Cấu trúc nội dung: Phân biệt tiêu đề, đoạn văn, danh sách…
- Dễ bảo trì: Code rõ ràng, dễ chỉnh sửa sau này
- Khả năng truy cập: Người dùng khiếm thị dùng trình đọc màn hình có thể hiểu cấu trúc trang
- Tối ưu SEO: Công cụ tìm kiếm Google hiểu được nội dung chính của trang
Cấu trúc cơ bản của một trang HTML
Tất cả trang HTML đều có cấu trúc giống nhau. Hãy xem ví dụ dưới đây:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài viết đầu tiên của tôi</title>
</head>
<body>
<h1>Xin chào thế giới!</h1>
<p>Đây là trang web đầu tiên của tôi.</p>
</body>
</html>Hãy phân tích từng phần:
| Phần | Chức năng | Giải thích |
|---|---|---|
<!DOCTYPE html> | Khai báo loại tài liệu | Báo cho trình duyệt rằng đây là file HTML 5 |
<html> | Phần tử gốc | Bao bọc toàn bộ nội dung trang, phải có lang="vi" (tiếng Việt) |
<head> | Phần đầu (thông tin trang) | Chứa tiêu đề, ký tự, liên kết CSS, meta… (không hiển thị trực tiếp) |
<body> | Phần thân (nội dung) | Tất cả nội dung hiển thị trên trang (text, hình, link…) |
Giải thích chi tiết từng dòng
<!-- Dòng 1: Khai báo HTML 5 -->
<!DOCTYPE html>
<!-- Dòng 2: Thẻ mở của toàn bộ trang, lang="vi" là ngôn ngữ -->
<html lang="vi">
<!-- Dòng 3: Mở phần HEAD (thông tin trang, không hiển thị) -->
<head>
<!-- Mã hóa ký tự UTF-8 (hỗ trợ tiếng Việt, emoji...) -->
<meta charset="UTF-8">
<!-- Responsive: trang tự điều chỉnh trên điện thoại -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tiêu đề trang (hiển thị trên tab trình duyệt) -->
<title>Bài viết đầu tiên của tôi</title>
<!-- Đóng phần HEAD -->
</head>
<!-- Mở phần BODY (nội dung chính) -->
<body>
<!-- Tiêu đề cấp 1, lớn nhất -->
<h1>Xin chào thế giới!</h1>
<!-- Đoạn văn bình thường -->
<p>Đây là trang web đầu tiên của tôi.</p>
<!-- Đóng phần BODY -->
</body>
<!-- Đóng thẻ HTML -->
</html>Các thẻ HTML phổ biến cấp độ cơ bản
Dưới đây là những thẻ bạn sẽ dùng thường xuyên:
| Thẻ | Chức năng | Ví dụ |
|---|---|---|
<h1>...</h1> | Tiêu đề cấp 1 (lớn nhất) | <h1>Tiêu đề chính</h1> |
<h2>...</h2> | Tiêu đề cấp 2 | <h2>Phần con</h2> |
<p>...</p> | Đoạn văn | <p>Nội dung đoạn văn</p> |
<strong>...</strong> | Chữ đậm (quan trọng) | <strong>rất quan trọng</strong> |
<em>...</em> | Chữ nghiêng (nhấn mạnh) | <em>nhấn mạnh</em> |
<a href="...">...</a> | Liên kết (link) | <a href="https://google.com">Google</a> |
<img src="..." alt="..."> | Hình ảnh | <img src="anh.jpg" alt="mô tả"> |
<ul> <li>...</li> </ul> | Danh sách không thứ tự | <ul><li>Item 1</li><li>Item 2</li></ul> |
<ol> <li>...</li> </ol> | Danh sách có thứ tự | <ol><li>Bước 1</li><li>Bước 2</li></ol> |
Ví dụ trang web hoàn chỉnh đơn giản
Hãy xem một ví dụ trang web nhỏ về hồ sơ cá nhân:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hồ sơ của Minh</title>
</head>
<body>
<!-- Tiêu đề chính -->
<h1>Nguyễn Văn Minh</h1>
<!-- Mô tả cơ bản -->
<p>Xin chào! Tôi là một <strong>lập trình viên trẻ</strong> đam mê học tập và chia sẻ kiến thức.</p>
<!-- Phần kỹ năng -->
<h2>Kỹ năng</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript cơ bản</li>
<li>PHP & MySQL</li>
</ul>
<!-- Phần liên hệ -->
<h2>Liên hệ</h2>
<p>Email: <strong>minh@email.com</strong></p>
<p>Website cá nhân: <a href="https://example.com">example.com</a></p>
</body>
</html>Lưu ý: & là cách viết & trong HTML để tránh lỗi. Tương tự, < viết < và > viết >.
Quy tắc viết HTML đúng cách
💡 Mẹo: Mỗi thẻ mở phải có thẻ đóng. Ví dụ
<p>phải có</p>. Ngoại lệ là thẻ tự đóng như<img>, <br>, <input>.
⚠️ Cảnh báo: Đừng lồng các thẻ lộn xộn. Ví dụ sai:
<p><strong>text</p></strong>. Cách đúng:<p><strong>text</strong></p>.
Tóm tắt
- ✅ HTML là ngôn ngữ tạo cấu trúc trang web bằng các thẻ (tag)
- ✅ Cấu trúc cơ bản: DOCTYPE → html → head → body
- ✅ Phần head chứa thông tin trang (tiêu đề, mã hóa…)
- ✅ Phần body chứa nội dung hiển thị (text, hình, link…)
- ✅ Các thẻ phổ biến: h1–h6, p, strong, em, a, img, ul, ol, li
- ✅ Mỗi thẻ phải có thẻ mở và đóng (trừ thẻ tự đóng)
🎯 Bài tập thực hành
Bài tập 1: Tạo file index.html với cấu trúc cơ bản, thêm tiêu đề “Bài tập HTML đầu tiên” và một đoạn văn mô tả bản thân (ít nhất 2 câu). Mở file bằng trình duyệt để xem kết quả.
Bài tập 2: Thêm vào file trên:
- Một danh sách không thứ tự liệt kê 3 sở thích của bạn
- Một danh sách có thứ tự liệt kê 3 bước để học lập trình hiệu quả
- Ít nhất 2 từ đậm và 2 từ nghiêng trong các đoạn văn
Bài tập 3: Tạo một trang giới thiệu bạn bè (hoặc nhân vật yêu thích) với:
- Tiêu đề là tên người đó
- Ít nhất 2 phần nội dung (h2)
- Ít nhất 1 danh sách
- Ít nhất 1 liên kết (link)
Chúc bạn thành công! 🚀