HTML <nav> tag 정리, 한글 설명

HTML <nav> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

nav 태그란?

nav 엘리먼트는 다른 부분과 연결되는 내비게이션 링크들의 집합을 정의할 때 사용한다.

현재 페이지 내, 또는 다른 페이지로의 링크를 보여준다.

 

 

nav 태그를 어디에서 사용할까?

• 메뉴
• 목차
• 색인

 

 

주의사항

• 문서의 모든 링크가 nav 태그 안에 들어갈 필요는 없다. 오직 중요한 탐색 링크들을 대상으로 사용한다.
• 하나의 문서에서 여러 개의 nav 태그를 사용할 수 있다.
• 웹사이트 하단의 링크들을 정의하기 위해 사용할 수도 있지만, 이 경우에는 일반적으로 nav 태그 말고 footer 태그를 사용한다.
• nav 태그는 address 안에 들어갈 수 없다.

 

 

태그의 사용 예제

<nav class="crumbs">
  <ol>
     <li class="crumb"><a href="#">Bikes</a></li>
     <li class="crumb"><a href="#">BMX</a></li>
     <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>


<nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

 

 

기타사항

• 가능한 ARIA role : 없음
• nav 태그는 HTML5에서 새롭게 추가된 요소이다.
• 브라우저는 스크린리더 사용자를 위해, nav 태그를 참고해서 탐색 전용 콘텐츠를 생략할지 여부를 결정할 수 있다.
• 하나의 문서에서 여러 개의 nav 태그를 사용할 수 있다. (aria-labelledby 사용해 접근성을 향상시키자)

 

 

출처

W3schools, 모질라, tcpschool, W3docs