💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 31 tháng 5 năm 2026
Điều hướng (Navigation) | Hướng dẫn và bài tập
📌
Kết luận
Sử dụng thẻ <nav> để nhóm các liên kết điều hướng
<nav>.
📝 Mã thực tế tại đây
<nav>
<a href="/">Trang chủ</a>
<a href="/about">Giới thiệu</a>
<a href="/contact">Liên hệ</a>
</nav>Khi nào nên dùng nav?
<nav> giúp thông báo cho trình duyệt và công cụ tìm kiếm rằng: "Nhóm liên kết này dùng để điều hướng người dùng".
| Trường hợp sử dụng | Ví dụ |
|---|---|
| Menu trên Header | Trang chủ / Dịch vụ / Liên hệ |
| Mục lục (TOC) | Liên kết đến các phần trong cùng một bài viết |
| Breadcrumb | Trang chủ > Danh mục > Bài viết |
<nav> trong cùng một trang web.
Sự khác biệt giữa liên kết thông thường và nav
Không phải tất cả các liên kết đều cần được bao quanh bởi thẻ<nav>. Đối với các liên kết nằm rải rác trong bài viết, bạn chỉ cần dùng thẻ <a>. Hãy dành thẻ <nav> cho các nhóm liên kết đóng vai trò "hệ thống điều hướng" cho toàn website.
Tổng kết
- Bao quanh nhóm liên kết điều hướng bằng thẻ<nav>
- Có thể dùng nhiều thẻ <nav> trong một trang
- Không cần thiết cho các liên kết đơn lẻ trong văn bản
Hãy thử trong phần bài tập
Hãy thử tạo 3 liên kết bên trong thẻ nav nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy tạo 3 liên kết (Trang chủ, Giới thiệu, Liên hệ) bên trong thẻ nav.
Gợi ý khi gặp khó khăn
nav là thẻ ngữ nghĩa dùng cho thanh điều hướng.