Cách sử dụng thẻ <nav> để tạo menu điều hướng trong HTML

Trong quá trình phát triển một trang web, việc tạo ra một menu điều hướng dễ sử dụng và thân thiện với người dùng là điều vô cùng quan trọng. Một trong những cách hiệu quả để làm điều này trong HTML là sử dụng thẻ <nav>. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ <nav> để tạo menu điều hướng.

Bước 1: Cấu trúc cơ bản của thẻ <nav>

Thẻ <nav> là một phần tử mang tính ngữ nghĩa trong HTML, được sử dụng để bao bọc các liên kết điều hướng chính của trang web. Cú pháp cơ bản của nó như sau:

<nav>
  <!-- Các liên kết điều hướng sẽ nằm ở đây -->
</nav>

Bước 2: Thêm các liên kết điều hướng

Bên trong thẻ <nav>, bạn có thể thêm các thẻ <a> để tạo các liên kết điều hướng. Ví dụ:

<nav>
  <a href="index.html">Trang chủ</a>
  <a href="about.html">Giới thiệu</a>
  <a href="services.html">Dịch vụ</a>
  <a href="contact.html">Liên hệ</a>
</nav>

Bước 3: Sử dụng danh sách để cải thiện cấu trúc

Để cải thiện cấu trúc và dễ dàng quản lý các liên kết điều hướng, bạn nên sử dụng thẻ danh sách <ul> và <li> bên trong thẻ <nav>:

<nav>
  <ul>
    <li><a href="index.html">Trang chủ</a></li>
    <li><a href="about.html">Giới thiệu</a></li>
    <li><a href="services.html">Dịch vụ</a></li>
    <li><a href="contact.html">Liên hệ</a></li>
  </ul>
</nav>

Bước 4: Áp dụng CSS để tạo kiểu

Để menu điều hướng trở nên hấp dẫn và dễ sử dụng, bạn cần áp dụng CSS. Dưới đây là một ví dụ cơ bản về cách bạn có thể làm điều đó:

nav {
  background-color: #333;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  display: block;
}

nav ul li a:hover {
  background-color: #575757;
}

Bước 5: Thêm các tính năng tương thích cho thiết bị di động

Một menu điều hướng hiện đại cần phải dễ sử dụng trên cả máy tính và thiết bị di động. Bạn có thể bổ sung một số kiểu CSS để cải thiện trải nghiệm người dùng trên thiết bị di động:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }

  nav ul li {
    margin-bottom: 5px;
    margin-right: 0;
  }
}

Kết luận

Thẻ <nav> là một công cụ mạnh mẽ và dễ sử dụng để tạo ra một menu điều hướng có cấu trúc rõ ràng và thân thiện với người dùng. Bằng cách kết hợp thẻ này với các thẻ danh sách và áp dụng CSS, bạn có thể tạo ra một menu điều hướng không chỉ đẹp mắt mà còn dễ sử dụng. Điều này sẽ giúp người dùng dễ dàng tìm thấy thông tin họ cần, cải thiện trải nghiệm người dùng tổng thể trên trang web của bạn.