# HTML là gì? Ngôn ngữ đánh dấu tạo nên mọi trang web
> HTML là ngôn ngữ đánh dấu định nghĩa cấu trúc mọi trang web — cách phân biệt thẻ với phần tử, và vai trò của Semantic HTML trong lập trình hiện đại.
Nguồn: https://camnangai.com/ky-thuat/html-la-gi
Xuất bản: 2026-08-02
**HTML** (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn để xây dựng cấu trúc cơ bản
của mọi trang web.
Nó định nghĩa ý nghĩa và cách sắp xếp các thành phần nội dung như văn bản, hình ảnh và siêu liên
kết. Trình duyệt dựa vào mã nguồn HTML để hiểu cách hiển thị dữ liệu cho người dùng cuối.
Đây là thành phần cơ bản nhất của [World Wide Web](https://camnangai.com/ky-thuat/cach-internet-hoat-dong). Dù bạn xây một
blog cá nhân hay một hệ thống thương mại điện tử phức tạp, HTML vẫn là nền tảng không thể thay thế.
Nó không chạy logic tính toán như một ngôn ngữ lập trình, mà hoạt động như sơ đồ chỉ dẫn để trình
duyệt dựng nên giao diện.
Nắm vững HTML là bước đầu tiên và bắt buộc với bất kỳ ai làm
[lập trình frontend](https://camnangai.com/ky-thuat/lap-trinh-frontend-la-gi). Hiểu bản chất của nó giúp bạn tối ưu cách
trình duyệt xử lý dữ liệu, và giữ sản phẩm nhất quán trên nhiều nền tảng khác nhau.
## HTML là gì?
**HyperText Markup Language** được hiểu qua ba thành phần cốt lõi. "Hypertext" (siêu văn bản) là các
liên kết nối các trang web lại với nhau; "Markup" (đánh dấu) là việc dùng những ký hiệu đặc biệt để
chú thích văn bản và hình ảnh cho trình duyệt; "Language" (ngôn ngữ) là hệ thống quy tắc mà máy tính
dùng để thông dịch các chỉ dẫn đó.
**HTML** đóng vai trò khung xương của toàn bộ trang web. Trong quy trình phát triển, nó chỉ đảm nhiệm
phần cấu trúc dữ liệu. Ví một trang web như một ngôi nhà, HTML chính là phần khung
thép và tường gạch thô: nó quy định vị trí cửa sổ, độ cao trần nhà, nhưng không quan tâm màu sơn hay
cách hệ thống điện vận hành.
Mỗi tài liệu HTML là một tệp văn bản thô chứa các chỉ dẫn về ý nghĩa nội dung. Khi bạn bao một đoạn
chữ trong những ký hiệu cụ thể, bạn đang ra lệnh cho trình duyệt: "Đây là một tiêu đề quan trọng", hoặc
"Đây là một danh sách các mục". Sự minh bạch về cấu trúc đó cho phép nhiều loại thiết bị, từ máy tính
để bàn đến điện thoại, hiểu và tái hiện nội dung chính xác.
Viết mã HTML chuẩn xác không chỉ giúp trang hiển thị đúng, mà còn đưa nội dung của bạn vào mạng lưới
thông tin toàn cầu. Khi bạn nối nội dung của mình với các trang khác qua siêu liên kết, bạn đang xây
dựng đúng cái bản chất đã làm nên Internet. Đây là công nghệ có tính tương thích cao nhất, chạy ổn
định trên mọi trình duyệt hiện có.
## Thẻ, phần tử và thuộc tính: ba khái niệm dễ nhầm
Bạn cần phân biệt rạch ròi ba khái niệm kỹ thuật: thẻ (tag), phần tử (element) và thuộc tính
(attribute). **Thẻ** là các từ khóa nằm trong cặp ngoặc nhọn `< >`, đánh dấu điểm bắt đầu và kết thúc của một
vùng nội dung. **Phần tử** là cấu trúc hoàn chỉnh gồm thẻ mở, nội dung bên trong và thẻ đóng. **Thuộc
tính** nằm ngay trong thẻ mở, cung cấp thông tin cấu hình hoặc điều chỉnh hành vi của phần tử đó.
Về quy tắc đặt tên, HTML không phân biệt chữ hoa chữ thường. Bạn viết `` hay `<title>` thì trình
duyệt vẫn xử lý như nhau. Nhưng dùng chữ thường là quy ước bắt buộc để mã nguồn sạch, nhất quán và dễ
bảo trì. Hầu hết các phần tử đều cần thẻ đóng để trình duyệt xác định phạm vi tác động.
Ngoại lệ là nhóm phần tử rỗng (void elements) như `<img>`, `<br>` hay `<input>`. Chúng không chứa nội
dung văn bản đi kèm nên không có thẻ đóng, và hoạt động dựa vào thuộc tính để nhúng dữ liệu bên ngoài
hoặc tạo các điều khiển tương tác. Lồng sai thẻ hoặc quên thẻ đóng ở các phần tử thông thường sẽ buộc
trình duyệt tự dự đoán cấu trúc, gây lãng phí tài nguyên xử lý.
Cấu tạo của một phần tử HTML cơ bản:
```html
<p class="description">Đây là nội dung một phần tử đoạn văn.</p>
```
Ở ví dụ này, `<p>` là thẻ mở, `class="description"` là thuộc tính, văn bản ở giữa là nội dung, và
`</p>` là thẻ đóng. Bốn phần đó ghép lại thành một chỉ dẫn logic cho trình duyệt xử lý luồng dữ liệu.
## Một trang HTML có cấu trúc như thế nào?
Mọi tài liệu HTML chuẩn mực đều bắt đầu bằng khai báo `<!DOCTYPE html>`. Đây không phải một thẻ HTML mà
là chỉ thị để trình duyệt kích hoạt chế độ tiêu chuẩn (standards mode) của HTML5. Toàn bộ cấu trúc
trang sau đó nằm trong thẻ gốc `<html>`, và bên trong thẻ gốc, tài liệu luôn chia thành hai khu vực
tách biệt: `<head>` và `<body>`.
Thẻ `<head>` chứa các thông tin meta mà người dùng không nhìn thấy trực tiếp trên giao diện: tiêu đề
trang hiển thị trên tab trình duyệt, bộ mã hóa ký tự (UTF-8), và các liên kết tới tệp CSS hoặc
JavaScript bên ngoài. Đây là nơi công cụ tìm kiếm và trình duyệt thu thập dữ liệu về bản chất của trang
trước khi hiển thị nội dung.
Thẻ `<body>` chứa toàn bộ nội dung hiển thị cho người dùng: văn bản, hình ảnh, video. Khi đọc mã nguồn,
trình duyệt xây dựng một cấu trúc gọi là Document Object Model (DOM) dưới dạng cây các nút (tree of
nodes). Mỗi phần tử bạn viết trở thành một nút trong cây này, thiết lập quan hệ cha — con (parent —
child) hoặc anh em (sibling). Đặt thẻ `<strong>` bên trong thẻ `<p>` thì `<p>` là cha và `<strong>` là
con.
Cấu trúc tối giản của một trang web chuẩn:
```html
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Tiêu đề trang chuyên nghiệp
Cấu trúc cây trong HTML
Các phần tử lồng nhau tạo nên quan hệ cha-con.