HTML là gì? Hướng dẫn HTML cơ bản cho người mới

HTML là gì?

Định nghĩa HTML đơn giản

HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản).

Điều quan trọng bạn cần nhớ: HTML không phải là ngôn ngữ lập trình. HTML là "ngôn ngữ đánh dấu" — dùng để xây dựng cấu trúc của trang web.

Hãy tưởng tượng HTML giống như bộ khung xương của một ngôi nhà. Nó quyết định tường ở đâu, cửa ở đâu, cửa sổ ở đâu. Còn việc sơn màu, trang trí nội thất là nhiệm vụ của CSS, và lắp đặt hệ thống điện, nước là việc của JavaScript.

HTML hoạt động như thế nào?

Cách hoạt động của HTML rất đơn giản:

Bạn nhập URL vào trình duyệt (Chrome, Firefox...)
Trình duyệt gửi yêu cầu đến server
Server trả về file HTML
Trình duyệt đọc HTML và hiển thị thành trang web trên màn hình

Tóm lại, mọi website bạn thấy hằng ngày đều được trình duyệt "dịch" từ code HTML ra giao diện đẹp mắt.

Bộ ba HTML – CSS – JavaScript:

HTML — Cấu trúc (khung xương): Tiêu đề, đoạn văn, hình ảnh
CSS — Giao diện (da, quần áo): Màu sắc, font chữ, bố cục
JavaScript — Hành vi (cử động): Click, animation, xử lý form

Tại sao cần học HTML?

HTML là nền tảng của mọi trang web

Mọi website trên thế giới — Google, Facebook, YouTube, Shopee — đều được xây dựng bằng HTML. Nếu bạn muốn học lập trình web, HTML là bước đầu tiên không thể bỏ qua.

Dễ học và mở ra cơ hội nghề nghiệp

HTML được khuyến nghị là công nghệ đầu tiên mà người mới nên học, vì:

Cú pháp đơn giản: Tên thẻ là tiếng Anh dễ nhớ (<p> = paragraph, <h1> = heading 1)
Thấy kết quả ngay: Viết code xong, mở trình duyệt là thấy kết quả
Nhu cầu cao: Frontend Developer là nghề có nhu cầu tuyển dụng lớn tại Việt Nam năm 2026

Cấu trúc cơ bản của một file HTML

Mọi file HTML đều có một "bộ khung" cơ bản. Bạn chỉ cần nhớ bộ khung này, sau đó thêm nội dung vào bên trong:

<!DOCTYPE html>
<html lang="vi">
<head>
    <!-- Thông tin về trang web (không hiển thị trên màn hình) -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <!-- Nội dung hiển thị trên màn hình -->
    <h1>Xin chào Việt Nam!</h1>
    <p>Đây là trang web đầu tiên của tôi.</p>
</body>
</html>

Giải thích từng phần:

<!DOCTYPE html> — Khai báo với trình duyệt: "Đây là tài liệu HTML5"
<html lang="vi"> — Bắt đầu tài liệu HTML. lang="vi" cho biết trang viết bằng tiếng Việt
<head> — Phần "hậu trường": tiêu đề, mã ký tự, thông tin meta
<meta charset="UTF-8"> — Bắt buộc để hiển thị đúng tiếng Việt
<title> — Tiêu đề hiển thị trên tab trình duyệt
<body> — Phần nội dung người dùng nhìn thấy trên màn hình

Các thẻ HTML cơ bản nhất

Trong HTML, bạn dùng "thẻ" (tag) để xác định loại nội dung. Mỗi thẻ có dạng <mở> và </đóng>.

Thẻ tiêu đề (h1 – h6)

<h1>Tiêu đề lớn nhất (dùng 1 lần mỗi trang)</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>

<h1> là tiêu đề quan trọng nhất, chỉ dùng 1 lần duy nhất mỗi trang. Các thẻ <h2> trở đi có thể dùng nhiều lần.

Thẻ đoạn văn và xuống dòng

<p>Đây là một đoạn văn bản. Trình duyệt sẽ tự động xuống dòng khi hết chiều rộng.</p>
<p>Đây là đoạn văn thứ hai. Mỗi thẻ p tạo một đoạn văn mới.</p>

<!-- Xuống dòng trong cùng một đoạn văn -->
<p>Dòng thứ nhất<br>Dòng thứ hai</p>

Thẻ liên kết và hình ảnh

<!-- Liên kết đến trang khác -->
<a href="https://google.com">Truy cập Google</a>

<!-- Hiển thị hình ảnh -->
<img src="hinh-anh.jpg" alt="Mô tả hình ảnh cho người khiếm thị">

Thuộc tính alt rất quan trọng — nó mô tả hình ảnh cho người khiếm thị và giúp cải thiện SEO.

Thẻ danh sách

<!-- Danh sách không thứ tự (bullet points) -->
<ul>
    <li>HTML - Cấu trúc trang web</li>
    <li>CSS - Giao diện trang web</li>
    <li>JavaScript - Tương tác trang web</li>
</ul>

<!-- Danh sách có thứ tự (đánh số) -->
<ol>
    <li>Học HTML trước</li>
    <li>Sau đó học CSS</li>
    <li>Cuối cùng học JavaScript</li>
</ol>

Bạn có thể tìm hiểu chi tiết hơn tại bài viết Các thẻ HTML cơ bản cần biết.

Thực hành: Tạo trang HTML đầu tiên

Lý thuyết thôi chưa đủ — hãy thực hành ngay!

Bước 1 — Tạo file HTML

Mở VS Code (trình soạn thảo code miễn phí)
Tạo file mới
Lưu với tên gioi-thieu.html

Bước 2 — Viết code HTML

Copy đoạn code dưới đây và dán vào file:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giới thiệu bản thân</title>
</head>
<body>
    <h1>Xin chào! Tôi là Minh</h1>
    <p>Tôi là sinh viên năm 2, đang học ngành Công nghệ Thông tin tại TP.HCM.</p>

    <h2>Kỹ năng của tôi</h2>
    <ul>
        <li>HTML cơ bản</li>
        <li>Đang học CSS</li>
        <li>Sắp học JavaScript</li>
    </ul>

    <h2>Mục tiêu năm 2026</h2>
    <ol>
        <li>Hoàn thành lộ trình Frontend</li>
        <li>Xây dựng portfolio cá nhân</li>
        <li>Tìm thực tập Frontend Developer</li>
    </ol>

    <h2>Liên hệ</h2>
    <p>Email: <a href="mailto:minh@example.com">minh@example.com</a></p>
    <p>GitHub: <a href="https://github.com/minh">github.com/minh</a></p>
</body>
</html>

Bước 3 — Mở trên trình duyệt

Nhấn đúp vào file gioi-thieu.html để mở bằng trình duyệt. Trang web đầu tiên của bạn sẽ hiện ra!

Chúc mừng! Bạn vừa tạo thành công trang HTML đầu tiên của mình.

HTML5 là gì? Có gì mới?

HTML5 là phiên bản mới nhất của HTML, được phát hành chính thức năm 2014. Tính đến năm 2026, HTML được duy trì dưới dạng HTML Living Standard bởi tổ chức WHATWG — nghĩa là nó được cập nhật liên tục.

Những tính năng nổi bật của HTML5:

Thẻ semantic: <header>, <nav>, <main>, <article>, <section>, <footer> — giúp cấu trúc trang web rõ ràng hơn
Multimedia: <video>, <audio> — nhúng video, âm thanh không cần plugin
Form nâng cao: <input type="email">, <input type="date"> — form thông minh hơn

Google ưu tiên các trang web dùng thẻ semantic HTML đúng cách trong kết quả tìm kiếm, vì vậy việc sử dụng đúng thẻ rất quan trọng cho SEO.

Công cụ viết HTML tốt nhất cho người mới

VS Code (khuyến nghị nhất)

Visual Studio Code (VS Code) là trình soạn thảo code miễn phí của Microsoft. Nó hỗ trợ tự động hoàn thành code HTML, hiển thị lỗi, xem trước trực tiếp — rất thân thiện với người mới.

Công cụ online

CodePen.io — Viết HTML/CSS/JS trên trình duyệt, thấy kết quả ngay lập tức
JSFiddle — Viết và chia sẻ code dễ dàng

Câu hỏi thường gặp (FAQ)

Hỏi: HTML có phải là ngôn ngữ lập trình không?

Trả lời: Không. HTML là ngôn ngữ đánh dấu (markup language). Nó không có logic như vòng lặp hay điều kiện.

Hỏi: Chỉ học HTML thôi có tạo được website không?

Trả lời: Được, nhưng chỉ có cấu trúc cơ bản. Để trang web đẹp thì cần CSS, để có tương tác thì cần JavaScript.

Hỏi: Học HTML mất bao lâu?

Trả lời: Nắm vững các thẻ cơ bản chỉ mất 1–2 tuần nếu bạn luyện tập mỗi ngày.

Hỏi: Học HTML có tốn tiền không?

Trả lời: Không. VS Code miễn phí, trình duyệt miễn phí, và có rất nhiều tài liệu học miễn phí trên mạng.

Bước tiếp theo — Học gì sau HTML?

Sau khi nắm vững HTML cơ bản, hãy tiếp tục với các bước sau:

Học CSS — Thêm màu sắc, font chữ, bố cục cho trang web → CSS là gì? Cách tạo style cho trang web
Tìm hiểu thêm về HTML — Bảng, form, thẻ semantic → Các thẻ HTML cơ bản cần biết
Học CSS layout — Xây dựng bố cục hiện đại với Flexbox → Flexbox CSS: Hướng dẫn căn chỉnh layout

HTML là bước đầu tiên trong hành trình lập trình web. Hãy xây dựng nền tảng vững chắc và tiến bước đến kỹ năng tiếp theo!