Thẻ nav trong HTML5

08-12-2021
Trung Minh
1 Comment

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:

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

1 Comments

Pingback: Học HTML cơ bản và nâng cao - Web888 chia sẻ kiến thức lập trình, kinh doanh, mmo