Cấu trúc cơ bản của một trang HTML
Mỗi trang HTML đều bắt đầu bằng một bộ khung nhất định. Trình duyệt dựa vào cấu trúc này để hiểu và hiển thị nội dung đúng cách.
<!DOCTYPE html>
<html lang="vi">
<head> ... </head>
<body> ... </body>
</html>
| Phần tử | Vai trò |
|---|---|
<!DOCTYPE html> |
Khai báo phiên bản HTML5, phải đứng đầu tiên |
<html lang="..."> |
Phần tử gốc, lang chỉ ngôn ngữ nội dung |
<head> |
Chứa thông tin không hiển thị: tiêu đề, meta, liên kết CSS/JS |
<body> |
Chứa toàn bộ nội dung hiển thị cho người dùng |
Ví dụ thực tế
Thử thay đổi nội dung bên dưới và xem kết quả thay đổi ngay lập tức:
<!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 thế giới!</h1>
<p>Đây là trang HTML đầu tiên của tôi.</p>
<p>Tôi đang học <strong>cấu trúc HTML</strong>.</p>
</body>
</html>
Thẻ trong <head>
Phần <head> không hiển thị trực tiếp nhưng rất quan trọng:
<meta charset="UTF-8">— mã hoá ký tự, bắt buộc có để hiển thị tiếng Việt đúng<meta name="viewport" ...>— cần thiết cho thiết bị di động<title>— tiêu đề hiển thị trên tab trình duyệt<link rel="stylesheet" href="...">— liên kết file CSS<script src="...">— liên kết file JavaScript
Thụt đầu dòng và dễ đọc
HTML không yêu cầu thụt đầu dòng để chạy đúng, nhưng thụt đầu dòng giúp code dễ đọc hơn. Quy ước thông dụng là dùng 2 hoặc 4 dấu cách cho mỗi cấp lồng nhau.
Bình luận