HTML 시맨틱 태그: header와 nav 태그, 메뉴가 여러 개라면 aria-label은 필수!

HTML 시맨틱 태그, 어느덧 세 번째 포스트다.

지난 시간에는 본문의 독립적인 구조를 다뤘다면, 이번에는 사이트의 첫인상을 결정하는 상단 영역의 핵심인 header 태그와 웹사이트의 지도 역할을 하는 nav 태그에 대해 알아보겠다.

이전 포스트

HTML 시맨틱 태그, 독립적인 콘텐츠를 위한 article 태그

HTML 시맨틱 태그 시리즈 두 번째! 독립적인 콘텐츠 단위인 article 태그의 특징과 사용 규칙을 정리합니다. main 태그와의 계층 구조 차이부터 사이드바·푸터에서의 재사용 사례까지, SEO에 최적화된 올바른 HTML 설계 방법을 실제 예시와 함께 알아봅니다.

header 태그

먼저 <header> 태그에 대해서 정리하겠다.

header 태그는 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의하는 태그다.

보통 사이트 로고, 검색창, 페이지 제목 등을 담는다.

페이지 상단뿐만 아니라, <article>의 내부에서도 사용될 수 있다.

<article> 내부에 쓰일 때는 해당 글의 제목, 작성자, 작성일 등을 담는 용도로 사용된다.

이번에도 이 블로그에 적용되어 있는 템플릿(스킨)에서 header 태그가 어떻게 사용되고 있는지 캡처한 이미지로 살펴보겠다.

개발자 도구를 통해서 확인해 보면, header 태그 내부에 nav 태그가 위치해 있다.

하늘색 화살표가 가리키는 하늘색 네모 부분이 header 태그로 감싸여 있는 부분이다.

그 안에 블로그의 이름과 블로그 카테고리 메뉴(<nav>), 소셜미디어 링크, 검색창 등이 들어가 있다.

이제 <nav> 태그에 대해서 설명하겠다.

nav 태그

<nav> 태그는 주요 내비게이션^Navigation(메뉴) 링크들의 집합을 정의하는 태그다.

페이지 내의 모든 링크를 <nav>로 감쌀 필요는 없다.

사이트의 핵심 메뉴(홈, 소개, 서비스 등)처럼 중요한 안내 지도 역할을 할 때만 사용한다.

이 블로그에서는 header 부분 안에 있는 nav 태그 말고도 사이드바에도 nav 태그가 있다.

참고로 이건 내가 따로 만든 거다.

관련 포스트

구글 블로그 카테고리 순서 원하는 대로 정렬하기

구글 블로그 사이드바 카테고리(라벨 위젯)의 정렬 순서를 원하는 대로 바꾸는 방법을 알아봅니다. '가나다순/빈도순'만 지원하는 기본 위젯의 제한을 우회하여, 사용자 정의 순서로 직접 정렬하는 방법을 안내합니다.

nav 태그는 한 페이지에 여러 개(2개 이상) 존재할 수 있다.

사실 규모가 있는 웹사이트라면 2개 이상 사용하는 것이 오히려 더 권장되기도 한다.

1. 한 페이지에 nav 태그가 여러 개인 대표적 사례

보통 다음과 같은 상황에서 여러 개의 <nav>를 사용한다.

• 상단 메인 메뉴: 사이트 전체의 주요 카테고리로 이동하는 메뉴.
• 사이드바 메뉴: 현재 카테고리 내의 하위 메뉴들로 이동하는 메뉴.
• 푸터 메뉴: 이용약관, 개인정보처리방침 등 사이트 하단에 모여 있는 링크들.
• 브레드크럼: "홈 > 카테고리 > 현재 글"처럼 현재 위치를 알려주는 경로 링크.
• 페이지네이션: 게시판 하단의 "1, 2, 3, 다음" 같은 페이지 번호 목록.

2. 여러 개를 쓸 때 반드시 지켜야 할 규칙 (aria-label)

검색엔진(SEO)과 스크린 리더(웹 접근성)는 페이지에 <nav>가 여러 개 있으면 각각이 어떤 역할인지 구분하기 어려워한다.

이때 사용하는 것이 aria-label 속성이다.

<nav aria-label="메인 메뉴">
  <ul>...</ul>
</nav>

<aside>
  <nav aria-label="서브 메뉴">
    <ul>...</ul>
  </nav>
</aside>

<footer>
  <nav aria-label="푸터 서비스 메뉴">
    <ul>...</ul>
  </nav>
</footer>

이런 식으로 aria-label을 지정하면 시각 장애인이 스크린 리더를 사용할 때 "탐색 영역, 메인 메뉴", "탐색 영역, 푸터 서비스 메뉴"라고 각각 읽어주기 때문에 훨씬 편리하게 사이트를 이용할 수 있다.

3. 남발하지 말 것

비록 여러 개를 쓸 수 있지만, 모든 링크 덩어리를 <nav>로 감싸는 것은 좋지 않다.

• <nav>를 써야 할 곳: 페이지의 핵심적인 이동 수단(지도의 역할).
• 쓰지 않아도 될 곳: 포스트 내의 참고 문헌 링크, 하단 하이퍼링크 등 부수적인 링크들.

요약하자면, 한 페이지에 여러 개의 <nav>를 써도 전혀 문제없다.

다만, 각 <nav>가 무엇을 탐색하는지 aria-label로 이름표를 붙여주는 것이 정석이다.

현재 이 블로그는 푸터 메뉴와 페이지네이션에 <nav>를 사용하지 않고 있고, aria-label 속성도 사용하지 않고 있는데 곧 수정해야겠다.

header 태그와 nav 태그의 포함 관계

위에서 이미지로 보여줬던 것처럼 이 블로그에서는 <nav>가 <header> 안에 포함되는 구조였다.

이것이 가장 권장되는 구조다.

대부분의 웹사이트는 상단 영역(header) 안에 로고와 함께 메뉴(nav)가 들어있다.

이 구조가 가장 직관적이고 좋다.

<header>와 <nav>가 대등한 위치에 있는 구조도 가능하다.

단, <nav> 안에 <header>를 넣는 구조는 잘못된 것이니 주의하도록 하자.

위의 두 번째 캡처 이미지처럼 나는 블로그에 '하위 메뉴'가 아닌, header에 있는 메뉴와 똑같은 메뉴를 사이드바에 또 넣었다.

사용자의 편의를 위해서 넣은 것인데, 이렇게 하는 것도 기술적으로나 UX(사용자 경험)적으로나 좋은 방법이다

실제로 많은 블로그와 서비스들이 사용자의 편의를 위해 동일한 메뉴를 여러 곳에 배치하기도 한다.

다음 포스트

HTML 시맨틱 태그, 부가 정보의 aside와 하단 영역의 footer 태그

HTML 시맨틱 태그 중 부가 정보를 담당하는 aside 태그와 사이트 하단을 정의하는 footer 태그의 사용법을 알아봅니다. 실제 블로그 스킨을 분석하며 사이드바에 왜 aside를 사용해야 하는지, footer 내부에 들어갈 핵심 정보는 무엇인지 정리했습니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.