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

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

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

특성

전역 특성만 포함합니다.

사용 일람

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

한 페이지에 하나의 <h1>만 사용

HTML 표준에서 <h1> 요소를 여러 개 사용하는 걸 (중첩되지 않았다면) 막진 않지만, 모범적인 사용으로 간주되진 않습니다. 일반적으로 페이지 각각에는, 문서의 <title> 요소처럼, 페이지의 전체 내용을 설명하는 하나의 <h1> 요소가 있어야 합니다.

되도록 한 페이지에 하나의 <h1>만 사용하고, 건너뛰는 단계 없이 중첩하세요.

접근성

탐색

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

좋지 않음

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

좋음

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

중첩

헤딩은 페이지 콘텐츠를 구성하는 하위 구획들을 나타내기 위해 중첩해 배치할 수 있습니다. 대부분의 스크린 리더는 페이지 내의 모든 헤딩들을 정렬 목록으로 나열해 제공하기도 하므로, 적절한 배치는 사용자가 콘텐츠 구조를 파악하고 이동하는 데 도움이 됩니다.

다음과 같은 구조를 생각해봅시다.

<h1>풍뎅이</h1>

<h2>어원</h2>

<h2>서식지</h2>

<h2>진화</h2>
<h3>고생대</h3>
<h3>쥐라기</h3>
<h3>백악기</h3>
<h3>신생대</h3>

<h2>외형</h2>
<h3>머리</h3>
<h4>입</h4>
<h3>가슴</h3>
<h4>앞가슴</h4>
<h4>날개가슴</h4>
<h3>다리</h3>
<h3>날개</h3>
<h3>배</h3>

스크린 리더가 제공하는 목차는 다음과 같은 형태가 됩니다.

1. 풍뎅이
   1. 어원
   2. 서식지
   3. 진화
      1. 고생대
      2. 쥐라기
      3. 백악기
      4. 신생대
   4. 외형
      1. 머리
         1. 입
      2. 가슴
         1. 앞가슴
         2. 날개가슴
      3. 다리
      4. 날개
      5. 배

중첩 헤딩을 닫을 땐 단계를 “생략”할 수 있습니다. 즉, 단계가 깊어질 때와 달리, 얕아질 땐 <h4> 다음에 <h2>가 올 수도 있습니다.

구획 콘텐츠 레이블링

헤딩 탐색 외에 자주 쓰이는 기법은 콘텐츠 구획 요소의 목록을 사용해 페이지 레이아웃을 파악하는 것입니다.

콘텐츠 구획에는 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>