Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thẻ nav trong HTML5, đây là thẻ dùng để khai báo các vị trí liên kết điều hướng, thường là menu hoặc danh sách chuyên mục bên sidebar.
Lưu ý rằng không phải tất cả các link điều hướng đều đặt trong thẻ nav. Thẻ nav chỉ nên được sử dụng để bao bọc các khối điều hướng chính như các menu của trang mà thôi.
1. Thẻ nav trong HTML là gì?
Trong HTML, thẻ nav được dùng để bao bọc các vị trí liên quan đến liên kết và điều hướng chính cho trang web. Thường đó sẽ là các menu chính, menu phụ, danh sách chuyên mục bên sidebar …
Nav là từ viết tắt của navigation, cú pháp của nó như sau:
Bài viết này được đăng tại [kiso.vn]
<nav>...</nav>
2. Cách sử dụng thẻ nav trong HTML
Như mình đã nói ở trên, chúng ta chỉ nên sử dụng thẻ nav đối với những link điều hướng chính cho trang web nhé.
Trước đây, khi tạo menu thì chúng ta thường sử dụng thẻ ul và các thẻ a như sau.
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
...
</ul>
</div>Nhưng nếu sử dụng thẻ nav thì ta sẽ thay đổi cấu trúc thành:
<nav>
<ul>
<li><a href="#">Home</a></li>
...
</ul>
</nav>Cũng không có gì đặc biệt, chỉ là thay đổi thẻ div bên ngoài thành thẻ nav.
Ví dụ: sử dụng thẻ nav để nhóm các menu điều hướng của trang.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<h2>Khóa học có tại kiso.vn</h2>
<div>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
</div>
</main>
</body>
</html>Như vậy là mình đã hướng dẫn xong cách sử dụng thẻ nav trong HTML. Thẻ này cũng đơn giản nên mình không có quá nhiều ví dụ cho bài học, mong các bạn thông cảm.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Thẻ nav trong HTML là gì?2. Cách sử...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Thẻ nav trong HTML là gì?2. Cách sử dụng thẻ nav trong HTML1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Thẻ nav trong HTML là gì?2. Cách sử dụng thẻ nav trong HTMLV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Thẻ nav trong HTML là gì?2. Cách sử dụng thẻ nav trong HTMLV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Thẻ nav trong HTML là gì?2. Cách sử dụng thẻ nav trong HTMLIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện...