HTML <h1> – <h6>: 구획 제목 요소

HTML <h1> – <h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

<h1>HTML 구획 제목 요소</h1>
<h2>예제</h2>
<h3>헤딩 추가하기</h3>
<h2>접근성</h2>

특성

전역 특성만 포함합니다.

사용 일람

• 사용자 에이전트는 헤딩 정보를 사용해 자동으로 페이지의 목차를 생성합니다.
• 글씨 크기를 조절하기 위한 목적으로 헤딩 요소를 사용하지 마세요. CSS font-size 속성을 사용하세요.

접근성

탐색

스크린 리더 사용자가 많이 사용하는 탐색 기법은 헤딩 요소 사이를 뛰어넘으며 페이지의 콘텐츠를 빠르게 파악하는 것입니다. 따라서 헤딩의 단계가 중간에 누락되면 탐색 중 놓친 것인지, 애초에 없던 것인지 파악하기 힘듭니다.

좋지 않음

<h1>헤딩 1-1</h1>
<h3>헤딩 3</h3>
<h4>헤딩 4</h4>
<h1>헤딩 1-2</h1>

좋음

<h1>헤딩 1-1</h1>
<h2>헤딩 2</h2>
<h3>헤딩 3</h3>
<h1>헤딩 1-2</h1>

구획 콘텐츠 레이블

탐색 기법과 비슷하게, 스크린 리더를 사용할 땐 콘텐츠 구획의 목록을 통해 페이지 레이아웃을 파악할 수 있습니다.

콘텐츠 구획의 aria-labelledby 특성과 헤딩 요소의 id 특성을 사용하면 구획에 이름을 붙일 수 있으며, 콘텐츠 구획 목록에서 그 목적을 파악하기가 쉬워집니다. 이 방법은 한 페이지 안에 다수의 구획이 있을 때 유용합니다.

예제

<header>
  <nav aria-labelledby="primary-nav">
    <h1 id="primary-nav">주 탐색창</h1>
    <!-- ... -->
  </nav>
</header>

<aside>
  <nav aria-labelledby="secondary-nav">
    <h1 id="secondary-nav">관련 글 탐색</h1>
    <!-- ... -->
  </nav>
</aside>

위의 예제에서 스크린 리더는 두 개의 <nav>가 존재하며 하나는 “주 탐색창”, 다른 것은 “관련 글 탐색”이라고 표현합니다. 별도 레이블을 지정하지 않으면 두 개의 <nav>가 있다는 사실만 표현하므로, 사용자가 직접 헤딩을 조사해서 그 용도를 알아내야 했을 것입니다.

명세

HTML Standard

브라우저 호환성

같이 보기

• 다른 구획 관련 요소
  • <address>
  • <article>
  • <aside>
  • <footer>
  • <header>, …
  • <hgroup>
  • <main>
  • <nav>
  • <section>