Sau khi bạn đã biết HTML là gì, bước tiếp theo trong hành trình học lập trình web chính là hiểu được cấu trúc chuẩn của một trang HTML. Một trang HTML không chỉ đơn giản là viết vài dòng thẻ, mà là sự sắp xếp khoa học giữa các phần tử để trình duyệt có thể hiểu và hiển thị chính xác nội dung.
Tổng quan về cấu trúc HTML chuẩn
Một tài liệu HTML thường sẽ gồm 3 phần chính:
- Khai báo doctype: Cho trình duyệt biết đây là tài liệu HTML5.
- Phần
<head>: Chứa các thông tin ẩn như tiêu đề trang, mô tả, charset, liên kết tới file CSS, v.v. - Phần
<body>: Chứa nội dung hiển thị như tiêu đề, đoạn văn, hình ảnh, bảng, v.v.
Ví dụ đầy đủ một trang HTML:
<!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 HTML</title>
</head>
<body>
<h1>Xin chào!</h1>
<p>Đây là trang web đầu tiên tôi viết bằng HTML.</p>
</body>
</html>Giải thích từng phần:
<!DOCTYPE html>: Khai báo đây là tài liệu HTML5, giúp trình duyệt hiểu và xử lý chính xác.<html lang="vi">: Thẻ bao ngoài toàn bộ nội dung.lang="vi"giúp SEO và trình đọc màn hình hiểu ngôn ngữ trang là tiếng Việt.<head>: Bao gồm:<meta charset="UTF-8">: Đảm bảo hiển thị tiếng Việt không lỗi font.<meta name="viewport">: Giúp giao diện hiển thị tốt trên điện thoại.<title>: Tiêu đề hiển thị trên tab trình duyệt.
<body>: Nơi hiển thị nội dung trực tiếp đến người dùng như:- Tiêu đề (
<h1>,<h2>, …) - Đoạn văn (
<p>) - Hình ảnh (
<img>), liên kết (<a>), danh sách (<ul>,<ol>), v.v.
- Tiêu đề (
Một vài lưu ý cho người mới:
- Mỗi trang HTML chỉ nên có 1 thẻ
<h1>để tối ưu SEO. - Đừng quên đóng thẻ! HTML5 có thể “tha thứ”, nhưng bạn nên viết đúng để tránh lỗi về sau.
- Sử dụng indent (thụt đầu dòng) giúp mã rõ ràng và dễ đọc hơn.
Lời kết:
Nắm rõ cấu trúc cơ bản của HTML là bước đệm để bạn có thể học tiếp CSS và JavaScript một cách hiệu quả. Giống như học một ngôn ngữ mới, việc hiểu cấu trúc sẽ giúp bạn “nói” HTML trôi chảy và viết web chuyên nghiệp hơn.
