HTML의 <nav> 요소는 웹 문서 안에서 주요 내비게이션(navigation) 링크 영역을 정의할 때 사용합니다. 페이지 상단 메뉴, 사이드바 목차, 푸터 링크 모음처럼 문서의 핵심 이동 경로를 감싸는 역할을 하며, 이 태그는 HTML5에서 새롭게 도입된 시맨틱(semantic) 요소입니다.
<nav>를 사용하면 브라우저와 스크린 리더가 '여기가 메뉴 영역이다'라고 인식할 수 있어 접근성 측면에서도 유리합니다. 그럼 실제 예제를 통해 <nav> 태그의 사용법을 살펴보겠습니다.
예제
<!DOCTYPE html> <html> <body> <nav> <a href="/tutorialslibrary/">Tutorials</a> | <a href="/programming_examples/">Codes</a> | <a href="/online_dev_tools/">Tools</a> | <a href="/articles/">Articles</a> | <a href="/questions/index.php/">QA</a> | <a href="/current_affairs/index.htm/">Current Affairs</a> </nav> </body> </html>
실행 결과
코드 분석
먼저 <a> 태그와 href 속성을 사용해 여러 개의 하이퍼링크를 만들었습니다.
<a href="/tutorialslibrary/">Tutorials</a> | <a href="/programming_examples/">Codes</a> | <a href="/online_dev_tools/">Tools</a> | <a href="/articles/">Articles</a> | <a href="/questions/index.php/">QA</a> | <a href="/current_affairs/index.htm/">Current Affairs</a>
이렇게 나열된 링크들이 단순한 텍스트 나열에 그치지 않고 하나의 메뉴 영역으로 의미 있게 묶이도록, 전체를 <nav> 요소로 감싸주었습니다.
<nav> <a href="/tutorialslibrary/">Tutorials</a> | <a href="/programming_examples/">Codes</a> | <a href="/online_dev_tools/">Tools</a> | <a href="/articles/">Articles</a> | <a href="/questions/index.php/">QA</a> | <a href="/current_affairs/index.htm/">Current Affairs</a> </nav>
nav 태그 사용 시 참고 사항
<nav>는 문서 내 중요한 내비게이션 블록에만 사용하는 것이 좋습니다. 푸터에 있는 저작권 문구나 약관 링크처럼 부차적인 링크까지 모두 <nav>로 감쌀 필요는 없습니다. 또한 하나의 페이지에 여러 개의 <nav> 요소를 사용할 수 있으며, 각각에 aria-label 속성을 지정하면 보조 기기 사용자가 어떤 메뉴인지 더 쉽게 파악할 수 있습니다.