HTML là gì là câu hỏi gần như ai bước vào lập trình web cũng gặp đầu tiên, và cũng là thứ dễ bị giải thích lan man nhất. Nói gọn: HTML là ngôn ngữ đánh dấu tạo nên bộ khung của mọi trang web bạn đang xem. Bài này giải thích bản chất, các thẻ cần nhớ và cách tự thực hành, theo góc nhìn của người đã dựng web thật. Tài liệu thuộc blog kỹ thuật của InterData.
NỘI DUNG BÀI VIẾT
- HTML là gì? Vì sao HTML là bộ xương của website?
- Cấu trúc file HTML chuẩn: mổ xẻ từng phần
- Các thẻ HTML cơ bản người mới phải thuộc
- HTML, CSS, JavaScript: ba lớp khác nhau thế nào?
- HTML5 có gì mới so với bản cũ?
- Tự học HTML: viết file đầu tiên và xem mã nguồn web
- Lỗi thường gặp khi mới viết HTML
- Từ học HTML đến đưa website lên Internet
- Câu hỏi thường gặp về HTML
HTML là gì? Vì sao HTML là bộ xương của website?
HTML viết tắt của HyperText Markup Language, tức ngôn ngữ đánh dấu siêu văn bản. Nó dùng các thẻ để mô tả ý nghĩa và cấu trúc nội dung trên trang: đâu là tiêu đề, đâu là đoạn văn, đâu là ảnh, đâu là liên kết.
Một điểm hay nhầm: HTML không phải ngôn ngữ lập trình. Nó không có vòng lặp, không có điều kiện, không tính toán. Nó là ngôn ngữ đánh dấu. Bạn dán nhãn cho nội dung, trình duyệt đọc nhãn đó rồi vẽ ra màn hình.
Hãy hình dung một ngôi nhà. HTML là phần khung bê tông và tường. CSS là sơn, gạch, nội thất. JavaScript là hệ thống điện, cảm biến, cửa tự động. Không có khung thì không có gì để sơn hay gắn thiết bị. Đó là lý do mọi trang web đều bắt đầu từ HTML.
- Bản chất: ngôn ngữ đánh dấu, không phải ngôn ngữ lập trình, không cần biên dịch.
- Vai trò: định nghĩa cấu trúc và ý nghĩa nội dung (heading, đoạn văn, danh sách, bảng, ảnh, link).
- Nơi chạy: trình duyệt (Chrome, Firefox, Safari, Edge) đọc và render trực tiếp, không cần phần mềm trung gian.
- Đuôi file:
.htmlhoặc.htm, mở được bằng bất kỳ trình duyệt nào.
Chuẩn HTML do tổ chức WHATWG duy trì dưới dạng “Living Standard”, bạn có thể tra cứu định nghĩa gốc tại tài liệu HTML của MDN Web Docs. Đây là nguồn tham chiếu mà dev chuyên nghiệp dùng hằng ngày.
Cấu trúc file HTML chuẩn: mổ xẻ từng phần
Mọi file HTML hợp lệ đều theo một khung cố định. Học thuộc khung này một lần là bạn dùng được mãi. Dưới đây là một trang HTML tối thiểu nhưng đúng chuẩn:
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trang đầu tiên của tôi</title> </head> <body> <h1>Xin chào</h1> <p>Đây là đoạn văn HTML đầu tiên.</p> </body> </html>
Từng dòng có nhiệm vụ riêng. Bỏ sót một phần, trang vẫn có thể hiển thị nhưng dễ sinh lỗi hiển thị tiếng Việt hoặc lỗi trên điện thoại.
- <!DOCTYPE html>: khai báo đây là tài liệu HTML5. Luôn đặt ở dòng đầu.
- <html lang=”vi”>: thẻ gốc bao toàn bộ trang. Thuộc tính
langgiúp trình duyệt và công cụ tìm kiếm hiểu ngôn ngữ nội dung. - <head>: chứa thông tin không hiển thị trực tiếp: bảng mã, tiêu đề tab, thẻ meta, link CSS.
- <meta charset=”UTF-8″>: bắt buộc nếu muốn tiếng Việt hiển thị đúng dấu. Thiếu nó là nguyên nhân số một gây lỗi font.
- <meta name=”viewport”>: giúp trang hiển thị vừa khít trên màn hình điện thoại.
- <body>: chứa toàn bộ nội dung người dùng nhìn thấy.
Lưu ý cú pháp: phần lớn thẻ HTML đi theo cặp, có thẻ mở <p> và thẻ đóng </p>. Một số thẻ tự đóng như <img>, <br>, <meta> không cần thẻ đóng riêng.
Các thẻ HTML cơ bản người mới phải thuộc
Có hơn một trăm thẻ HTML, nhưng bạn chỉ cần thuộc khoảng mười lăm thẻ là dựng được một trang hoàn chỉnh. Nhóm chúng theo công dụng sẽ dễ nhớ hơn nhiều so với học vẹt từng cái.
Thẻ văn bản và tiêu đề
Đây là nhóm dùng nhiều nhất. Hệ thống heading từ h1 đến h6 tạo cấp bậc nội dung, giống mục lục của một cuốn sách.
| Thẻ | Công dụng | Ví dụ |
|---|---|---|
<h1>–<h6> |
Tiêu đề theo 6 cấp, h1 quan trọng nhất | <h1>Tiêu đề</h1> |
<p> |
Một đoạn văn | <p>Nội dung</p> |
<strong>, <em> |
In đậm, in nghiêng theo ngữ nghĩa | <strong>Quan trọng</strong> |
<br> |
Xuống dòng trong cùng đoạn | Dòng 1<br>Dòng 2 |
Thẻ liên kết và hình ảnh
Hai thẻ làm nên đặc trưng của web. Liên kết (a) là thứ biến văn bản tĩnh thành “siêu văn bản”, cho phép nhảy giữa các trang.
<a href="https://interdata.vn/">Trang chủ InterData</a> <img src="anh.jpg" alt="Mô tả ảnh cho người và Google">
Đừng bỏ thuộc tính alt của ảnh. Nó mô tả ảnh cho người dùng trình đọc màn hình và cho công cụ tìm kiếm hiểu nội dung. Thiếu alt là một lỗi SEO và lỗi tiếp cận phổ biến.
Thẻ danh sách, bảng và phân vùng bố cục
- <ul> / <ol> / <li>: danh sách không thứ tự, có thứ tự và từng mục con.
- <table>, <tr>, <td>, <th>: dựng bảng dữ liệu theo hàng và cột.
- <div> và <span>: hai thẻ gom nhóm trung tính, một dạng khối, một dạng dòng, dùng để chia bố cục và gắn CSS.
HTML, CSS, JavaScript: ba lớp khác nhau thế nào?
Người mới hay gộp ba thứ này làm một và rối ngay từ tuần đầu. Tách bạch vai trò của chúng giúp bạn biết mỗi lúc đang học cái gì. Trong lập trình frontend, đây là ba lớp công nghệ tách biệt và phối hợp với nhau.
| Công nghệ | Vai trò | Ví dụ việc nó làm |
|---|---|---|
| HTML | Cấu trúc, nội dung | Tạo tiêu đề, đoạn văn, nút, biểu mẫu |
| CSS | Trình bày, giao diện | Đổi màu, font, khoảng cách, bố cục responsive |
| JavaScript | Hành vi, tương tác | Bấm nút hiện menu, kiểm tra biểu mẫu, gọi API |
Lời khuyên thực tế: học vững HTML trước, rồi mới sang CSS, cuối cùng là JavaScript. Bộ đôi HTML CSS đủ để bạn dựng một trang giới thiệu hay landing page tĩnh hoàn chỉnh mà chưa cần biết một dòng JavaScript nào.
HTML5 có gì mới so với bản cũ?
HTML5 là phiên bản hiện hành của HTML và là mặc định khi bạn học hôm nay. Điểm thay đổi lớn nhất so với HTML4 là các thẻ ngữ nghĩa, hỗ trợ media gốc và nhiều API cho ứng dụng web. Bạn không cần học bản cũ.
Trước HTML5, người ta chia bố cục bằng hàng loạt <div> đặt tên class. HTML5 đưa ra các thẻ ngữ nghĩa mô tả đúng vai trò của từng vùng, giúp cả Google lẫn trình đọc màn hình hiểu trang rõ hơn.
- Thẻ ngữ nghĩa:
<header>,<nav>,<main>,<article>,<section>,<footer>thay cho rừng div vô nghĩa. - Media gốc:
<video>và<audio>phát nhạc, video không cần Flash. - Biểu mẫu mạnh hơn: kiểu input mới như
email,date,numberkèm kiểm tra dữ liệu cơ bản sẵn có. - API cho web app: Canvas vẽ đồ họa, Geolocation lấy vị trí, Web Storage lưu dữ liệu phía trình duyệt.
Tham khảo nhanh các phần tử ngữ nghĩa và cách dùng đúng trong tài liệu về ngữ nghĩa HTML của MDN trước khi bạn quyết định dùng section hay div.
Tự học HTML: viết file đầu tiên và xem mã nguồn web
Cách học HTML nhanh nhất là viết thật, không phải đọc thật nhiều. Bạn không cần cài đặt gì phức tạp. Một trình soạn thảo và một trình duyệt là đủ để bắt đầu trong năm phút.
Soạn thảo và chạy file HTML đầu tiên
- Cài một trình soạn thảo mã. Visual Studio Code là lựa chọn miễn phí phổ biến nhất cho người mới.
- Tạo file mới tên
index.html. - Dán khung HTML chuẩn ở phần trên vào, đổi nội dung trong
<body>theo ý bạn. - Lưu file, rồi nhấp đúp để mở bằng trình duyệt. Trang sẽ hiện ngay.
- Sửa mã, lưu lại, bấm F5 để tải lại và xem thay đổi. Lặp vòng này là cách bạn tiến bộ.
Một mẹo nhỏ trong VS Code: gõ dấu chấm than rồi nhấn Tab, trình soạn thảo tự sinh sẵn khung HTML5 cho bạn. Đỡ phải nhớ từng dòng.
Xem mã nguồn web của trang bất kỳ (View Source)
Muốn biết người khác dựng trang ra sao? Mọi mã HTML của web công khai đều xem được. Đây là một trong những cách học mã nguồn web hiệu quả mà ít người mới tận dụng.
- Xem toàn bộ HTML thô: nhấn
Ctrl + U(Windows) hoặcCmd + Option + U(Mac) để mở View Source. - Soi từng phần tử: nhấp chuột phải vào một thành phần rồi chọn Inspect để mở DevTools, xem cây HTML và CSS đang áp dụng.
- Lưu ý: với web hiện đại render bằng JavaScript, View Source có thể chỉ thấy khung rỗng, còn nội dung thật nằm trong tab Elements của DevTools.
Lỗi thường gặp khi mới viết HTML
Phần lớn lỗi của người mới không nằm ở kiến thức khó, mà ở những sơ suất lặp đi lặp lại. Biết trước thì tránh được, đỡ mất hàng giờ dò tìm.
- Quên thẻ đóng: mở
<div>mà không có</div>khiến bố cục vỡ. Lồng thẻ đúng thứ tự đóng mở. - Thiếu charset UTF-8: tiếng Việt hiện thành ký tự lạ. Luôn đặt
<meta charset="UTF-8">trong head. - Sai đường dẫn ảnh:
srctrỏ sai thư mục thì ảnh không hiện. Kiểm tra đường dẫn tương đối so với file HTML. - Dùng nhiều h1: một trang nên có một
h1chính. Heading còn lại đi theo cấp h2, h3 theo cấu trúc nội dung. - Nhầm HTML với CSS: cố chỉnh màu, căn lề bằng HTML. Việc trình bày thuộc về CSS, đừng nhồi vào HTML.
Khi nghi ngờ mã có lỗi cấu trúc, dán nó vào trình kiểm tra chính thức của W3C để máy chỉ ra dòng sai. Bạn có thể dùng công cụ kiểm tra HTML của W3C trước khi đưa trang lên production.
Từ học HTML đến đưa website lên Internet
Học HTML xong, sớm muộn bạn cũng muốn đưa trang ra cho người khác xem qua một tên miền. Lúc này HTML chỉ là một mắt xích. Bạn cần thêm nơi lưu trữ file và phục vụ chúng cho người truy cập.
Với một trang HTML CSS tĩnh đơn giản, nhu cầu rất nhẹ. Khi bạn chuyển sang WordPress, Laravel, Node.js hoặc gắn database, yêu cầu về tài nguyên và quyền kiểm soát tăng theo. Đây là lúc cân nhắc loại hạ tầng phù hợp với từng giai đoạn.
- Giai đoạn tập tành, web tĩnh: Shared Hosting phù hợp cho dự án nhỏ, ít cấu hình. Khi nhu cầu tài nguyên và quyền kiểm soát tăng lên, bạn nên nâng cấp.
- Web động, cần root, tự cài phần mềm: một VPS cho bạn toàn quyền cài đặt môi trường, hợp với WordPress, Docker, n8n hay project học tập.
- Hệ thống lớn, traffic biến động: Cloud Server cho phép scale tài nguyên khi lượng truy cập tăng giảm thất thường.
Nếu bạn đang dựng nền web đầu tiên và muốn hiểu sâu khâu lưu trữ, tham khảo thêm dịch vụ thuê VPS có toàn quyền root để thử tự triển khai một website thật từ chính file HTML bạn vừa viết.
Câu hỏi thường gặp về HTML
HTML có phải là ngôn ngữ lập trình không?
Không. HTML là ngôn ngữ đánh dấu, dùng để mô tả cấu trúc và nội dung trang web. Nó không có logic, biến hay vòng lặp như ngôn ngữ lập trình. Để thêm tính toán và tương tác, bạn cần JavaScript đi kèm.
Học HTML mất bao lâu thì viết được trang web?
Với khoảng một đến hai tuần thực hành đều, bạn nắm đủ thẻ cơ bản để dựng một trang tĩnh hoàn chỉnh. Nắm vững toàn bộ HTML5 và phối hợp tốt với CSS thì cần vài tháng, phụ thuộc thời gian bạn dành ra mỗi ngày.
Nên học HTML hay CSS trước?
Học HTML trước. Bạn cần có cấu trúc nội dung rồi mới trang trí cho nó. Khi đã quen các thẻ cơ bản và dựng được khung trang, chuyển sang CSS để xử lý màu sắc, font và bố cục là bước tự nhiên tiếp theo.
Viết HTML cần phần mềm gì?
Tối thiểu chỉ cần một trình soạn thảo văn bản và một trình duyệt. Notepad cũng viết được, nhưng nên dùng Visual Studio Code vì có tô màu cú pháp, gợi ý thẻ và báo lỗi, giúp người mới viết nhanh và ít sai hơn.
File HTML khác file PHP hay HTML động thế nào?
File HTML thuần là nội dung tĩnh, ai mở cũng thấy giống nhau. File PHP và các trang động sinh HTML ngay trên máy chủ theo từng yêu cầu, ví dụ lấy dữ liệu từ database. Trang động cần môi trường máy chủ chạy được mã backend.
Bắt đầu từ một file, đi đến một website thật
Tóm lại câu hỏi html là gì: đó là ngôn ngữ đánh dấu tạo nên bộ khung của mọi trang web, học được trong vài ngày và dùng được cả sự nghiệp. Ba điều đáng nhớ: HTML lo cấu trúc còn CSS lo giao diện và JavaScript lo tương tác; cứ viết file thật rồi xem mã nguồn web của người khác để học nhanh; và khi trang sẵn sàng, bạn cần một nơi lưu trữ để đưa nó lên Internet. Đó là lúc chuyển từ học sang triển khai.
Sẵn sàng đưa trang web đầu tiên lên mạng?
Một VPS có toàn quyền root là bước khởi đầu gọn nhẹ để bạn tự host project của mình.
Nội dung kỹ thuật trong bài chỉ mang tính tham khảo cho mục đích học tập. Cú pháp thẻ, phím tắt và cách hành xử của trình duyệt có thể khác nhau tùy hệ điều hành, phiên bản trình duyệt và môi trường thực tế. Trước khi áp dụng cho một website chạy thật, bạn nên sao lưu dữ liệu, kiểm thử trên môi trường riêng và đánh giá rủi ro phù hợp với hệ thống của mình.
