HTML cơ bản – Bài 03: Bộ khung HTML: head, body, UTF-8 và viewport
Bạn sẽ tạo bộ khung dùng lại cho mọi trang trong website, hiểu sự khác nhau giữa thông tin ở head và nội dung ở body, đồng thời tránh lỗi tiếng Việt và hiển thị trên điện thoại.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Đọc bộ khung từ trên xuống
<!doctype html> khai báo để trình duyệt dùng chế độ tiêu chuẩn; đây là khai báo, không phải một phần tử nội dung có thẻ đóng. Phần tử html là gốc của tài liệu. Bên trong nó, head chứa thông tin về tài liệu và body chứa nội dung chính được trình bày cho người dùng.
Viết rõ các phần này giúp người mới nhìn cấu trúc, dù tiêu chuẩn cho phép bỏ một số thẻ trong những điều kiện nhất định. Bạn không cần tận dụng các cách viết rút gọn đó khi mới học.
Vì sao cần lang và UTF-8?
lang=”vi” trên html thông báo ngôn ngữ chính là tiếng Việt, hỗ trợ các công cụ như trình đọc màn hình phát âm phù hợp hơn. Nó không dịch trang sang tiếng Việt. Nếu một đoạn có ngôn ngữ khác, có thể khai báo lang phù hợp trên đoạn đó.
meta charset=”utf-8″ khai báo cách diễn giải byte thành ký tự. Tệp cũng phải thực sự được lưu theo UTF-8. Chỉ thêm dòng meta vào một tệp đã bị lưu sai mã hóa chưa chắc khôi phục được chữ. Đặt khai báo charset sớm trong head và kiểm tra lại sau khi lưu.
title khác h1 như thế nào?
title đặt trong head và thường xuất hiện trên tab trình duyệt; h1 đặt trong body và là heading chính của nội dung. Chúng có thể gần nghĩa nhưng phục vụ vị trí khác nhau. Dùng title mô tả rõ từng trang, chẳng hạn “Liên hệ | Góc học web”, thay vì để mọi tab đều là “Document”.
meta description tóm tắt tài liệu, không phải đoạn mô tả tự xuất hiện trong body. Công cụ tìm kiếm có thể dùng hoặc thay thế nó trong kết quả tìm kiếm; không có bảo đảm chỉ thêm description là đạt thứ hạng cao.
Viewport chuẩn bị cho màn hình nhỏ
Dòng meta name=”viewport” với content=”width=device-width, initial-scale=1″ giúp trang sử dụng chiều rộng thiết bị phù hợp. Nó không tự biến mọi bố cục thành responsive. Ảnh, bảng và CSS vẫn cần được xử lý hợp lý; hãy tránh vô hiệu hóa khả năng zoom của người dùng.
Đến bài 16 chúng ta sẽ liên kết tệp CSS bằng link. JavaScript ngoài thường được đưa vào bằng script với cách tải phù hợp, nhưng chưa cần thêm một tệp script rỗng cho mọi trang chỉ vì đó là một thói quen.
Áp dụng cho ba trang của website
Sao chép bộ khung thành index.html, bai-viet.html và lien-he.html. Đổi title riêng cho từng trang và giữ cùng lang, charset, viewport. Đừng đặt cả ba tài liệu HTML vào chung một tệp. Mỗi tệp có một tài liệu với head và body riêng.
Mở từng tệp, nhìn title trên tab và heading trong trang. Hai phép quan sát này giúp bạn nhớ head không phải vị trí để viết nội dung mà người đọc cần đọc trực tiếp.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Góc học web | Trang chủ</title>
<meta name="description" content="Góc học web: học HTML từng bước qua ví dụ dễ hiểu.">
</head>
<body>
<h1>Góc học web</h1><p>Nội dung người đọc nhìn thấy nằm trong body.</p>
</body>
</html>
Kết quả hiển thị
Tab có tên “Góc học web | Trang chủ”; trong nội dung có heading Góc học web. Tiếng Việt hiển thị đúng khi cả tệp và khai báo cùng dùng UTF-8.
Mở ví dụ bài 03 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Nhầm head với header: head là metadata của tài liệu; header là một vùng nội dung sẽ học ở bài 7.
- Viết nhiều body để chia vùng: chỉ dùng một body cho một tài liệu.
- Thêm viewport rồi đặt nội dung rộng cố định: vẫn có thể tràn trên điện thoại.
Tự kiểm tra
- Đổi title nhưng giữ h1, rồi quan sát hai vị trí khác nhau.
- Tạo ba tệp và xác nhận mỗi tab có tên phù hợp.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
