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

1. HTML là gì

HTML viết tắt của HyperText Markup Language. Đây là ngôn ngữ đánh dấu được dùng để xác định cấu trúc nội dung hiển thị trên trang web. HTML không phải ngôn ngữ lập trình mà là ngôn ngữ mô tả: nó không xử lý logic, tính toán hay tương tác, mà chỉ mô tả nội dung là gì và trình duyệt nên hiểu nó như thế nào.

HTML hoạt động thông qua các thẻ (tag). Mỗi thẻ bao quanh một khối nội dung và có vai trò riêng, ví dụ: thẻ tiêu đề, thẻ đoạn văn, thẻ hình ảnh, thẻ liên kết, thẻ danh sách,…

html

2. Cấu trúc tổng thể của một tài liệu HTML

Một tài liệu HTML tiêu chuẩn có cấu trúc gồm 3 phần:

  1. Khai báo kiểu tài liệu
  2. Phần head: chứa thông tin cấu hình cho trình duyệt
  3. Phần body: chứa toàn bộ nội dung hiển thị trên màn hình

Ví dụ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Trang web đầu tiên</title>
  </head>
  <body>
    <h1>Xin chào!</h1>
    <p>Tôi đang học HTML.</p>
  </body>
</html>

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

  • <!DOCTYPE html>: thông báo với trình duyệt rằng đây là tài liệu HTML5
  • <html>: bao bọc toàn bộ tài liệu
  • <head>: khai báo thông tin phụ, không hiển thị trực tiếp
  • <meta charset="UTF-8">: thiết lập bảng mã UTF-8 hỗ trợ tiếng Việt
  • <title>: tên hiển thị trên tab trình duyệt
  • <body>: nơi chứa nội dung người dùng sẽ thấy như tiêu đề, văn bản, ảnh, liên kết,…

3. Cú pháp và quy tắc viết HTML

  • Mỗi phần tử HTML bắt đầu bằng thẻ mở <tagname> và kết thúc bằng thẻ đóng </tagname>
  • Một số thẻ không cần đóng, ví dụ: <img>, <br>, <hr>
  • Có thể thêm thuộc tính vào thẻ, ví dụ: src, alt, href, id, class
  • Thẻ có thể lồng nhau, phải tuân thủ thứ tự đóng mở đúng

Ví dụ:

<a href="https://algonest.io.vn">
  <img src="logo.png" alt="Logo Algonest">
</a>

Trong ví dụ trên, thẻ a chứa một ảnh, khi người dùng bấm vào ảnh thì chuyển đến liên kết.

4. Phân biệt phần head và body

Phần <head> không hiển thị ra trang web, nhưng rất quan trọng vì chứa các thành phần như:

  • title: tên trang web hiển thị trên tab
  • meta: thiết lập charset, mô tả, từ khóa
  • link: liên kết tới CSS ngoài
  • script: nhúng các tệp JavaScript

Phần <body> là nội dung trực tiếp hiển thị ra màn hình. Mọi thẻ HTML mô tả giao diện đều nằm trong phần này.

5. Viết tài liệu HTML đúng chuẩn

Một số nguyên tắc cơ bản cần tuân thủ:

  • Luôn bắt đầu bằng <!DOCTYPE html>
  • Đặt lang="vi" trong thẻ <html> nếu viết tiếng Việt
  • Mã hoá ký tự phải dùng UTF-8
  • Các phần tử phải được lồng đúng thứ tự
  • Sử dụng thẻ semantic đúng ngữ nghĩa thay vì lạm dụng <div>

Ví dụ viết đúng chuẩn:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Trang cá nhân</title>
  </head>
  <body>
    <header>
      <h1>Nguyễn Văn A</h1>
    </header>
    <section>
      <p>Lập trình viên Frontend đang học HTML.</p>
    </section>
  </body>
</html>

6. Bài thực hành

Tạo một file HTML tên là index.html, chứa các thành phần sau:

  • Tiêu đề tab: “Trang đầu tiên”
  • Một tiêu đề lớn (h1)
  • Một đoạn văn giới thiệu (p)
  • Một ảnh minh hoạ (img)
  • Một liên kết đến trang web khác (a)

Gợi ý mã mẫu:

<!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 trang web của tôi</h1>
    <p>Đây là trang HTML đầu tiên tôi viết bằng tay.</p>
    <img src="avatar.jpg" alt="Ảnh đại diện">
    <p>Xem thêm tại <a href="https://algonest.io.vn">Algonest</a></p>
  </body>
</html>

Bài tiếp theo sẽ học cách sử dụng các thẻ nội dung trong HTML như danh sách, tiêu đề phụ, liên kết, hình ảnh và cách tổ chức nội dung một cách có cấu trúc.