h1 태그의 기본 스타일이 변경됩니다

(developer.mozilla.org)

주요 브라우저들이 <h1> 태그의 기본 스타일(UA 스타일)을 변경하는 업데이트를 진행 중임
특히 중첩된 section, article, nav, aside 등의 내부에서 사용된 <h1>에 영향을 줌
개발자들은 이 변경으로 인해 사이트에 예기치 않은 스타일 변화나 Lighthouse 경고가 발생할 수 있으므로 주의가 필요함

어떤 점이 바뀌는가

HTML 명세에는 한때 "아웃라인 알고리즘"이라는 규칙이 있어 중첩된 sectioning 요소 수에 따라 <h1>이 시각적으로 <h2>, <h3>처럼 보이게 처리됨
예를 들어 section > h1은 <h2>처럼, section > section > h1은 <h3>처럼 렌더링되었음
이는 실제 접근성 트리에는 반영되지 않았고, 도구마다 다르게 해석되어 혼란을 일으킴
결국 이 알고리즘은 2022년에 HTML 명세에서 제거되었고, 이제 브라우저들도 이에 따른 UA 스타일을 제거하는 중임

예전 브라우저 UA 스타일 예시

x h1 { font-size: 1.50em }
x x h1 { font-size: 1.17em }
x x x h1 { font-size: 1.00em }
x x x x h1 { font-size: 0.83em }
x x x x x h1 { font-size: 0.67em }

HTML 구조 예시

<body>  
  <h1>Level 1</h1>  
  <section>  
    <h1>Level 2</h1>  
    <section>  
      <h1>Level 3</h1>  
      <section>  
        <h1>Level 4</h1>  
      </section>  
    </section>  
  </section>  
</body>

기대할 수 있는 변화 및 시점

<h1>은 이제 중첩된 section 요소들 안에 있다고 해서 자동으로 스타일이 변경되지 않음
UA 스타일은 모든 <h1>에 대해 동일한 스타일을 적용함
Lighthouse에서 <h1>에 font-size가 정의되지 않으면 경고가 표시됨
표시되는 경고: H1UserAgentFontSizeInSection

Firefox

2025년 3월 31일부터 Firefox Beta 138에서 데스크톱 사용자의 50%에게 스타일 변경 배포 시작
Firefox Stable 138에서는 5%에게 배포 후, 140 버전까지 전체 롤아웃 예정
Firefox 136 이상에서는 font-size나 margin이 정의되지 않은 경우 콘솔 경고가 표시됨
설정 변경 방법: about:config에서 layout.css.h1-in-section-ua-styles.enabled 값을 false로 설정

Chrome

Chrome 136부터 <h1>이 기본 작아진 스타일을 사용하면 경고 발생
이는 Lighthouse의 "Best Practices" 점수에 영향을 줄 수 있음

Safari

아직 구체적인 업데이트나 버그 트래킹은 없지만, WebKit에서도 유사한 업데이트가 예상됨

Lighthouse 경고 수정 방법

Lighthouse는 Chromium DevTools 경고를 기반으로 <h1>에 font-size가 없는 경우 경고를 표시함
이를 방지하려면 명시적으로 <h1>에 스타일을 지정해야 함

예시 스타일

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

specificity(우선순위)를 피하려면 :where() 사용

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

관련 정보는 MDN의 heading 요소 문서에 정리되어 있음
https://developer.mozilla.org/en-US/docs/…

요약 체크리스트

브라우저 기본 스타일에 의존하지 말 것
<h2>, <h3> 등을 적절히 사용하여 명시적으로 계층 구조 표현할 것
모든 <h1>에 font-size와 margin을 명시할 것
CSS reset을 업데이트하여 이 변경 사항을 반영할 것
Lighthouse 및 DevTools를 통해 경고 사항 점검할 것
MDN의 관련 문서를 참고하여 최신 내용을 반영할 것

h1 태그의 기본 스타일이 변경됩니다

어떤 점이 바뀌는가

예전 브라우저 UA 스타일 예시

HTML 구조 예시

기대할 수 있는 변화 및 시점

Firefox

Chrome

Safari

Lighthouse 경고 수정 방법

예시 스타일

요약 체크리스트

관련 자료

Hacker News 의견