Login

Cấu trúc một trang HTML chuẩn: từ doctype đến thẻ meta

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Mở một file HTML trống ra, bạn sẽ phải tự gõ mọi thứ từ đầu. Nhiều bạn chép lại đoạn mã mẫu mà không hiểu từng dòng làm gì, đến khi trang hiển thị lỗi font hoặc vỡ trên điện thoại thì không biết sửa ở đâu. Bài này giải thích từng phần của một trang HTML chuẩn.

Bộ khung tối thiểu

Đây là khung mà hầu hết trang web hiện nay đều bắt đầu từ đó:

<!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à nội dung trang.</p>
</body>
</html>

Chúng ta đi qua từng phần.

Doctype và thẻ html

Dòng <!DOCTYPE html> báo cho trình duyệt biết đây là tài liệu HTML5 và hiển thị ở chế độ chuẩn. Thiếu dòng này, trình duyệt có thể chuyển sang "quirks mode" và hiển thị theo cách cũ, gây ra những khác biệt khó hiểu về kích thước và căn lề.

Thẻ <html> bao toàn bộ trang. Thuộc tính lang khai báo ngôn ngữ của nội dung. Với trang tiếng Việt, hãy đặt lang='vi'. Trình đọc màn hình dựa vào đây để chọn giọng đọc đúng, và trình duyệt dựa vào đây để gợi ý dịch trang.

Phần head: thông tin về trang

Phần head không hiển thị trực tiếp lên trang, nó chứa thông tin dành cho trình duyệt và công cụ tìm kiếm.

Charset

<meta charset='UTF-8'> quy định bảng mã ký tự. Với tiếng Việt có dấu, UTF-8 là bắt buộc. Nếu quên, chữ như "ắ" hay "ữ" có thể hiện thành ký tự lạ. Hãy đặt thẻ này gần đầu head, trước thẻ title.

Viewport

Thẻ viewport rất quan trọng cho giao diện trên điện thoại. Thiếu nó, trình duyệt di động giả định trang rộng khoảng 980 pixel rồi thu nhỏ lại, khiến chữ bé tí và media query không hoạt động như bạn mong đợi. Dòng width=device-width, initial-scale=1.0 bảo trình duyệt dùng đúng chiều rộng thật của thiết bị.

Title và description

Thẻ <title> hiện trên tab trình duyệt và thường là tiêu đề của kết quả tìm kiếm. Hãy viết ngắn gọn, mô tả đúng nội dung. Bạn cũng có thể thêm mô tả:

<meta name='description' content='Mô tả ngắn gọn về nội dung trang.'>

Công cụ tìm kiếm có thể dùng đoạn này làm phần trích dẫn, dù không đảm bảo lúc nào cũng dùng.

Liên kết CSS và JavaScript

CSS thường được nạp trong head bằng <link rel='stylesheet' href='style.css'>. JavaScript thường đặt cuối body, hoặc đặt trong head với thuộc tính defer để không chặn việc hiển thị trang:

<script src='app.js' defer></script>

Phần body: nội dung hiển thị

Mọi thứ người dùng nhìn thấy nằm trong body. Hãy bố trí bằng các thẻ ngữ nghĩa như header, main, footer thay vì chỉ dùng div. Mỗi trang nên có đúng một thẻ h1 mô tả chủ đề chính.

Thẻ đóng, lồng nhau và thụt lề

  • Hầu hết thẻ cần cặp mở và đóng, trừ một số thẻ rỗng như img, br, meta, input.
  • Thẻ phải lồng đúng thứ tự: thẻ mở sau thì phải đóng trước.
  • Thụt lề hai hoặc bốn dấu cách theo cấp lồng giúp bạn phát hiện thẻ bị thiếu rất nhanh.
  • Thuộc tính nên được đặt trong dấu nháy, ví dụ class='card'.

Kiểm tra lỗi thường gặp

  1. Chữ tiếng Việt bị lỗi: kiểm tra thẻ charset và chắc chắn file đã được lưu với mã hóa UTF-8 trong trình soạn thảo.
  2. Trang rất nhỏ trên điện thoại: kiểm tra thẻ viewport.
  3. CSS không áp dụng: kiểm tra đường dẫn trong thuộc tính href, và mở tab Network trong DevTools để xem file có tải được không.
  4. Bố cục lạ: kiểm tra xem đã có doctype chưa, và thẻ có bị đóng thiếu không.

Thêm vài thẻ hữu ích trong head

Khi trang lớn dần, bạn sẽ gặp thêm một số thẻ khác trong head. Bạn không cần thuộc hết ngay, nhưng nên biết chúng tồn tại:

  • Favicon: <link rel='icon' href='/favicon.ico'> hiển thị biểu tượng nhỏ trên tab trình duyệt.
  • Canonical: <link rel='canonical' href='https://example.com/trang'> cho công cụ tìm kiếm biết địa chỉ chính thức của trang khi có nhiều URL cùng nội dung.
  • Open Graph: các thẻ meta có tiền tố og: quyết định tiêu đề và hình ảnh hiển thị khi người khác chia sẻ liên kết lên mạng xã hội.
  • Theme color: <meta name='theme-color' content='#2563eb'> đổi màu thanh địa chỉ trên một số trình duyệt di động.

Hãy nhớ rằng thứ tự trong head có ảnh hưởng nhỏ đến hiệu năng: đặt charset và viewport lên đầu, sau đó đến title, rồi mới đến các file CSS và script. Cách sắp xếp này giúp trình duyệt xử lý những thông tin quan trọng nhất trước.

Kết luận

Bộ khung HTML chuẩn chỉ có vài dòng nhưng mỗi dòng đều có lý do tồn tại. Khi hiểu chúng, bạn sẽ tự tin chỉnh sửa thay vì chép mã mà không biết nó làm gì, và tiết kiệm được nhiều giờ gỡ lỗi sau này.

Nếu bạn muốn đi từ những dòng HTML đầu tiên đến một website hoàn chỉnh, hãy tham khảo các khóa học lập trình web tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment