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

올바른 사용

주제별로 묶이는 콘텐츠

aria-labelledby로 헤딩 연결 (landmark가 됨)

각 section은 자체 헤딩 보유

독립적이지 않은 그룹 (독립이면 article)

aria-labelledby로 landmark

<main>
  <section aria-labelledby="features">
    <h2 id="features">주요 기능</h2>
    <p>...</p>
  </section>
  <section aria-labelledby="pricing">
    <h2 id="pricing">요금제</h2>
    <p>...</p>
  </section>
</main>

aria-labelledby가 있으면 accessibility tree에서 region landmark.

헤딩만으로 그룹화

<article>
  <section>
    <h2>도입</h2>
    <p>...</p>
  </section>
  <section>
    <h2>본론</h2>
    <p>...</p>
  </section>
</article>

글 안의 주제 그룹. landmark 아니어도 시맨틱 그룹 역할.

자주 보는 안티패턴

section과 article 혼용

section을 layout div 대용으로 남발

section에 헤딩 없음 — landmark 자격 잃음

모든 div를 section으로 변경 — 시맨틱 노이즈

layout div 대용

<section className="container">
  <section className="row">
    <section className="col">...</section>
  </section>
</section>

시맨틱 의미 없는 wrapping. div 또는 grid CSS가 적절.

헤딩 없는 section

<section>
  <p>제목 없이 본문만</p>
</section>

accessibility tree에서 익명 region. 사용자가 그룹의 정체성 모름.

해설

페이지나 article 안의 주제별 그룹. 같은 페이지에 다른 주제를 다루는 여러 영역이 있을 때 각각을 section으로 분리한다. article과의 차이는 독립성 — article은 떼어내도 의미가 통하고, section은 페이지 안에서만 의미가 있다.

SEO 관점에서 section은 페이지의 주제 구조를 명시한다. 한 페이지에 소개·기능·요금·후기 같이 여러 주제가 있을 때 — 각 section + 헤딩 쌍이 검색엔진의 주제별 가중치 분리에 기여한다. "요금제는?" 검색에 페이지의 요금 section만 추출되어 답변으로 노출되기도 한다.

GEO 관점에서 AI는 페이지를 질문 단위로 답할 수 있는 작은 덩어리로 분해한다. 그 덩어리의 경계가 section + 헤딩. "이 서비스의 주요 기능은?"에 페이지의 "주요 기능" section만 인용된다. section이 없으면 AI가 주제 경계를 본문 텍스트 패턴으로 추측해야 한다.

AEO 관점에서 "질문 헤딩 + 답변 section" 패턴이 가장 강한 AEO 신호다. FAQ 페이지, 가이드 페이지, 비교 페이지의 각 항목을 section + h2 + 본문으로 마크업하면 — Featured Snippet 인용 가능성이 직접 올라간다.

A11y 관점에서 section은 aria-labelledby로 헤딩과 연결될 때 region landmark로 노출된다. 그렇지 않으면 익명 그룹이라 landmark 점프에서 안 보인다. 즉 section을 의미 있게 쓰려면 aria-labelledby + 헤딩 쌍이 표준.

자주 보는 안티패턴: section을 layout div 대용으로 남발하는 케이스(<section className="container"><section className="row">...</section></section> 같은 형태 — 시맨틱 의미 없는 wrapping은 div나 CSS grid가 적절), 헤딩 없는 section(accessibility tree에서 제목 없는 그룹은 사용자가 의미를 모름).

article과의 결정 트리 — RSS 피드 한 아이템으로 떼어낼 수 있나? 예 → article. 페이지 안 주제 그룹이지만 독립적이지는 않은가? 예 → section. 헷갈리면 글 한 편 = article, 그 글 안의 챕터 = section로 기억.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설