TOC

This article is currently in the process of being translated into Thai (~97% done).

Semantic HTML5 section tags:

The navigation tag

Element ใหม่อีกอันของ HTML คือ <nav> element ซึ่งจะเป็นตัวเชื่อมไปยังส่วนต่างๆของ document การเชื่อมต่อไปทึ่ต่างๆสามารถเชื่อมต่อไปใน document เดียวกันหรือต่างกันก็ได้ แต่สิ่งสำคัญคือ จุดเชื่อมต่อไม่จำเป็นจะต้องใช้ <nav> element เสมอ

เราควรใช้ <nav> element ในโครงสร้างพื้นฐานเท่านั้น

เราจะใช้ <nav> element ได้อย่างไร? เมื่อก่อนนั้นเราจะใช้ div ในการเชื่อมต่อ document ดังนี้

<div id="menu">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

หรือแบบนี้

<div id="navigation">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

เราแค่แทนที่จากของเก่า <div> ด้วย <nav> ดังนี้

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

แปลว่าการใช้ <nav> element นี้ทำได้ง่าย? คำตอบคือ ไม่ เพราะมันจะมีกลุ่มคนจำพวกนึงใช้งานแบบนี้ แต่อีกกลุ่มนึงใช้งานอีกแบบ เช่น สามารถใช้กับ breadcrumbs, related post, หรือ pagination ได้ไหม? กลุ่มนึงจะตอบได้ อีกกลุ่มนึงจะบอกว่าไม่ได้

ความสับสนนี้จะทำให้เราเลิกใช้ <nav> element ไหม? คำตอบคือ ไม่ เราสามารถใช้งาน <nav> element แบบตัวอย่างข้างบนได้ แล้วก็ขึ้นอยู่กับเราว่าเราจะใช้มันตรงไหน แต่สิ่งที่ต้องทำก็คือ ที่ไหนก็ตามที่ใช้ <div id="menu"> หรือ <div id="navigation"> เราจะแทนที่ด้วย <nav> element

สรุป

  • เราควรใช้ <nav> element ในโครงสร้างพื้นฐานเท่านั้น
  • กลุ่มคนจำพวกนึงใช้งาน <nav> element กับ bread crumbs, related post, หรือ pagination
  • ขึ้นอยู่กับเราว่าเราจะใช้ <nav> element ตรงไหน
  • <nav> element เป็น block-level element
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!