HTML <nav>: 탐색 구획 요소

HTML <nav> 요소는 탐색 링크를 포함하는 구획을 나타냅니다. 탐색 링크는 현재 문서 내부 링크일 수도 있고, 다른 문서로의 링크일 수도 있습니다. 대표적인 예시로 메뉴, 목차, 색인 등이 있습니다.

ol {
  display: flex;
  list-style: none;
  padding: 0;
}
a::after {
  content: '>';
  display: inline-block;
  padding: 0 4px;
}

<nav>
  <ol>
    <li><a href="/docs/Web">Web</a></li>
    <li><a href="/docs/Web/HTML">HTML</a></li>
    <li><a href="/docs/Web/HTML/Element">Element</a></li>
    <li>nav</li>
  </ol>
</nav>

<h1>HTML <code>nav</code> 요소</h1>

특성

전역 특성만 포함합니다.

사용 일람

• 페이지의 모든 링크가 <nav> 안에 있어야 하는 것은 아닙니다. <nav> 요소는 주요 탐색 링크 블록을 나타내기 위한 요소입니다.
• 하나의 문서 안에 다수의 <nav>가 존재할 수 있습니다. 예를 들어, 사이트 탐색 링크와 현재 페이지의 목차를 각자의 <nav> 블록으로 나타낼 수 있습니다. 이 때, aria-labelledby 특성을 사용해서 접근성을 향상할 수 있습니다.
• 스크린 리더 등 특수 사용자 에이전트는 <nav> 요소를 이용, 탐색 전용 영역을 파악한 후 초기 렌더링에서 제외할 수 있습니다.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 다른 구획 관련 요소
  • <address>
  • <article>
  • <aside>
  • <footer>
  • <header>
  • <h1>, <h2>, <h3>, …
  • <hgroup>
  • <main>
  • <section>