Bài 6 · Vận dụng · 22 phút
Cấu trúc một trang chuẩn semantic
Biên soạn bởi Nguyễn Anh Tuấn
Ghép bố cục một trang hoàn chỉnh bằng landmark: header chứa nav, main chứa article/section, aside, footer; và thứ bậc heading (heading outline) đúng chuẩn.
Bài Semantic HTML là gì mèo con đã quen mặt từng thẻ semantic. Giờ là lúc ráp chúng lại thành một trang hoàn chỉnh. Vẫn là bộ khung quen thuộc từ bài 1 - doctype, html, head, body - nhưng bên trong body ta xếp các landmark đúng vai trò.
trang-blog.html · một trang đủ landmark (mở .html bằng trình duyệt)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Blog của Mèo con</title>
</head>
<body>
<header>
<h1>Blog của Mèo con</h1>
<nav>Trang chủ · Bài viết · Liên hệ</nav>
</header>
<main>
<article>
<h2>Ngày đầu đi học</h2>
<p>Hôm nay mèo con tới trường…</p>
</article>
<aside>
<h2>Bài liên quan</h2>
<p>Mèo con tập bơi</p>
</aside>
</main>
<footer>
<p>© Mèo Ham Học</p>
</footer>
</body>
</html>- ▸Một trang chuẩn = khung doctype/html/head/body + các landmark trong body.
- ▸Đọc thẻ là thấy bố cục, dù chưa có một dòng CSS.
- ▸Mỗi landmark ôm đúng loại nội dung của mình.
Các landmark không xếp tuỳ tiện mà theo một trật tự tự nhiên: header ở trên (thường chứa nav), rồi main là thân chính (bên trong có article/section và aside), cuối cùng là footer.
Hai điều cần nhớ. Thứ nhất: mỗi trang chỉ một main - là nội dung chính, độc nhất; những gì lặp lại ở mọi trang (logo, menu, chân trang) nằm NGOÀI main. Thứ hai: nav dùng cho mọi khu điều hướng, dù nằm trong header hay footer.
Trung thực
Song song với landmark, các thẻ tiêu đề h1-h6 dệt nên một thứ thứ hai: heading outline - cái mục lục vô hình mà máy dựng từ thứ bậc tiêu đề. Nhắc lại từ bài Văn bản, tiêu đề & danh sách: h1 là tựa chính, mục lớn dùng h2, mục con dùng h3…
Ghép với landmark: mỗi section/article nên mở đầu bằng một heading nói rõ chủ đề, và đừng nhảy cóc cấp (h1 thẳng xuống h4). Cả trang chỉ một h1 - tựa của trang.
outline.html · mỗi section một heading, không nhảy cóc cấp
<main>
<h1>Hướng dẫn nuôi mèo con</h1>
<section>
<h2>Cho ăn</h2>
<h3>Chọn thức ăn</h3>
<h3>Lịch ăn trong ngày</h3>
</section>
<section>
<h2>Tắm rửa</h2>
</section>
</main>- ▸Heading outline = mục lục máy dựng từ h1-h6 theo thứ bậc.
- ▸Mỗi section/article mở đầu bằng một heading nói rõ chủ đề.
- ▸Một trang một h1; không nhảy cóc cấp (h1 thẳng xuống h4).
Hai cấu trúc - landmark và heading outline - cùng phục vụ một mục tiêu: giúp điều hướng trang dễ dàng. Với người dùng screen reader, đây là hai tấm bản đồ: nhảy giữa các landmark (header, nav, main, footer) để tới đúng khu, rồi nhảy giữa các heading để tới đúng mục - y như người sáng mắt lướt qua trang bằng mắt.
- ▸Người khiếm thị nhảy theo landmark + heading như lật mục lục - không phải nghe tuần tự từ đầu.
- ▸Google đọc outline để hiểu nội dung chính và xếp hạng.
- ▸Cấu trúc rõ ràng là nền để CSS nhắm vào (main, article, h2…) mà tạo kiểu.
- ▸Người sau đọc code thấy ngay bố cục - dễ bảo trì.
Một trang chuẩn semantic, dù chưa có CSS nên trông còn mộc, đã là một nền vững: vừa dễ tiếp cận, vừa dễ làm đẹp về sau.
Tới đây mèo con đã dựng được một trang hoàn chỉnh, đúng landmark và đúng heading outline - đỉnh cao của tinh thần "cấu trúc đúng trước, đẹp sau". Phần còn lại của khoá là khai thác cái nền này: trước hết là làm trang ai cũng dùng được.
Bước tiếp theo
Câu hỏi thường gặp
Thường thì có - thanh điều hướng chính hay nằm trong header cùng logo. Nhưng đó không phải luật cứng: một trang có thể có nhiều nav (vd một nav menu trên đầu, một nav khác ở footer). Cái cốt là dùng nav cho mọi khu điều hướng, dù nó nằm đâu.
Chỉ MỘT main hiển thị cho mỗi trang. main là nội dung chính, độc nhất của trang đó - những thứ lặp lại ở mọi trang (logo, menu, chân trang) nằm ngoài main. Có đúng một main giúp screen reader nhảy thẳng tới nội dung chính chỉ bằng một phím tắt.
Là cái mục lục vô hình mà máy dựng ra từ các thẻ h1-h6 của trang, theo thứ bậc. h1 là tựa chính, h2 là các mục lớn, h3 là mục con… Một outline gọn gàng giúp Google hiểu bố cục nội dung và giúp người dùng screen reader nhảy giữa các mục như lật mục lục sách.
Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.
Trả lời vài câu để chắc rằng em đã nắm bài.
Mỗi trang nên có bao nhiêu thẻ <main>?
- 1
Ráp một trang đủ landmark
Viết khung một trang blog hoàn chỉnh: doctype/html/head/body, trong body có header (chứa nav), main, footer.
✅ Hoàn thành khi: Có đủ doctype, html, head (title), body; body chứa <header> lồng <nav>, một <main>, một <footer> đúng thứ tự.
- 2
Đặt nội dung vào đúng vùng
Cho: logo, menu, một bài viết, mục "tin liên quan", dòng bản quyền. Đặt mỗi thứ vào landmark phù hợp.
✅ Hoàn thành khi: logo+menu trong header (menu trong nav); bài viết là article trong main; tin liên quan là aside; bản quyền trong footer.
- 3
Vẽ heading outline
Cho trang: h1 "Nuôi mèo", h2 "Cho ăn", h3 "Chọn thức ăn", h2 "Tắm rửa". Vẽ outline (sơ đồ thụt cấp) của nó.
✅ Hoàn thành khi: h1 ở gốc; hai h2 (Cho ăn, Tắm rửa) cùng cấp; h3 (Chọn thức ăn) thụt vào dưới "Cho ăn".
- 4
Bắt lỗi nhảy cóc
Một trang có h1 rồi nhảy thẳng xuống h4 cho mục lớn đầu tiên. Chỉ ra cái sai và sửa.
✅ Hoàn thành khi: Nêu: nhảy từ h1 xuống h4 là bỏ cấp; mục lớn ngay dưới h1 nên là h2.
- 5
Mỗi section một heading
Viết một main chứa hai section, mỗi section mở đầu bằng một h2 nói rõ chủ đề.
✅ Hoàn thành khi: Có <main> chứa 2 <section>, mỗi section bắt đầu bằng một <h2>.
- 6
Một h1, một main
Giải thích vì sao một trang chỉ nên có một h1 và một main, mỗi cái một câu.
✅ Hoàn thành khi: h1: một tựa chính cho cả trang (dàn ý rõ). main: một vùng nội dung chính để screen reader nhảy tới nhanh.