<nav> 태그의 정의 및 사용법

<nav> 태그는
다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(navigation)을 위한 링크(links)가 있는 영역을 나타냅니다.
일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>nav 태그 예제</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
        </header>
        <nav>
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/about">회사 정보</a></li>
                <li><a href="/services">서비스</a></li>
                <li><a href="/contact">연락처</a></li>
            </ul>
        </nav>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 페이지의 주요 내용의 일부입니다.</p>
        </aside>
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>

페이지의 모든 링크 그룹이 <nav> 태그에 있을 필요는 없습니다. 이 태그는 주로 주요 탐색 블록으로 구성된 영역을 위한 것입니다.
특히 <footer> 태그에는 서비스 약관, 홈 페이지, 저작권 페이지 등 사이트의 다양한 페이지에 대한 짧은 링크 목록이 있는 것이 일반적입니다. 이러한 경우에는 <footer> 태그만으로도 충분합니다. 이러한 경우 <nav> 태그를 사용할 수 있지만 일반적으로 필요하지 않습니다.

다음 예에서는 페이지에 링크가 있는 여러 위치가 있지만 해당 위치 중 하나만 탐색 영역으로 간주됩니다.

HTML <nav> 태그는 주로 주요 탐색 블록으로 구성된 영역을 위한 것입니다. 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>nav 태그 예제</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
            <p> <!--주요 탐색 영역으로 간주되지 않습니다. -->
                <a href="news.html">뉴스</a> -
                <a href="blog.html">블로그</a> -
                <a href="forums.html">포럼</a>
            </p>
            <p>마지막 수정: <span>2009-04-01</span></p>
            <nav> <!--주요 탐색 영역으로 간주됩니다. -->
                <ul>
                    <li><a href="/">홈</a></li>
                    <li><a href="/about">회사 정보</a></li>
                    <li><a href="/services">서비스</a></li>
                    <li><a href="/contact">연락처</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 페이지의 주요 내용의 일부입니다.</p>
        </aside>
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>

사용 예제

<nav> 태그의 다양한 사용 예제 중 일부를 살펴보겠습니다.

주요 네비게이션 메뉴

가장 일반적인 사용 사례는 웹 사이트의 주요 네비게이션 메뉴를 <nav> 태그로 둘러싸는 것입니다. 이 메뉴는 웹 사이트의 주요 섹션 또는 페이지로 연결하는 링크를 포함합니다.

HTML 
<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

페이지 내부 탐색 메뉴

페이지 내에서 부가적인 탐색 메뉴를 정의할 수도 있습니다. 이 메뉴는 페이지 내에서 더 자세한 네비게이션을 제공할 때 사용됩니다. 예를 들어, 블로그 페이지에서 카테고리 또는 태그로 게시물을 필터링하는 메뉴가 있을 수 있습니다.

HTML 
<nav>
    <ul>
        <li><a href="#all">전체</a></li>
        <li><a href="#tech">기술</a></li>
        <li><a href="#lifestyle">라이프스타일</a></li>
        <li><a href="#travel">여행</a></li>
    </ul>
</nav>

<!-- 블로그 콘텐츠 -->
<section id="all">
    <!-- 전체 카테고리 게시물 -->
</section>
<section id="tech">
    <!-- 기술 카테고리 게시물 -->
</section>
<section id="lifestyle">
    <!-- 라이프스타일 카테고리 게시물 -->
</section>
<section id="travel">
    <!-- 여행 카테고리 게시물 -->
</section>

위의 예시에서 로그의 카테고리를 필터링하고 해당 카테고리로 스크롤하여 관련 게시물을 볼 수 있도록 돕습니다. 각 링크는 페이지 내 특정 위치로 이동하도록 구성되어 있으며, id 속성과 href 속성을 함께 사용하여 해당 위치를 정의하고 링크합니다.

Breadcrumbs

Breadcrumbs는 사용자에게 현재 페이지의 위치를 시각적으로 보여주고 이전 페이지로 이동하는 데 사용됩니다.

HTML 
<nav>
    <ol>
        <li><a href="/">홈</a></li>
        <li><a href="/products">제품</a></li>
        <li><a href="/products/category1">카테고리 1</a></li>
        <li aria-current="page">현재 페이지</li>
    </ol>
</nav>

위의 예시에서 Breadcrumbs를 사용하여 사용자는 현재 페이지가 "홈 > 제품 > 카테고리 1 > 현재 페이지"임을 이해할 수 있고, 각 부분을 클릭하여 해당 페이지로 이동할 수 있습니다.

Pagination

Pagination은 웹 페이지에서 콘텐츠를 여러 페이지로 분할하고 각 페이지로 이동할 수 있는 탐색 시스템을 가리킵니다. 특히 게시판 등에서 많이 사용합니다.

HTML 
<nav>
    <ul>
        <li><a href="/page/1">이전</a></li>
        <li><a href="/page/2">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/4">4</a></li>
        <li><a href="/page/5">5</a></li>
        <li><a href="/page/6">다음</a></li>
    </ul>
</nav>

간단한 웹페이지 내비게이션

이 예시에서, <nav> 태그 내에는 목록이 아닌 각각의 텍스트 링크가 포함되어 있습니다. <nav> 태그는 목록을 포함할 필요가 없으며 다른 종류의 콘텐츠도 포함할 수 있습니다.

HTML 
<nav>
    <h2>네비게이션</h2>
    <p>
        당신은 내 홈페이지에 있습니다.
        북쪽에는 <a href="/blog">내 블로그</a>가 있으며,
        전투 소리가 들립니다. 동쪽으로 가면 큰 산이 보이며,
        여기에는 <a href="/school">학교 과제</a>가 많이 흩어져 있습니다.
        이 산 위에는 저를 닮은 작은 인물이,
        절박하게 <a href="/school/thesis">논문</a>을 쓰는 것처럼 보입니다.
    </p>
    <p>
        서쪽으로 가면 여러 개의 출구가 있습니다.
        놀기 좋아보이는 출구에는 "게임"이라고 적혀 있습니다.
        다른 덜 재미있어보이는 출구에는 "ISP"라고 적혀 있습니다.
    </p>
    <p>
        남쪽에는 어두운 고요한 <a href="/about">연락처 페이지</a>가 있습니다.
        그 출입구에는 거미줄이 걸려 있으며,
        어느 순간 쥐 한 마리가 빨리 페이지 밖으로 뛰어 나가는 것을 볼 수 있습니다.
    </p>
</nav>

접근성 고려사항

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다. 웹 페이지를 이해하고 탐색하는 데 도움을 주며, 스크린 리더 및 다른 보조 기술을 사용하는 사용자에게 페이지의 레이아웃 및 구조를 전달하는 데 중요한 역할을 합니다.

ARIA Landmarks Example을 참조하시기 바랍니다.

<nav> 태그는 페이지의 주요 탐색 영역을 나타냅니다. role 속성의 값은 navigation입니다.

HTML role 속성

다음은 <nav> 태그를 사용하지 않고 <div> 태그에 role="navigation"를 사용해서 랜드마크로 사용하는 예입니다.

HTML 
<div role="navigation">
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</div>

브라우저 호환성 문제로 <nav> 태그를 사용할 수 없는 경우를 제외하고, role="navigation" 사용 보다는 <nav> 태그를 사용하세요.

주의하세요!
<nav> 태그는 role 속성이 허용되지 않습니다.

주의하세요!
<nav> 태그는 <address> 태그를 조상으로 사용할 수 없습니다.

브라우저 호환성

nav 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<nav> 5 12 4 5

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

nav 태그의 명세서 사양
명세서 사양
<nav> HTML Standard
#the-nav-element

참고문헌

같이 보기