<section>안의 <h1>사용에 관하여

사이트를 문서화하던 중 <header> 안에 <h1>이 사용된 구조를 마주쳤습니다. 이어서 콘텐츠 영역인 <section> 안에서도 <h1>으로 헤딩이 시작되고 있었는데, 이 패턴이 과연 올바른 것인지 짚어볼 필요가 있었습니다.

<section> 안에 <h1>을 사용하는 패턴은 HTML5 초기부터 꽤 흔하게 쓰여왔습니다. 섹셔닝 요소마다 독립적인 헤딩 계층을 갖는다는 아웃라인 알고리즘의 개념이 있었고, 실제로 브라우저가 section > h1을 h2처럼 렌더링해줬기 때문에 마크업 구조로서 그럴듯해 보이기도 했습니다.

그러나 이 패턴은 처음부터 문제가 있었습니다. 아웃라인 알고리즘은 명세에만 존재했을 뿐, 브라우저와 스크린리더 어디에도 실제로 구현된 적이 없었습니다. 시각적 렌더링은 단순히 UA 스타일시트의 CSS 규칙 덕분이었고, 접근성 트리에는 전혀 반영되지 않아 스크린리더 사용자에게는 모든 h1이 동등한 최상위 헤딩으로 읽혔습니다.

2022년 HTML 명세에서 아웃라인 알고리즘이 공식 삭제됐고, 2025년부터는 브라우저들이 관련 UA 스타일까지 제거하기 시작했습니다. Chrome 136과 Firefox 138을 기점으로 <section> 안의 <h1>은 Lighthouse 경고 대상이 됐으며, 머지않아 모든 주요 브라우저에서 동일하게 적용될 예정입니다.

이 글에서는 변경 사항의 배경과 영향, 그리고 올바른 헤딩 구조 작성법을 정리합니다.

1. 배경

HTML5에서 아웃라인 알고리즘(Outline Algorithm) 이 도입되면서, <section> 등 섹셔닝 요소 안에 중첩된 <h1>은 깊이에 따라 자동으로 h2, h3처럼 렌더링됐습니다.

브라우저 UA 스타일시트에 다음과 같은 규칙이 적용되고 있었고, 이 때문에 <section> 안에 <h1>을 써도 시각적으로는 계층이 있어 보였습니다.

/* x = article, aside, nav, section */
x h1         { font-size: 1.50em; }  /* h2처럼 */
x x h1       { font-size: 1.17em; }  /* h3처럼 */
x x x h1     { font-size: 1.00em; }  /* h4처럼 */
x x x x h1  { font-size: 0.83em; }  /* h5처럼 */

2. 무엇이 달라졌나?

아웃라인 알고리즘 폐기 (2022)

• HTML 명세에서 아웃라인 알고리즘이 공식 제거됨
• 브라우저와 스크린리더 모두 이 알고리즘을 실제로 구현한 적이 없었음
• 접근성 트리(Accessibility Tree)에는 암묵적 헤딩 레벨이 반영되지 않아 스크린리더 혼란 유발

UA 스타일 제거 (2025~)

아웃라인 알고리즘이 명세에서 제거됐음에도 남아있던 UA 스타일이 이제 브라우저에서도 제거되기 시작했습니다.

3. 영향

UA 스타일 제거 이후, <section> 안의 <h1>은 모두 동일한 크기로 렌더링됩니다.

[이전] section > h1 → h2 크기로 축소되어 보임
[이후] section > h1 → 최상위 h1과 동일한 크기로 렌더링

즉, 기존에 UA 스타일에 의존해 시각적 계층을 표현하던 사이트는 레이아웃이 깨질 수 있습니다.

4. 권장 대응

명시적 헤딩 계층 사용

<!-- 권장 -->
<h1>페이지 제목</h1>
<section>
  <h2>섹션 제목</h2>
  <h3>서브 항목</h3>
</section>

<!-- 지양 -->
<h1>페이지 제목</h1>
<section>
  <h1>섹션 제목</h1>  ← deprecated
</section>

h1 스타일 명시적 선언

UA 스타일에 의존하지 않고, CSS reset 또는 전역 스타일에 직접 지정합니다.

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

/* specificity 충돌 방지가 필요한 경우 :where() 활용 */
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Lighthouse / DevTools 점검

• PageSpeed Insights 에서 H1UserAgentFontSizeInSection 경고 여부 확인
• Chrome DevTools 콘솔에서 deprecated 경고 확인

5. 정리

결론: <section> 안에서는 <h2>부터 시작하는 명시적 헤딩 계층을 사용하고, <h1>의 font-size와 margin은 CSS에서 직접 선언한다.

참고: MDN Blog – Default styles for h1 elements are changing (2025.04.11)