HTML ngữ nghĩa dùng thẻ đúng vai trò để trang rõ cấu trúc, tốt cho SEO và người dùng trình đọc màn hình.
Bạn sẽ học được
- Dựng khung trang HTML chuẩn
- Chọn đúng thẻ: header, nav, main, article, section, aside, footer
- Dùng tiêu đề h1–h6 có thứ bậc
- Hiểu vì sao ngữ nghĩa quan trọng
Thuật ngữ cần biết
- Thẻ (tag)
- Cặp ký hiệu như
<p>...</p>bao nội dung. - Thuộc tính
- Thông tin thêm trong thẻ mở:
lang="vi". - Ngữ nghĩa (semantic)
- Thẻ cho biết ý nghĩa nội dung, không chỉ hình thức.
- Khả năng truy cập (a11y)
- Thiết kế để mọi người, kể cả người khiếm thị, dùng được.
Khung trang chuẩn
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trang của tôi</title>
</head>
<body>
...
</body>
</html>Thẻ bố cục ngữ nghĩa
| Thẻ | Dùng cho |
|---|---|
| header | Đầu trang hoặc đầu một khối: logo, tiêu đề |
| nav | Nhóm liên kết điều hướng chính |
| main | Nội dung chính, mỗi trang một thẻ |
| article | Nội dung độc lập: bài viết, tin |
| section | Một phần có chủ đề, thường có tiêu đề |
| aside | Nội dung phụ: thanh bên, quảng cáo |
| footer | Chân trang, bản quyền, liên hệ |
<body>
<header><h1>Tự Học Tin</h1><nav><a href="/">Trang chủ</a></nav></header>
<main>
<article>
<h2>Bài 1</h2>
<p>Nội dung...</p>
</article>
<aside>Bài liên quan</aside>
</main>
<footer>© 2026</footer>
</body>Tiêu đề và văn bản
Mỗi trang một h1; các mục con dùng h2, h3 theo thứ bậc, không chọn thẻ chỉ để chữ to nhỏ (việc đó của CSS). Các thẻ văn bản hay dùng: p, strong (quan trọng), em (nhấn), ul/ol/li, a, blockquote, code.
Tình huống: Trang blog được Google hiểu rõ hơn
Hai trang cùng nội dung: một trang toàn div, một trang dùng article, h1, nav. Công cụ tìm kiếm và trình đọc màn hình hiểu trang thứ hai tốt hơn nhiều, nên xếp hạng và trải nghiệm đều có lợi.
Mẹo hay
Dùng div và span chỉ khi không có thẻ ngữ nghĩa phù hợp. Kiểm tra trang bằng validator.w3.org.
Lưu ý
Đừng bỏ qua thẻ meta viewport, nếu không trang sẽ hiện thu nhỏ trên điện thoại.
Thực hành
- Dựng trang giới thiệu bản thân gồm header, nav, main, footer.
- Thêm một bài viết gồm h2, hai đoạn văn và danh sách.
- Kiểm tra bằng W3C Validator và sửa lỗi.
Tóm tắt bài học
- Khung HTML5 gồm doctype, html lang, head, body.
- Chọn thẻ theo ý nghĩa.
- Một h1 mỗi trang, tiêu đề theo thứ bậc.