문서의 제목을 구성하는 헤딩요소들에 대하여 알아봅니다. HTML5 스펙에서는 이를 적절히 부여하면 목차를 만들듯이 구조화된 아웃라인 생성이 가능합니다.
헤드라인
섹션을 만들고 내용을 묶었다면 적절한 제목을 부여하여 쉽고 빠른 이해를 도와야 한다. 웹 콘텐츠 제작에 필요한 제목은 아래와 같다.
문서제목(Page Title)
문서에 붙이는 제목으로 <title> 요소가 이에 해당한다.
헤딩(Heading)
구획화된 내용에 붙이는 제목으로 <h1>~<h6> 요소가 이에 해당한다.
레이블(Label)
컨트롤 요소에 붙이는 제목으로 <label> 요소가 이에 해당한다.
캡션(Caption)
테이블이나 이미지에 붙이는 제목으로 <caption>과 <figcaption> 요소가 이에 해당한다.
H1~H6 요소
h1, h2, h3, h4, h5, h6 요소는 헤딩(heading)을 표시한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>페이지 제목</title>
</head>
<body>
<header>
<h1>사이트 로고</h1>
</header>
<main>
<h2>콘텐츠 제목</h2>
<p>내용</p>
<h3>댓글</h3>
</main>
<aside>
<h3>광고</h3>
</aside>
</body>
</html>
- 헤딩은 문서(page), 섹션(section), 문단(paragraph), 장(chapter) 등 구획화된 내용에 대한 제목을 의미하며, 일반적으로 내용이 시작하는 지점에 위치한다.
- 중요도에 따라 6단계로 구분하며, h1 요소부터 h6 요소로 순서로 중요도가 부여된다. 헤딩을 부여한다는 것은 중요도에 따라 콘텐츠 순위를 매긴다는 것을 의미한다.
- 브라우저는 중요도가 높은 헤딩을 중요도가 낮은 헤딩보다 더 크고 굵은 글자로 표현하고 스크린리더는 헤딩 레벨을 통해 제목의 중요도를 청각적 위계로 표현한다. 특히 스크린리더는 헤딩에서 헤딩으로 건너뛸 수 있는 기능이 있기 때문에 본문을 일일이 읽지 않아도 원하는 내용을 찾아다닐 수 있다.
- 가장 중요한 콘텐츠의 제목에 h1 요소를 부여한다.
- 중요도에 따라 h2~h6 요소를 부여하며, 헤딩의 중요도가 차례로 이어질 수 있도록 한다.
h1 요소의 대상은 논쟁의 여지가 있다. 어떤 이는 사이트 이름(로고), 또 어떤 이는 표제(콘텐츠 제목)에 h1 요소를 부여하고 있다. 전자의 경우는 문서 내에서의 이동이 좀 더 편리해지지만 본문을 h2~h6 요소만으로 소화해야 하는 어려움이 있다. 만약 본문 구성이 복잡하다면 그 어려움은 더 커지므로 이때에는 헤딩의 사용범위는 본문에 한정하는 바람직하다.
HGROUP 요소
hgroup 요소는 W3C 스펙에서 제거되었다.
