<body> — 문서 골격 태그 도감

올바른 사용

<html> 직속, <head> 다음

한 페이지에 한 개

JS는 body 끝에 (또는 head + defer/async)

본문은 main 안에, 헤더/푸터는 형제로

표준 body 구조

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  <script src="/main.js" defer></script>
</body>

landmark 형제 관계 + script는 body 끝 또는 defer.

skip link 포함

<body>
  <a href="#main" class="skip-link">본문으로 건너뛰기</a>
  <header>...</header>
  <main id="main">...</main>
</body>

시리즈

자주 보는 안티패턴

여러 body

스크립트가 body 시작에 동기 로드 — 렌더 블로킹

body에 시각 스타일 직접 박기 (CSS로 분리 권장)

id 또는 class 없이 거대한 평면 구조

script가 body 맨 앞 동기 로드

<body>
  <script src="/heavy.js"></script>
  <main>...</main>
</body>

스크립트 로드/실행 동안 본문 렌더 블로킹. LCP 손해.

body 안에 또 다른 body

<body>
  ...
  <body>...</body>
</body>

HTML 명세 위반. 브라우저가 두 번째 body를 무시하지만 일부 환경 깨짐.

해설

페이지의 실제 콘텐츠가 담기는 컨테이너. <html> 안에 <head> 다음으로 한 개만 존재. 사용자가 화면에서 보는 모든 것이 이 안에 있다. body 자체는 단순한 wrapper지만 — 그 직속 자식의 구조가 페이지의 시맨틱 수준을 결정한다.

SEO 관점에서 body의 직접 영향은 작다. 다만 body 안의 첫 번째 가시 콘텐츠가 LCP(Largest Contentful Paint)에 해당하는 경우가 많고, body 시작 부분의 무거운 스크립트가 LCP를 늦춘다. Core Web Vitals를 통한 간접 SEO 영향.

GEO 관점에서 AI 크롤러가 본문 콘텐츠를 추출하는 영역. body 직속에 시맨틱 landmark(header/main/footer)가 있으면 AI가 본문이 어디인지를 한 번에 찾는다. 모든 게 div면 추측에 의존하고 — 추측은 자주 틀린다.

A11y 관점에서 body 안의 첫 번째 인터랙티브 요소가 skip link인 것이 표준 (시리즈 #16). 키보드 사용자가 페이지 진입 시 첫 Tab으로 본문으로 건너뛸 수 있게.

자주 보는 안티패턴: body 시작에 무거운 외부 스크립트가 동기 로드되어 본문이 그리기 전에 모든 JS를 다운받아야 하는 경우(LCP 점수 폭락), script에 defer나 async 누락, body 안에 또 다른 body(브라우저가 자동 보정하지만 일부 환경에서 렌더 깨짐), body에 인라인 스타일 직접 박기(CSS로 분리하는 게 캐시·유지보수 모두에 좋음).

body의 직접 자식 패턴 — skip link + header + main + footer + 끝에 defer script가 표준이다. landmark 5인방 중 main·header·footer 셋이 body의 직속 자식이고, nav와 aside는 그 안에 중첩. 이 구조가 정리되면 스크린리더의 D 키 landmark 점프와 AI 에이전트의 본문 식별이 모두 자동으로 작동한다.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설