Bài 2. HTML cơ bản: Thẻ và cấu trúc trang

Mọi trang web đều bắt đầu từ một dòng HTML

Cập nhật 29 Tháng 7, 2025

Chúng ta sẽ tiếp tục với bài 2 trong phần đầu tiên của khóa học. Bài học hôm nay sẽ là bước đầu tiên để bạn thật sự “chạm tay vào mã nguồn” và bắt đầu xây dựng một trang web đơn giản, có cấu trúc đúng và dễ hiểu. Phong cách vẫn sẽ giữ nguyên: như một buổi giảng dạy trực tiếp, chi tiết, gần gũi và dễ tiếp thu.

Sau khi chúng ta đã tìm hiểu cách web hoạt động giữa client và server, giờ là lúc bạn bắt đầu thật sự viết ra một trang web đầu tiên của chính mình.

Ở trung tâm của mọi website, dù là blog cá nhân đơn giản hay Facebook, YouTube đồ sộ, đều có một thứ không thể thiếu: HTML.

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để tạo nên cấu trúc cơ bản cho một trang web. Nó không phải là ngôn ngữ lập trình – nó không có biến, không có điều kiện, không có vòng lặp – nhưng lại là nền móng vững chắc để xây dựng mọi website.

Mục tiêu bài học

Sau bài học này, bạn sẽ:

Hiểu vai trò của HTML trong web.
Biết được cách tạo một file HTML cơ bản.
Nắm được cấu trúc chuẩn của một trang HTML.
Làm quen với một số thẻ HTML phổ biến.
Thực hành viết trang đầu tiên bằng tay.

1. HTML là gì? tại sao phải học nó?

HTML là bộ khung. Bạn có thể tưởng tượng:

HTML là “bộ xương” → tạo ra cấu trúc của trang web.
CSS là “quần áo” → tạo ra màu sắc, kiểu dáng.
JavaScript là “bộ não” → giúp trang web có tương tác.

Khi bạn mở bất kỳ trang web nào, bạn đang xem một tài liệu HTML được trình duyệt “diễn giải” và hiển thị lại một cách có hình, có chữ, có layout.

2. Cấu trúc một file html cơ bản

Dưới đây là một file HTML đơn giản nhất:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <title>Trang đầu tiên</title>
  </head>
  <body>
    <h1>Chào mừng bạn đến với thế giới HTML!</h1>
    <p>Đây là đoạn văn đầu tiên của bạn.</p>
  </body>
</html>

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

<!DOCTYPE html>: Khai báo đây là tài liệu HTML5.
<html>: Thẻ bao ngoài toàn bộ tài liệu.
<head>: Phần cấu hình (không hiển thị ra màn hình). Chứa tiêu đề, bộ mã ký tự, liên kết file CSS, JS…
<title>: Tiêu đề trang, sẽ hiển thị trên tab trình duyệt.
<body>: Nơi chứa toàn bộ nội dung hiển thị trên màn hình: văn bản, hình ảnh, nút bấm…

3. Làm quen với một số thẻ HTML phổ biến

Trong HTML, “thẻ” là cách để bạn nói với trình duyệt rằng bạn muốn hiển thị cái gì và như thế nào.

Dưới đây là một số thẻ bạn sẽ sử dụng rất thường xuyên:

Thẻ tiêu đề

<h1>Tiêu đề lớn nhất</h1>
<h2>Tiêu đề phụ</h2>
<h3>Tiêu đề nhỏ hơn</h3>

Có từ <h1> đến <h6>, dùng để phân cấp nội dung.
<h1> chỉ nên dùng một lần trong mỗi trang – thường là tiêu đề chính.

Thẻ đoạn văn

<p>Đây là một đoạn văn bản.</p>

Dùng để viết nội dung thông thường.

Thẻ liên kết

<a href="https://vnwebpro.com">Truy cập VNWebPro</a>

href là địa chỉ bạn muốn người dùng được chuyển đến khi nhấn vào liên kết.

Thẻ hình ảnh

<img src="hinhanh.jpg" alt="Mô tả ảnh" />

src: đường dẫn đến ảnh.
alt: mô tả ảnh khi ảnh không hiển thị được.

Thẻ danh sách

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ul> là danh sách không thứ tự (bullet points).
<ol> là danh sách có thứ tự (1, 2, 3…).
<li> là phần tử trong danh sách.

4. Nguyên tắc viết html đúng chuẩn

Mọi thẻ đều nên được mở và đóng rõ ràng.
Thẻ lồng thẻ phải theo thứ tự hợp lý.
Định dạng code gọn gàng, có thụt dòng để dễ đọc.
Không viết tất cả mọi thứ vào một dòng – trình duyệt hiểu được, nhưng người khác (hoặc chính bạn sau này) sẽ rất khó sửa.

5. Thực hành – viết trang web đầu tiên của bạn

Hãy mở VS Code (hoặc bất kỳ trình soạn thảo nào), tạo file tên là index.html, rồi nhập đoạn sau:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <title>Trang cá nhân</title>
  </head>
  <body>
    <h1>Xin chào! Mình là Tuấn</h1>
    <p>Mình đang học lập trình web.</p>
    <h2>Những công nghệ mình yêu thích:</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <p>Liên hệ với mình tại <a href="mailto:tuan@example.com">Email</a></p>
  </body>
</html>

Lưu lại, rồi mở bằng trình duyệt (chuột phải → “Open with Live Server” nếu có extension, hoặc mở file thủ công).
Bạn sẽ thấy một trang web đầu tiên hoàn chỉnh, đơn giản, và do chính bạn tạo ra.

6. Bài tập thực hành

Tạo một file HTML mới, đặt tên blog.html
Viết nội dung mô phỏng một bài viết blog đơn giản:
- Tiêu đề bài viết
- Tác giả
- Ngày đăng
- 3 đoạn văn
- Một danh sách gạch đầu dòng liệt kê các điểm chính
- Một liên kết “Đọc thêm”
- Một ảnh (dùng ảnh bất kỳ có sẵn trong máy)

Kết bài – HTML là bước đầu tiên trong hành trình xây dựng web

Bây giờ bạn đã biết HTML không khó, mà ngược lại, rất dễ để bắt đầu.
Mỗi dòng bạn vừa viết là một bước tiến trên hành trình làm chủ frontend.

Bạn có thể dành thời gian học chuyên sâu môn HTML.

Trong bài tiếp theo, chúng ta sẽ tiếp tục “làm đẹp” cho cấu trúc đó bằng cách học CSS – ngôn ngữ của màu sắc, bố cục và cái đẹp trên web.

Hẹn bạn ở bài 3: css cơ bản – box model, màu sắc, layout.
Chúng ta sẽ biến trang web vừa rồi trở nên sinh động và bắt mắt hơn.

Bài trước ← Bài 1. Giới thiệu Web – Client và Server hoạt động ra sao? Bài tiếp theo Bài 3. CSS cơ bản: Box model, màu sắc, layout →