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>
스크린 리더가 제공하는 목차는 다음과 같은 형태가 됩니다.
- 풍뎅이
- 어원
- 서식지
- 진화
- 고생대
- 쥐라기
- 백악기
- 신생대
- 외형
- 머리
- 입
- 가슴
- 앞가슴
- 날개가슴
- 다리
- 날개
- 배
- 머리
중첩 헤딩을 닫을 땐 단계를 “생략”할 수 있습니다. 즉, 단계가 깊어질 때와 달리, 얕아질 땐 <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>
가 있다는 사실만 표현할테니, 사용자가 직접 구획을 조사해서 그 용도를 알아내야 했을 것입니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
h1 | |||||||
No user agent styles in <article> , <aside> , <nav> , and <section> . |