앵커와 내비게이션 구조 설계

사용자가 길을 잃지 않게 만드는 HTML

​웹사이트에서 사용자가 원하는 정보를 쉽게 찾도록 돕는 것이 **내비게이션(Navigation)**의 핵심입니다. HTML에서는 <a>와 <nav> 태그를 활용해 사이트 구조를 명확하게 설계할 수 있습니다.

기본 앵커 사용법

앵커(<a> 태그)는 페이지 내 이동이나 외부 링크 연결에 사용됩니다.

<a href="https://example.com">홈페이지 이동</a>
<a href="#section2">페이지 섹션 2로 이동</a>

href="#"처럼 단순히 페이지 상단으로 이동하거나, id 속성과 함께 내부 링크로 연결할 수 있습니다.

내비게이션 구조

HTML5에서는 <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>

검색 엔진과 보조기기는 <nav>를 통해 페이지의 구조와 중요한 링크를 빠르게 이해할 수 있습니다.

실무 활용 사례

1. 메인 메뉴: 헤더에 사이트 주요 메뉴 구성

2. 사이드바: 블로그 카테고리 목록 제공

3. 푸터 링크: 사이트 맵, 개인정보처리방침, 이용약관 등

접근성 팁

• <ul>과 <li>를 사용하여 목록 구조를 명확히 작성

• 스크린리더가 메뉴 항목을 쉽게 읽도록 aria-label 속성 활용

<nav aria-label="주요 메뉴">  <ul>    <li><a href="/">홈</a></li>    ...  </ul></nav>