Thông thường thì bất kỳ một thứ gì cũng có một cái cấu trúc cơ bản mà nó phải tuân theo nhằm đảm bảo việc nó có thể hoạt động được ổn định (ví dụ như một bài văn thường có cấu trúc gồm ba thành phần mở bài – thân bài – kết luận, nếu chúng ta loại bỏ đi một thành phần nào đó hoặc xáo trộn thứ tự giữa ba thành phần thì nội dung của bài văn sẽ không được trơn tru mạch lạc).
Việc viết mã lệnh bên trong một tập tin HTML cũng tương tự như vậy, nó cần phải tuân theo một cấu trúc cơ bản để đảm bảo trang web hiển thị được như ý, tránh mắc phải những lỗi không đáng có.
Cấu trúc của một tập tin HTML
Nội dung của một tập tin HTML phải được bắt đầu bằng thẻ <html> và kết thúc bởi thẻ </html>.
Bên trong cặp thẻ <html></html> được chia làm hai thành phần chính:
- Phần head: được bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>, nó dùng để chứa tiêu đề và các thẻ khai báo thông tin cho trang web.
- Phần body: được bắt đầu bằng thẻ <body> và kết thúc bởi thẻ </body>, nó dùng để chứa những nội dung mà chúng ta muốn hiển thị trên trang web.
Dưới đây là hình ảnh minh họa về cấu trúc cơ bản của một tập tin HTML.
<html>
<head>
<title>Tiêu đề của trang web</title>
CÁC THẺ KHAI BÁO THÔNG TIN CHO TRANG WEB ĐƯỢC VIẾT Ở ĐÂY
</head>
<body>
NHỮNG NỘI DUNG MÀ CHÚNG TA MUỐN HIỂN THỊ TRÊN TRANG WEB ĐƯỢC VIẾT Ở ĐÂY
</body>
</html>
Ví dụ: Tôi có một tập tin HTML với nội dung như bên dưới.
<html>
<head>
<title>Hello WEB CƠ BẢN</title>
<meta charset="utf-8">
</head>
<body>
<p>1) Tài liệu học HTML</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
<p>2) Tài liệu học CSS</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
<p>3) Tài liệu học JavaScript</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
</body>
</html>
Khi thực thi tập tin này thì trình duyệt sẽ hiển thị là.
Lưu ý: Thẻ <meta charset=”utf-8″> có chức năng tương tự như việc chúng ta chọn kiểu mã hóa UTF-8 khi tạo một tập tin HTML, nó sẽ giúp cho trang web hiển thị ngôn ngữ tiếng Việt được chính xác.
Cấu trúc của một tập tin HTML5
Cái cấu trúc của tập tin HTML mà tôi hướng dẫn cho các bạn ở phía trên là cấu trúc của phiên bản HTML đầu tiên. Hiện nay, HTML đã cho ra phiên bản mới nhất là HTML5, phiên bản này hỗ trợ thêm một số thẻ mới cùng với những tính năng vượt trội hơn HTML.
Để sử dụng phiên bản HTML5 thì ta thêm thẻ <!DOCTYPE html> vào vị trí đầu tiên bên trong tập tin .html.
<!DOCTYPE html>
<html>
<head>
<title>Hello WEB CƠ BẢN</title>
<meta charset="utf-8">
</head>
<body>
<p>1) Tài liệu học HTML</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
<p>2) Tài liệu học CSS</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
<p>3) Tài liệu học JavaScript</p>
<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
</body>
</html>
