พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน nav Tag

<nav> tag ใน HTML5 ใช้เพื่อกำหนดกลุ่มของลิงก์นำทาง (navigation links) ในเว็บไซต์ โดยปกติจะใช้สำหรับเมนูหลักของเว็บไซต์หรือในส่วนที่มีการเชื่อมโยงไปยังหน้าอื่น ๆ ภายในเว็บไซต์ เช่น header, footer, หรือ sidebar เป็นต้น การใช้งาน <nav> จะช่วยให้ทั้งนักพัฒนาและเครื่องมือเช่น screen reader เข้าใจว่าเนื้อหานี้เป็นส่วนหนึ่งของการนำทาง

การใช้งานพื้นฐานของ <nav>

ตัวอย่างพื้นฐานของการใช้งาน <nav>

HTML
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

ในตัวอย่างนี้ <nav> ถูกใช้ครอบรายการของลิงก์นำทาง ซึ่งภายในนั้นใช้ <ul> และ <li> เพื่อสร้างลิสต์ของลิงก์ในเมนู

ตัวอย่างการใช้งาน <nav> แบบต่างๆ

เมนูหลักที่ส่วนหัวของเว็บไซต์

HTML
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

ในตัวอย่างนี้ <nav> ถูกใช้ใน <header> ของเว็บไซต์เพื่อกำหนดเมนูหลัก

ลิงก์นำทางใน footer

HTML
<footer>
  <nav>
    <ul>
      <li><a href="/privacy-policy">Privacy Policy</a></li>
      <li><a href="/terms">Terms of Service</a></li>
      <li><a href="/help">Help</a></li>
    </ul>
  </nav>
</footer>

ในตัวอย่างนี้ <nav> อยู่ภายใน <footer> ของเว็บไซต์เพื่อนำลิงก์ที่มักพบในส่วนท้าย

การใช้ <nav> สำหรับลิงก์ sidebar

HTML
<aside>
  <nav>
    <ul>
      <li><a href="/category/tech">Tech</a></li>
      <li><a href="/category/lifestyle">Lifestyle</a></li>
      <li><a href="/category/business">Business</a></li>
    </ul>
  </nav>
</aside>

การใช้งานใน <aside> แสดงถึงเมนูย่อยหรือลิงก์อื่น ๆ ที่อยู่ด้านข้างของเว็บไซต์

Breadcrumb navigation (นำทางแบบร่องรอย)

HTML
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/section">Section</a></li>
    <li>Current Page</li>
  </ol>
</nav>

ใช้ <nav> ร่วมกับ aria-label เพื่อช่วยให้ screen reader เข้าใจว่าเป็น breadcrumb navigation

สรุปการใช้งาน <nav>

  • ใช้ในตำแหน่งต่าง ๆ: <nav> สามารถวางใน <header>, <footer>, หรือในส่วนของ sidebar ได้ตามบริบทของเมนูที่ต้องการแสดง
  • ช่วยใน SEO และ Accessibility: เนื่องจาก <nav> ช่วยให้เครื่องมือค้นหาและผู้ใช้ที่มีข้อจำกัดการใช้งานสามารถเข้าใจโครงสร้างของเว็บไซต์ได้ง่ายขึ้น
  • ควรใช้เมื่อจำเป็น: ไม่จำเป็นต้องใช้ <nav> ทุกครั้งที่มีลิงก์ แต่ควรใช้กับลิงก์ที่เกี่ยวข้องกับการนำทาง
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ