nav 태그

HTML의 <nav> 태그는 웹 페이지에서 내비게이션(탐색) 링크들을 그룹화하는 데 사용됩니다. 이 태그는 사이트 내에서 사용자들이 다른 페이지나 섹션으로 이동할 수 있도록 돕는 중요한 역할을 합니다. <nav> 태그는 주로 메뉴, 링크 목록 등을 감싸는 용도로 사용됩니다.

주요 특징:

1. 내비게이션 링크를 포함: <nav>는 다른 페이지로 이동할 수 있는 링크들을 그룹화하는 데 사용됩니다.
2. 구조적 의미: <nav>는 시맨틱(의미론적) HTML 요소로, 내비게이션의 역할을 명확하게 표현하므로 검색 엔진 최적화(SEO) 및 접근성(Accessibility)에서 유리합니다.
3. 반복 가능: 페이지에서 여러 개의 내비게이션 영역을 만들 수 있으며, 이를 위해 <nav> 태그를 여러 번 사용할 수 있습니다.

사용 예시:

<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#about">소개</a></li>
    <li><a href="#services">서비스</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

설명:

• <ul> 태그는 순서 없는 리스트로, 내비게이션 메뉴 항목들을 나열하는 데 사용됩니다.
• 각 메뉴 항목은 <li> 태그로 정의되고, 각 항목의 링크는 <a> 태그로 감쌉니다.
• href 속성은 각 링크의 목적지를 정의합니다.

<nav> 사용에 대한 추가 팁:

1. 중복 사용: 페이지 내 여러 내비게이션 영역이 필요한 경우 여러 <nav> 태그를 사용할 수 있습니다. 예를 들어, 상단 내비게이션과 사이드바 내비게이션을 각각 <nav>로 묶을 수 있습니다.
2. <nav class="top-nav"> <ul> <li><a href="#home">홈</a></li> <li><a href="#about">소개</a></li> </ul> </nav> <nav class="side-nav"> <ul> <li><a href="#contact">연락처</a></li> <li><a href="#services">서비스</a></li> </ul> </nav>
3. 반응형 디자인: 내비게이션을 모바일에 맞게 최적화할 때, <nav> 태그와 함께 햄버거 메뉴(모바일에서 메뉴를 숨기고 아이콘을 클릭하면 메뉴가 나타나는 방식) 등을 구현할 수 있습니다.
4. 시맨틱 HTML: <nav> 태그를 사용하면 내비게이션을 정의하는 의미가 명확해져, 검색 엔진이나 스크린 리더와 같은 도구들이 페이지 구조를 이해하는 데 유리합니다.

결론:

<nav> 태그는 웹사이트의 내비게이션 영역을 정의하는 중요한 역할을 하며, 웹 접근성과 SEO를 개선하는 데 도움을 줍니다. 내비게이션 메뉴를 구성할 때는 시맨틱하게 <nav>를 사용하는 것이 좋은 실습입니다.