HTML cơ bản – Bài 07: Tổ chức trang bằng HTML có ngữ nghĩa
Bạn sẽ chia trang thành vùng đầu trang, điều hướng, nội dung chính, bài viết và chân trang. Mục tiêu là biết chọn phần tử theo vai trò, không thay tất cả div bằng section một cách máy móc.
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
Hãy phác nội dung trước bố cục
Trang chủ Góc học web có tên website, menu, phần giới thiệu và danh sách bài học. Bài viết có thể đứng riêng khi được chia sẻ. Một vùng gợi ý đọc thêm có liên quan nhưng không phải nội dung chính. Những vai trò này giúp chọn phần tử trước khi nghĩ tới hai cột hoặc màu nền.
HTML có ngữ nghĩa giúp trình duyệt và công cụ hỗ trợ nhận biết các vùng nội dung. Nó không tự tạo một giao diện đẹp hoặc bảo đảm trang hoàn toàn dễ tiếp cận; văn bản, nhãn và thứ tự điều hướng vẫn phải được kiểm tra.
Các vùng chính của một trang
| Phần tử | Khi nào dùng |
|---|---|
| header | Nội dung giới thiệu của trang hoặc của một phần nội dung. |
| nav | Vùng điều hướng quan trọng, không phải mọi nhóm liên kết nhỏ. |
| main | Nội dung chính của tài liệu; ví dụ dùng một main đang hiển thị. |
| footer | Thông tin kết thúc, liên hệ hoặc thông tin liên quan đến vùng chứa. |
header trong body khác head của tài liệu. Một article có thể có header riêng để nhóm tên và thông tin bài viết. Không cần mỗi trang chỉ được có đúng một header trong mọi tình huống.
article, section và aside khác nhau thế nào?
article là nội dung tương đối độc lập, như một bài blog hoặc mục tin. section nhóm một chủ đề trong tài liệu và thường có heading mô tả. aside là nội dung phụ có liên quan, không được định nghĩa đơn thuần là một cột nằm bên phải.
Nếu chỉ cần một vùng chứa để áp dụng CSS hoặc thao tác JavaScript mà không có vai trò ngữ nghĩa phù hợp, div vẫn là lựa chọn hợp lệ. span là vùng chứa trong dòng thường gặp. Không đặt section chỉ vì bạn muốn có một khối vuông trên giao diện.
Heading và thứ tự đọc đi cùng cấu trúc
Trong ví dụ, h1 nêu tên chính, h2 mở nhóm Bài học mới, h3 đặt tên một mục bài trong nhóm. ID được dùng để nối aria-labelledby với heading mô tả vùng. Ưu tiên phần tử HTML có sẵn trước khi bổ sung ARIA không cần thiết.
Nếu CSS đặt aside sang trái hoặc phải, vị trí hiển thị không nên làm luồng đọc trong mã trở nên vô lý. Hãy đọc HTML từ trên xuống như một bài viết; người dùng bàn phím và công cụ hỗ trợ cần một trình tự có nghĩa.
Tự chọn thẻ thay vì học thuộc danh sách
Hãy tự hỏi: đây là nội dung chính, một bài độc lập hay một chủ đề con? Nếu chưa trả lời được, việc đổi div sang article chỉ để “chuẩn SEO” thường không giúp cấu trúc rõ hơn. Khi một trang có nhiều vùng điều hướng, có thể đặt nhãn riêng giúp phân biệt.
Trong bài 8, chúng ta sẽ ghép các phần này thành trang chủ và trang bài viết hoàn chỉnh. Tất cả vẫn hiển thị theo luồng tự nhiên của trình duyệt, chưa có yêu cầu dựng layout bằng bảng hay dùng nhiều khoảng trắng.
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.
<header><p>Góc học web</p><nav aria-label="Điều hướng chính"><a href="index.html">Trang chủ</a> · <a href="bai-viet.html">Bài viết</a> · <a href="lien-he.html">Liên hệ</a></nav></header>
<main id="noi-dung">
<h1>Góc học web</h1>
<section aria-labelledby="bai-moi">
<h2 id="bai-moi">Bài học mới</h2>
<article><h3><a href="bai-viet.html">Bắt đầu với HTML</a></h3>
<p>Tạo trang web đầu tiên bằng HTML.</p></article>
</section>
<aside aria-labelledby="goi-y"><h2 id="goi-y">Gợi ý đọc thêm</h2>
<p>Tra cứu thẻ khi gặp tình huống cần dùng.</p></aside>
</main>
<footer><p>Góc học web — Ví dụ học HTML của Học Viết Code.</p></footer>Kết quả hiển thị
Trang hiển thị tên website, menu và nội dung theo thứ tự đọc. Những phần tử ngữ nghĩa không tự tạo cột; đây là cấu trúc sẵn sàng để học CSS.
Mở ví dụ bài 07 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
- Dùng table để chia cột trang: dành table cho dữ liệu dạng bảng.
- Dùng aside chỉ vì nó nằm bên phải: chọn theo vai trò nội dung phụ.
- Thêm role=”button” cho div dù có thể dùng button: ưu tiên phần tử sẵn có.
Tự kiểm tra
- Chọn thẻ cho một bài độc lập với heading, tác giả và nội dung.
- Giải thích tại sao div vẫn cần thiết trong HTML hiện đại.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
