Thẻ Nav Trong HTML5 - Freetuts

Trang chủ » Thẻ Nav Trong Html Là Gì » Thẻ Nav Trong HTML5 - Freetuts

Có thể bạn quan tâm

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.

test php

banquyen pngBài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 [free tuts .net]

<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.

Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <main> <h2>Khóa học có tại freetuts.net</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.

Từ khóa » Thẻ Nav Trong Html Là Gì