<header> — 페이지 영역 태그 도감

올바른 사용

body 직속 = banner landmark

article/section 안 = 그냥 그룹 컨테이너

한 페이지에 body 직속 header는 한 개

로고·주 내비·검색을 묶는 자리

페이지 전체 banner

<body>
  <header>
    <a href="/" aria-label="홈"><img src="/logo.svg" alt="" /></a>
    <nav aria-label="주 내비">...</nav>
    <button aria-label="검색 열기">...</button>
  </header>
  <main>...</main>
</body>

body 직속 header → banner landmark 자동 부여.

블로그 글의 자체 header

<article>
  <header>
    <h1>글 제목</h1>
    <p>작성자 · 2026-05-26</p>
  </header>
  <p>본문...</p>
</article>

article 안 header는 banner 아닌 일반 그룹. article의 메타 영역.

자주 보는 안티패턴

body 직속 header를 여러 개

header를 div로 대체

article 안 header에 nav 통째로 — 컨텍스트 어긋남

header 안에 main이 들어감

여러 body 직속 header

<body>
  <header>...상단...</header>
  <main>...</main>
  <header>...추가 헤더...</header>
</body>

banner가 두 개. accessibility tree 혼란.

header를 div로

<body>
  <div className="header">...</div>
  <main>...</main>
</body>

banner landmark 손실. 스크린리더 점프 사라짐.

해설

페이지나 article의 도입부. 단순한 시각 영역이 아니라 위치에 따라 의미가 바뀌는 컨텍스트 의존 시맨틱.

body 직속 header = banner landmark. 페이지 최상단의 로고·주 내비·검색을 담는 영역. 사이트의 진입 페이지 모든 곳에 반복되는 부분이라 반복 영역으로 분류되고, 스크린리더 사용자가 건너뛰는 표준 대상.

article·section 안의 header = 일반 그룹. 블로그 글의 제목 + 메타(작성자, 발행일), 카드의 제목 + 아이콘 같은 article 내부 도입부. banner role은 부여되지 않지만 — 시각·시맨틱 묶음으로 작동.

SEO 관점에서 header 자체보다 안에 들어가는 요소가 SEO 신호 — 로고 link의 alt(시리즈 #8), 주 내비의 링크 구조, h1 위치. header 시맨틱은 이 영역이 본문이 아님을 명시해 본문 가중치 평가에서 이 영역을 제외시키는 역할.

GEO 관점에서 AI 에이전트가 사이트에 진입했을 때 어디가 사이트의 정체성인지를 banner에서 찾는다. 로고, 사이트명, 주 내비의 메뉴 텍스트가 이 사이트는 무엇인가의 첫 단서.

A11y 관점에서 banner는 스크린리더 landmark 점프의 첫 도착지. 사용자가 페이지에 들어왔을 때 지금 어느 사이트의 어느 페이지인지를 banner에서 확인하고, 본문으로 이동(skip link 또는 main으로 점프). banner가 없거나 div면 이 오리엔테이션 단계가 사라진다.

자주 보는 안티패턴: body 직속 header가 여러 개(banner가 두 개라는 모순), header를 div로 대체(landmark 손실), article 안 header에 사이트 전체 nav 통째로 넣음(article의 컨텍스트에서 전역 nav가 도입부에 있다는 시맨틱 모순), header 안에 main을 중첩(시맨틱 위계 위반).

Next.js App Router의 layout.tsx에 <header>를 두는 게 표준 — 모든 페이지에 같은 banner가 자동 적용. page.tsx에는 header를 두지 않고 article의 자체 header만 둠. layout/page의 header 중복은 banner 중복 발생.

logo를 h1으로 박는 안티패턴은 시리즈 #5에서 다뤘다. 로고는 a + img + alt로 충분. h1은 각 페이지의 본문 제목이 가져가야 한다.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설