본문으로 바로가기

본문 : 제목(Heading) 요소 - H1~H6, HGROUP

category 웹코딩/HTML 2015.04.27 17:09

문서의 제목을 구성하는 헤딩요소들에 대하여 알아봅니다. 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 스펙에서 제거되었다.



댓글을 달아 주세요

티스토리 툴바