HTML, CSS

HTML5 <aside> vs <nav> 차이와 활용법 – 구조와 의미를 살리는 웹표준 태그

jonbeo 2025. 8. 20. 10:54
반응형

 

 

안녕하세요 😊
웹페이지를 구성할 때 메뉴, 사이드바, 보조 정보 영역을 만들다 보면
“이건 <aside>로 해야 하나, <nav>로 해야 하나?” 고민되는 경우가 있습니다.
두 태그는 비슷해 보이지만 의미와 목적이 다릅니다.

이번 글에서는 <aside>와 <nav>의 차이, 사용 예시, 접근성 팁을 정리해보겠습니다.

📍 1. <aside> 태그란?

  • 페이지의 보조 콘텐츠를 나타내는 태그
  • 메인 콘텐츠와 직접적인 관련은 없지만 참고·보조 정보 제공
  • 사이드바, 광고 영역, 관련 글 목록, 인용구 등에 사용

예시

<aside>
  <h2>관련 글</h2>
  <ul>
    <li><a href="#">HTML5 시맨틱 태그 정리</a></li>
    <li><a href="#">CSS Flexbox 완벽 가이드</a></li>
  </ul>
</aside>

 

📌 특징

  • 메인 콘텐츠 흐름과 독립적
  • 메인 영역 외에도, 글 안의 참고 자료·팁 상자도 <aside> 가능

📍 2. <nav> 태그란?

  • 페이지나 사이트 내의 탐색 링크 집합을 나타냅니다.
  • 메뉴, 카테고리, 목차, 페이지네이션 등 네비게이션 역할을 하는 링크 모음에 사용

예시

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

 

📌 특징

  • 반드시 링크 집합이어야 함
  • 페이지 최상단 메뉴뿐 아니라, 푸터 메뉴, 사이드 메뉴 등에도 사용 가능

📍 3. aside vs nav 비교

구분 <aside> <nav>
의미 보조 콘텐츠 탐색 링크 모음
사용 예 광고, 관련 글, 팁, 인용구 사이트 메뉴, 목차, 페이지네이션
필수 요소 없음 링크(<a>) 집합 필수
위치 사이드, 메인 안팎 어디든 가능 보통 페이지 주요 영역에 위치

 

📍 4. 함께 쓰는 경우

사이드바 안에 메뉴가 있다면?

<aside>
  <nav>
    <ul>
      <li><a href="#">카테고리 1</a></li>
      <li><a href="#">카테고리 2</a></li>
    </ul>
  </nav>
</aside>
  • <aside> : 전체가 메인 콘텐츠의 보조 영역
  • <nav> : 그 안의 탐색 메뉴

📍 5. 접근성 & SEO 팁

  • <nav>는 스크린리더에서 **"탐색 영역"**으로 인식 → 바로가기 제공
  • <aside>는 **"보조 영역"**으로 인식
  • 둘 다 의미가 명확해 검색엔진이 구조를 잘 이해 → SEO에 도움

✅ 마무리

<aside>와 <nav>는 모양이 아니라 역할과 의미로 구분해야 합니다.
보조 정보면 <aside>, 탐색 메뉴면 <nav>!
올바른 사용은 웹표준, 접근성, SEO 모두에 이점이 있습니다. 😊

반응형