<!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>
<!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>
    <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>
<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>
<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>
<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>
    <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>  
<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>

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