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. 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. 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 <TITLE> 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:
<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:
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Tiêu đề trang chuyên nghiệp</title>
</head>
<body>
<h1>Cấu trúc cây trong HTML</h1>
<p>Các phần tử lồng nhau tạo nên <strong>quan hệ cha-con</strong>.</p>
</body>
</html>Thứ tự và cách lồng thẻ ảnh hưởng trực tiếp tới hiệu suất trình duyệt. Lồng sai quy tắc — đưa một thẻ
khối <div> vào trong một thẻ nội dòng <span> chẳng hạn — buộc trình duyệt chạy thuật toán sửa lỗi
(error correction). Mỗi lần chỉ tốn vài mili giây, nhưng lặp lại đủ nhiều thì tài nguyên xử lý hao đi
thấy rõ và trang phản hồi chậm hơn.
HTML khác CSS và JavaScript ở chỗ nào?
Ba công nghệ này tách biệt hoàn toàn về vai trò. HTML là khung xương, xác định cấu trúc dữ liệu thô: đâu là đoạn văn, đâu là danh sách. CSS (Cascading Style Sheets) là lớp da và trang phục, quy định màu sắc, font chữ và bố cục. JavaScript là hệ thống cơ quan và hành vi, cho phép trang phản hồi hành động của người dùng như nhấn nút hay gửi dữ liệu.
Sự tách biệt này gọi là "separation of concerns" trong kỹ thuật phần mềm, và nó khiến việc bảo trì mã nguồn rẻ đi rất nhiều. Muốn đổi font chữ của toàn hệ thống, bạn chỉ sửa một tệp CSS duy nhất thay vì đụng vào hàng nghìn dòng HTML. HTML lúc này chỉ tập trung vào việc lưu giữ thông tin ở dạng thuần túy nhất.
Dùng HTML để định dạng giao diện — thẻ <font> hay thuộc tính bgcolor — là cách làm lỗi thời và đã
bị loại khỏi tiêu chuẩn hiện đại. Tư duy đúng là giữ cho mã HTML sạch và "mù" về mặt thẩm mỹ. Mã dễ đọc
hơn, và trang cũng nhẹ hơn, vì trình duyệt có thể tải song song các tệp CSS và JavaScript.
Sự phối hợp giữa ba lớp diễn ra như sau: HTML tạo ra các "hộp" chứa nội dung, CSS định vị các hộp đó trên màn hình, JavaScript thêm logic xử lý bên trong hộp. Tách bạch rõ ràng thì bạn thay hẳn lớp giao diện hoặc lớp hành vi mà cấu trúc dữ liệu cốt lõi vẫn nguyên vẹn.
Semantic HTML: vì sao chọn đúng thẻ lại quan trọng?
Semantic HTML (HTML ngữ nghĩa) là tư duy dùng các thẻ phản ánh đúng bản chất nội dung mà chúng bao
bọc, thay vì dùng những thẻ vô nghĩa như <div>. Các thẻ <header>, <nav>, <main>, <section>,
<article>, <aside> và <footer> cho máy móc và thiết bị hỗ trợ biết vai trò của từng phần trên
trang.
Phân biệt <section> và <article> là ví dụ điển hình của tư duy chọn thẻ. Dùng <article> cho nội
dung độc lập, tách rời được và tái sử dụng ở nơi khác — một bài blog, một bình luận. Dùng <section>
để nhóm các nội dung cùng chủ đề trong một tài liệu. Chọn đúng thẻ làm cấu trúc tài liệu minh bạch và
có tổ chức.
Lợi ích thực tế lớn nhất nằm ở SEO và accessibility (khả năng tiếp cận). Trình thu thập dữ liệu của Google ưu tiên các trang có cấu trúc ngữ nghĩa rõ ràng để xếp hạng nội dung chính xác hơn. Với người khiếm thị dùng trình đọc màn hình, các thẻ ngữ nghĩa cho phép nhảy thẳng giữa các vùng chức năng thay vì nghe cả trang từ đầu đến cuối.
Hạn chế tối đa tình trạng "div-soup" — lạm dụng <div> và <span> cho mọi thành phần. Chúng tiện cho
việc dàn trang bằng CSS, nhưng không nói gì với trình duyệt về nội dung bên trong. Một kỹ sư giỏi luôn
tự hỏi "phần nội dung này có vai trò gì?" trước khi quyết định viết thẻ nào.
Trình duyệt biến HTML thành trang web ra sao?
Quá trình bắt đầu ngay khi trình duyệt nhận luồng dữ liệu thô từ máy chủ. Nó phân giải (parsing) văn bản thành Document Object Model (DOM) — một biểu diễn lập trình của trang web, nơi mọi thẻ HTML được chuyển hóa thành các đối tượng mà lập trình viên tác động vào được. Đây là quá trình tốn tài nguyên và đòi hỏi độ chính xác cao về cú pháp.
Trình duyệt không bao giờ hiển thị các thẻ như <p> hay <h1>; nó dùng chúng làm chỉ dẫn để áp dụng
cách hiển thị. Ngay cả khi bạn chưa viết dòng CSS nào, trang vẫn có giao diện cơ bản nhờ user-agent
stylesheet — bảng định dạng mặc định của trình duyệt, quy định rằng <h1> phải to hơn <p>. Mỗi trình
duyệt lại có một stylesheet mặc định hơi khác nhau, nên giao diện sẽ lệch giữa các trình duyệt nếu
không dùng kỹ thuật "CSS reset".
Nếu mã nguồn có lỗi, chẳng hạn thẻ lồng sai quy tắc cha — con, trình duyệt chạy cơ chế tự sửa lỗi để cố hiển thị trang. Điều này tốn hiệu năng CPU và có thể cho ra kết quả không như ý. Mã HTML chuẩn xác giúp trình duyệt bỏ qua bước dự đoán lỗi, và tốc độ render tăng lên thấy rõ.
Toàn bộ quá trình từ mã nguồn thô đến DOM diễn ra liên tục, không phải một lần rồi thôi. Khi JavaScript thay đổi một nút trong cây DOM, trình duyệt phải tính toán lại bố cục (re-flow) và vẽ lại (re-paint) các thành phần trên màn hình. Hiểu cách trình duyệt xử lý DOM giúp bạn viết mã tránh được các tác vụ gây giật lag.
Từ HTML 1.0 đến living standard: chuẩn đã đổi thế nào?
Tim Berners-Lee phát minh World Wide Web năm 1989, rồi đến năm 1991 thì phát minh ra HTML. Qua nhiều giai đoạn, ngôn ngữ này đi qua các mốc HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999) và chuẩn XHTML 1.0 nghiêm ngặt (2000). Mỗi phiên bản đều cố giải quyết xung đột giữa các trình duyệt và chuẩn hóa cách hiển thị thông tin.
Sự ra đời của HTML5 năm 2014 đánh dấu bước chuyển lớn. Nó bổ sung thẻ mới, và quan trọng hơn là mang theo cả một hệ sinh thái API cho ứng dụng web. Hiện nay không còn ai nói đến "HTML6", bởi HTML đã trở thành một Living Standard (tiêu chuẩn sống) do tổ chức WHATWG duy trì. Ngôn ngữ được cập nhật liên tục từng tính năng một, thay vì đợi những bước nhảy theo số phiên bản.
Khác biệt lớn nhất giữa chuẩn cũ và chuẩn hiện đại nằm ở tính tối giản. Ở phiên bản cũ, bạn phải khai
báo một dòng DOCTYPE rất dài và phức tạp để chỉ định phiên bản cụ thể. Với HTML5, <!DOCTYPE html> là
đủ. Hướng tiến hóa của HTML là làm mã nguồn mạnh hơn nhưng đồng thời đơn giản hơn cho người viết.
Là một Living Standard, HTML cho phép các trình duyệt hiện đại triển khai công nghệ mới ngay khi chúng được thống nhất. Kỹ sư phần mềm nhờ đó làm việc trong môi trường ổn định hơn, nơi tính năng được phát triển dựa trên đồng thuận của cộng đồng công nghệ toàn cầu thay vì sự độc quyền của một hãng trình duyệt.
HTML hiện đại làm được những gì?
HTML5 đưa web vượt xa giới hạn của những trang tài liệu tĩnh. Bạn nhúng trực tiếp âm thanh và hình ảnh
qua các thẻ <audio> và <video> bản địa, không còn phụ thuộc vào plugin bên thứ ba kém bảo mật như
Flash trước đây. Thẻ <canvas> cho phép vẽ đồ họa 2D/3D và xử lý hình ảnh trực tiếp trong trình duyệt
bằng JavaScript.
Các API tích hợp sẵn mở rộng mạnh khả năng tương tác của trình duyệt. Geolocation API xác
định vị trí người dùng, Web Storage lưu trữ dữ liệu ngay tại máy khách, Web Workers chạy các tác vụ
nặng ở luồng nền mà không làm treo giao diện. Các thuộc tính data-* cho phép lưu dữ liệu tùy chỉnh
ngay trên phần tử HTML theo đúng chuẩn.
Hệ thống biểu mẫu (forms) trong HTML5 cũng được nâng cấp mạnh với Constraint Validation API. Bạn kiểm
tra tính hợp lệ của dữ liệu — định dạng email, trường bắt buộc, hoặc theo mẫu pattern — chỉ bằng các
thuộc tính HTML, không cần viết nhiều mã JavaScript. Trình duyệt tự hiển thị thông báo lỗi và chặn gửi
dữ liệu sai quy định.
Những khả năng này biến trình duyệt thành một nền tảng ứng dụng thực thụ. Bạn dựng được tính năng kéo-thả (drag and drop), làm game, hay tạo công cụ chỉnh sửa ảnh chạy thẳng trên web. HTML hiện đại là lớp giao diện lập trình giữa mã nguồn và các tính năng phần cứng của thiết bị, tạo tiền đề cho các ứng dụng web tiến bộ (PWA).
Học HTML tới đâu là đủ?
Với một kỹ sư phần mềm, học HTML không dừng ở việc nhớ tên các thẻ. Thứ cần nắm là tư duy xây dựng cấu trúc và khả năng phân tích ngữ nghĩa nội dung, để viết ra mã sạch, hợp lệ và tương thích cao. Bạn không cần thuộc lòng mọi thuộc tính, nhưng phải biết tra cứu tài liệu từ nguồn uy tín khi gặp bài toán phức tạp.
Đây cũng là kỹ năng nền tảng bền nhất trong nghề web: các framework JavaScript có thể đổi sau vài năm, còn quy tắc về cấu trúc và ngữ nghĩa của HTML thì gần như đứng yên. Một tài liệu HTML được cấu trúc tốt giúp cả nhóm — designer lẫn lập trình viên backend — làm việc và tích hợp dễ hơn, và đó là thứ giữ chi phí bảo trì thấp về lâu dài.