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

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> 요소가 있어야 합니다.

이전 버전의 HTML 표준들에서는 중첩된 구획 요소마다 <h1>을 배치하는 걸 허용했습니다. 하지만 당시에도 모범 사례로 취급한 경우는 없었고, 이제는 비표준 마크업입니다. There Is No Document Outline Algorithm에서 더 알아보세요.

되도록 한 페이지에 하나의 <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. 머리
      2. 가슴
        1. 앞가슴
        2. 날개가슴
      3. 다리
      4. 날개

중첩 헤딩을 닫을 땐 단계를 “생략”할 수 있습니다. 즉, 단계가 깊어질 때와 달리, 얕아질 땐 <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

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
h1
No user agent styles in <article>, <aside>, <nav>, and <section>.

같이 보기

마지막 수정:

CC BY-SA 4.0 unless otherwise noted. See LICENSE.