Các thẻ điều hướng

2.1 Liên kết neo

Điều hướng trong trang HTML giúp người dùng nhanh chóng di chuyển đến các phần khác nhau của tài liệu. Điều này đặc biệt hữu ích cho các trang dài với nhiều nội dung. Trong HTML có một vài cách để thực hiện điều hướng này, bao gồm việc sử dụng liên kết neo, thuộc tính id, cũng như điều hướng bằng JavaScript.

Liên kết neo là cách phổ biến nhất để điều hướng trong trang. Chúng cho phép người dùng di chuyển đến các phần nhất định của tài liệu bằng cách sử dụng các thẻ neo.

Ví dụ sử dụng:

Tạo neo bằng cách sử dụng thuộc tính id:

    
      <h2 id="section1">Section 1</h2>
      <p>Nội dung của section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Nội dung của section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Nội dung của section 3...</p>
    
  

Tạo liên kết đến neo:

    
      <nav>
        <ul>
          <li><a href="#section1">Go to Section 1</a></li>
          <li><a href="#section2">Go to Section 2</a></li>
          <li><a href="#section3">Go to Section 3</a></li>
        </ul>
      </nav>
    
  

Điều hướng dùng thuộc tính name

Thuộc tính name cũng có thể được sử dụng để tạo neo, mặc dù việc sử dụng nó ít phổ biến hơn và được coi là không còn hợp thời.

Ví dụ

    
      <a name="top"></a>
      <p>Đầu trang...</p>
      <a name="bottom"></a>
      <p>Cuối trang...</p>
      <nav>
        <ul>
          <li><a href="#top">Đi đến đầu trang</a></li>
          <li><a href="#bottom">Đi đến cuối trang</a></li>
        </ul>
      </nav>
    
  

2.2 Cuộn sử dụng JavaScript

JavaScript cung cấp nhiều khả năng linh hoạt hơn cho việc điều hướng trang. Bằng cách sử dụng các phương thức scrollIntoView, scrollTo, và các phương thức khác, ta có thể thực hiện cuộn mượt mà tới các phần tử khác nhau của trang.

Ví dụ sử dụng:

Mã này cuộn mượt mà trang đến phần tử được chỉ định khi nhấn vào nút.

    
      <button onclick="scrollToSection('section1')">Go to Section 1</button>
      <button onclick="scrollToSection('section2')">Go to Section 2</button>
      <button onclick="scrollToSection('section3')">Go to Section 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Nội dung của section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Nội dung của section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Nội dung của section 3...</p>
    
  

    
     // Hàm để cuộn mượt mà đến một phần cụ thể trên trang
      function scrollToSection(sectionId) {
        // Tìm phần tử theo ID của nó
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Thẻ <nav>

Thẻ <nav> trong HTML5 được thiết kế để xác định phần của trang chứa các liên kết điều hướng. Thẻ này giúp định nghĩa ngữ nghĩa các khối điều hướng, cải thiện cấu trúc trang web và làm cho nó dễ tiếp cận hơn cho cả người dùng và công cụ tìm kiếm.

Thẻ <nav> được sử dụng để nhóm các liên kết được thiết kế để điều hướng qua trang web hoặc trong tài liệu hiện tại. Đây có thể là các menu chính, menu phụ, đường dẫn breadcrumb, danh sách trang và các yếu tố điều hướng khác.

Cú pháp

    
      <nav>
        <!-- Các phần tử điều hướng -->
      </nav>
    
  

Ví dụ sử dụng

    
      <header>
        <h1>Trang web của tôi</h1>
        <nav>
          <ul>
            <li><a href="#home">Trang chủ</a></li>
            <li><a href="#about">Về chúng tôi</a></li>
            <li><a href="#services">Dịch vụ</a></li>
            <li><a href="#contact">Liên hệ</a></li>
          </ul>
        </nav>
      </header>
    
  

Giải thích

• Thẻ <header>: được sử dụng để tạo tiêu đề trang, bao gồm menu điều hướng
• Thẻ <nav>: chứa danh sách các liên kết dẫn đến các phần khác nhau của trang
• Thẻ <ul> và <li>: được sử dụng để tạo danh sách các liên kết điều hướng
• Thẻ <a>: định nghĩa các liên kết, cho phép người dùng di chuyển đến các phần khác của trang hoặc trang web

2.4 Ứng dụng của thẻ <nav>

Thẻ <nav> được sử dụng để nhóm các liên kết điều hướng, chẳng hạn như:

• Menu chính của trang web
• Menu phụ
• Đường dẫn breadcrumb
• Liên kết đến các trang phân trang
• Các liên kết điều hướng khác

Menu chính của trang web

    
      <nav>
        <ul>
          <li><a href="#home">Trang chủ</a></li>
          <li><a href="#about">Về chúng tôi</a></li>
          <li><a href="#services">Dịch vụ</a></li>
          <li><a href="#contact">Liên hệ</a></li>
        </ul>
      </nav>
    
  

Menu phụ

    
      <nav>
        <ul>
          <li><a href="#faq">Câu hỏi thường gặp</a></li>
          <li><a href="#support">Hỗ trợ</a></li>
          <li><a href="#privacy">Chính sách bảo mật</a></li>
        </ul>
      </nav>
    
  

Đường dẫn breadcrumb

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Trang chủ</a></li>
          <li><a href="/category">Danh mục</a></li>
          <li>Trang hiện tại</li>
        </ol>
      </nav>
    
  

Lợi ích của việc sử dụng thẻ <nav>

Đánh dấu ngữ nghĩa

Sử dụng thẻ <nav> giúp các công cụ tìm kiếm và các công nghệ hỗ trợ người khuyết tật hiểu rõ hơn về cấu trúc của trang. Điều này làm cho trang web dễ tiếp cận hơn và cải thiện SEO của nó.

Cải thiện cấu trúc trang

Thẻ <nav> tách biệt rõ ràng các phần tử điều hướng khỏi nội dung chính, làm cho đánh dấu trang trở nên logic và có cấu trúc hơn.

Dễ dàng để tạo kiểu

Các phần tử điều hướng được đặt trong thẻ <nav> dễ dàng tạo kiểu với CSS để cải thiện giao diện và sự tiện dụng.