HTML5 nav element

<nav> มาจากคำว่า Navigation นั่นเอง ใช้สำหรับจัดกลุ่มส่วนที่เป็นลิงค์ต่างๆ ไม่ว่าจะเป็นลิงค์ที่ไปยังไซต์อื่นๆ หรือลิงค์ที่ใช้เชื่อมโยงภายในหน้าเว็บเพจ (เช่นลิงค์ที่เมื่อคลิกแล้วเลื่อนไปแสดงยังส่วนต่างๆของหน้าเพจ) และที่สำคัญคือส่วนที่เป็นเมนูของเว็บไซต์

<body>

<header>

    <h1>Website Header</h1>

    <nav>

        <ul>

            <li><a href="home.html">Home</a></li>

            <li><a href="portfolio.html">Portfolio</a></li>

            <li><a href="about.html">Contact Us</a></li>

        </ul>

    </nav>

</header>

.....

</body>

แต่ก็ไม่ได้หมายความว่าเราจะมี <nav> ได้เพียงตำแหน่งเดียวนะครับ อีกตัวอย่างหนึ่ง เป็นการใช้ <nav> มากกว่า 1 แห่งในเว็บเพจ โดยที่มีรายการหนึ่งเป็นเมนูหลัก และอีกรายการเป็นลิงค์เชื่อมโยงภายในหน้าเพจ ถ้าจะสังเกตุดูให้ดี <nav> อันที่สองซึ่งเป็นเมนูสำหรับการเลื่อนไปยังส่วนต่างๆของเพจจะอยู่ภายในแท็ก <article>

<body>

<h1>Website Header</h1>

<nav>

    <ul>

        <li><a href="home.html">Home</a></li>

        <li><a href="portfolio.html">Portfolio</a></li>

        <li><a href="about.html">Contact Us</a></li>

    </ul>

</nav>

<article>

    <header>

        <h2>บทความแรกของคุณ</h2>

    </header>

    <nav>

        <ul>

            <li><a href=#section1>ย่อหน้าที่ 1</a></li>

            <li><a href=#section2>ย่อหน้าที่ 2</a></li>

            <li>......</li>

        </ul>

    </nav>

    <div>

        <section id=section1>

            <h3>ย่อหน้าที่ 1</h3>

            <p>รายละเอียดของย่อหน้าที่ 1</p>

        </section>

        <section id=section2>

            <h3>ย่อหน้าที่ 2</h3>

            <p>รายละเอียดของย่อหน้าที่ 2</p>

        </section>

        <section>

        .......

        </section>

    </div>

    <footer>

        <p><a href="index.php?action=edit">แก้ไข</a> | <a href="index.php?action=delete">ลบ</a></p>

    </footer>

</article>

<footer>

    <p>Copyright &copy; Goragod.com</p>

</footer>

</body>