<nav> — 페이지 영역 태그 도감

올바른 사용

여러 개 있을 때 각각 aria-label로 구분

주요 내비게이션만 — 모든 링크 그룹이 nav는 아님

ul/li로 링크 목록 구조화

현재 페이지 표시는 aria-current="page"

주 내비 + 푸터 내비 구분

<header>
  <nav aria-label="주 내비게이션">
    <ul>
      <li><a href="/" aria-current="page">홈</a></li>
      <li><a href="/about">소개</a></li>
      <li><a href="/services">서비스</a></li>
    </ul>
  </nav>
</header>
<footer>
  <nav aria-label="푸터 링크">
    <ul>
      <li><a href="/privacy">개인정보</a></li>
      <li><a href="/terms">약관</a></li>
    </ul>
  </nav>
</footer>

여러 nav는 라벨로 구분. 현재 페이지에 aria-current.

블로그 글 내 목차

<aside>
  <nav aria-label="목차">
    <ol>
      <li><a href="#intro">도입</a></li>
      <li><a href="#body">본론</a></li>
    </ol>
  </nav>
</aside>

글 내 점프 링크도 nav로. ol로 순서 명시.

자주 보는 안티패턴

라벨 없는 여러 nav — 구분 불가

푸터의 모든 링크를 nav로 — 의미 약화

단일 링크 또는 두세 개 링크를 nav로 — 과잉

현재 페이지 표시 누락

라벨 없는 여러 nav

<nav>...주 내비...</nav>
<nav>...푸터 내비...</nav>

스크린리더가 "navigation, navigation" 두 번 발화. 구분 불가.

모든 링크 그룹을 nav로

<nav>
  <a href="/">홈</a>
</nav>

단일 링크는 nav 아님. 시맨틱 노이즈.

해설

사이트의 주요 링크 그룹. 헤더의 주 내비게이션, 푸터의 부속 링크, 사이드바의 목차, 페이지 내 점프 링크. 링크가 있는 모든 곳이 nav는 아니다 — 주요 내비게이션 단위에만 쓴다.

SEO 관점에서 nav는 검색엔진의 사이트 맵 자동 구성에 기여한다. 구글이 사이트를 크롤링할 때 nav 안의 링크는 주요 페이지로의 경로로 평가되어, 깊은 페이지의 발견과 인덱싱이 빠르다. 일반 본문 안 링크와는 가중치가 다르다.

GEO 관점에서 AI 에이전트가 "이 사이트의 가격 페이지로 가줘" 같은 작업을 받으면 — nav 안에서 "가격"이라는 텍스트 링크를 1순위로 찾는다. 본문 안 링크보다 nav 안 링크가 주요 페이지 안내임을 명시적으로 알려주기 때문이다.

AEO 관점에서 직접 답변 인용 영향은 작다. 다만 "이 사이트는 어떤 서비스를 제공하는가?" 같은 질문에 nav의 메뉴 텍스트가 인용되기도 한다.

A11y 관점에서 nav가 가장 직접적이다. 스크린리더 사용자의 D 키 landmark 점프에서 navigation으로 분리되어 들린다. 반복 영역(헤더·푸터의 같은 메뉴)을 한 번에 건너뛰는 skip 기능의 표준 단위. KWCAG 2.4.1 반복 영역 건너뛰기의 표준 구현이 nav + skip link 조합.

자주 보는 안티패턴: 라벨 없는 여러 nav("navigation, navigation, navigation"으로 발화되어 구분 불가 — 페이지에 nav가 2개 이상이면 반드시 aria-label), 단일 링크를 nav로 감싸기(시맨틱 노이즈), 푸터의 모든 링크를 nav로 감싸기(소셜 링크, 저작권 표시, 정책 링크가 섞이면 nav의 의미 약화 — 정책 링크 그룹만 nav로).

aria-current="page"로 현재 페이지 표시. 시각적으로 활성 상태 표시(굵게·다른 색)는 흔하지만, 시맨틱하게는 aria-current로 명시. 스크린리더가 "현재 페이지"로 발화한다. 검색 결과에서도 나의 위치를 인지하는 사용자에게 도움.

UI 라이브러리의 nav 처리 — Headless UI나 Radix는 nav 자체 컴포넌트는 없고 사용자가 직접 <nav> 태그를 쓴다. 다만 ARIA Authoring Practices가 권장하는 키보드 단축키(방향키로 메뉴 이동, Home/End로 처음/끝)는 직접 구현 또는 라이브러리(Radix NavigationMenu)에 위임.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설