내용이 있으면 제목이 필요하다. 섹션을 만들고 내용을 묶었다면, 적절한 제목을 부여하여 쉽고 빠른 이해를 도와야 한다. 웹 콘텐츠 저작에 필요한 제목은 크게 네 가지 종류로 구분할 수 있는데, 이 중에서 문서 제목은 문서의 메타데이터를 작성할 때, 레이블과 캡션은 컨트롤, 테이블, 이미지 등을 제공할 때 필요하다. 지금은 본문 영역(document’s body)의 구획화된 내용에 제목을 붙이는 작업을 해야 하므로 H1~H6 요소를 사용하여 헤딩을 표시한다.
- 문서 제목(page title): 문서에 붙이는 제목 TITLE 요소
- 헤딩(heading): 구획화된 내용에 붙이는 제목 H1 요소, H2 요소, H3 요소, H4 요소, H5 요소, H6 요소
- 레이블(label): 컨트롤 요소에 붙이는 제목 또는 이름표 LABEL 요소
- 캡션(caption): 이미지나 테이블에 붙이는 제목 또는 이름표 CAPTION 요소, FIGCAPTION 요소
예제의 경우, 영역을 나누고 내용을 묶는 작업은 되어 있지만 제목을 붙이지 않았기 때문에 영역과 내용에 대한 이해가 신속하게 이루어지지 않고 있다. 제목은 한 단어 또는 한 문장으로 이루어진 짧은 요약이다. 모든 내용에 요약을 제공할 필요도 없을 것이다. 따라서 문단, 리스트 등 구획화된 내용이라고 해서 무조건 제목을 붙일 필요는 없다. 오히려 제목이 너무 많으면 혼란을 불러일으킬 수 있으므로 제목의 개수를 적절하게 조절하는 것도 중요하다. 배너 광고처럼 제목을 붙이지 않아도 이해될 수 있는 경우에는 과감하게 제목을 제공하지 않는 것도 좋은 방법이다. 제목이 필요한 곳에 적절한 제목을 붙이고 제목을 표시하기 위한 H1~H6 요소[93]를 사용하여 헤딩을 표시한다
제목을 붙이고 헤딩을 표시했지만 어떤 제목이 더 중요한지 알기 어렵게 때문에 내용의 위계(hierarchy)를 신속하게 파악하기 어렵다. 부모 요소와 자식 요소의 관계처럼 주제목과 부제목의 관계를 적절하게 표현해야만 영역과 내용에 대한 이해가 좀 더 신속하게 이루어질 것이다. 제목은 주제목(headline, 이하 ‘제목’)과 부제목(subheadline)으로 구분되는데, 부제목은 여러 개 존재할 수 있지만 제목은 하나만 존재해야 한다. 책에 비유하면, 제목은 책 이름이고 부제목은 책을 구성하는 장(chapter)인 셈이다.
같은 제목이라도 중요도는 다를 수 있다. HTML에는 제목을 중요도에 따라 6개의 등급으로 구분할 수 있는 규격을 제공하고 있다. 이 규격을 사용하면 제목의 계층 구조를 손쉽게 만들 수 있다. 가장 중요한 제목을 H1 요소, 그 다음으로 중요한 제목을 H2 요소로 표시한다. 이런 방법으로 H1, H2, H3, H4, H5, H6 요소를 계층적으로 사용하게 되면 제목의 중요도를 효과적으로 표시할 수 있다. 그리고 제목이 적절하게 묶어야만 의미가 제대로 전달될 수 있는 곳에는 HGROUP 요소를 사용한다.
HTML5에 새로 추가된 SECTION, ARTICLE, ASIDE, HEADER, NAV, FOOTER 요소는 자체적인 구조를 가질 수 있기 때문에 각각의 영역에서 독립적인 제목 체계를 가질 수도 있다. 이렇게 되면 한 문서에 여러 개의 H1이 존재할 수 있다. 그런데 예제는 단순한 구성의 문서이다. 굳이 영역별로 제목 체계를 독립적으로 구조화할 필요가 없었다. 그래서 제목 체계는 영역 단위가 아니라 문서 단위에서 결정되었고, 다음과 같은 제목 체계가 만들어 졌다.
<제목 붙이기>를 위한 표준 기술
H1~H6 요소
카테고리 | Flow content, Heading content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 |      |
H1, H2, H3, H4, H5, H6 요소는 헤딩(Heading)을 표시한다. 헤딩은 문서(page), 섹션(section), 문단(paragraph), 장(chapter) 등 구획화된 내용에 대한 제목을 의미하며, 대개 내용이 시작하는 지점에 위치한다. 헤딩(heading)과 헤드라인(headline)을 같은 의미로 얘기하기도 하지만, 엄밀히 말하면 차이가 있다. 우선 헤드라인은 표제, 즉 가장 중요한 제목이다. 그래서 하나의 문서는 하나의 헤드라인만 둘 수 있다. 반면에 헤딩은 헤드라인뿐만 아니라 서브 헤드라인까지 포함하는 개념이므로 하나의 문서에 여러 개의 헤딩이 올 수 있다.
Heading = Headline + subheadline 1 + subheadline 2 + … + subheadline n
헤딩은 중요도에 따라 6 단계(level)로 구분된다. 중요도는 H1 요소부터 H6 요소로 순차적으로 부여되는데, 중요도가 가장 높은 제목은 H1 요소, 중요도가 가장 낮은 제목은 H6 요소를 부여한다. 그리고 중요도에 따라 글자 크기도 달라진다. 숫자가 브라우저를 위한 “의미적 표시”라면 크기와 굵기는 사용자를 위한 “시각적 표시”인 셈이다.
H1 요소 : 가장 높은 중요도, 가장 큰 글자 크기 또는 굵기
H6 요소 : 가장 낮은 중요도, 가장 작은 글자 크기 또는 굵기
헤딩을 부여한다는 것은 콘텐츠 순위(rank)를 중요도에 따라 매긴다는 것을 의미한다. 중요도는 큰 글자, 특별한 형태(예, 박스 처리), 진한 색상 등 시각적 기법을 통해 표현할 수 있다. 브라우저는 중요도가 높은 헤딩을 중요도가 낮은 헤딩보다 더 크고 굵은 글자로 표현하다. 그리고 스크린 리더 사용자는 헤딩 레벨을 통해 제목의 중요도를 청각적으로 처리할 수 있다. 특히, 스크린 리더는 헤딩에서 헤딩으로 건너뛸 수 있는 기능이 있기 때문에 본문을 일일이 읽지 않아도 원하는 내용을 찾아 다닐 수 있다. 스크린 리더 사용자에게 헤딩은 어쩌면 바다 위의 등대와 같은 존재일지도 모른다. 헤딩을 부여하지 않으면 제목과 본문을 구분할 수 없다. 제목과 본문이 구분되지 않는 상황을 상상해 보면, 헤딩을 통해 콘텐츠를 구조화하는 것이 얼마나 중요한지 깨달을 수 있다.
콘텐츠의 기획과 설계에 따라 차이가 있겠지만, 가장 중요한 콘텐츠를 첫 머리에 두는 것이 일반적이다. 이런 경우, 가장 중요한 콘텐츠의 제목에 H1 요소를 부여한다. 그런 다음, 중요도에 따라 H2, H3, H4, H5, H6 요소를 부여하는데, 이 때 헤딩의 중요도가 순차적으로 이어지는 것이 중요하다. 가령, H4 요소를 빼먹고 H1, H2, H3, H5 요소 순으로 부여하는 것은 잘못된 방법이다.
헤딩은 피라미드와 같은 계층 구조를 갖는다(아래 그림 참조). 그래서 같은 문서 또는 섹션 내에서 H1 요소는 하나만 존재하는 것이 바람직하다. 헤딩을 어떻게 부여해야 하는지에 대한 의견이 분분하다. W3C에서도 이에 대한 정확한 의견을 밝히지 않고 있다. 그도 그럴 것이 문서 구조, 즉 내용을 어떻게 구조화할 것인지에 대한 방법은 정형화할 수 없는 사안이므로 규칙을 정한다고 해서 해결될 수 있는 문제는 아니다. 여하튼 제공자마다 헤딩을 부여하는 방법은 다양하다. 특히, H1 요소의 대상은 논쟁의 여지가 있다. 어떤 사람은 사이트 이름(로고), 또 어떤 사람은 표제(콘텐츠 제목)에 H1 요소를 부여하고 있다. 전자의 경우처럼 사이트 이름에 H1 요소를 부여하면 문서 내에서의 이동을 좀 더 편리해 진다. 그러나 사이트 이름에 H1 요소를 부여해 버리면 본문을 H2~H6 요소만으로 소화해야 한다는 어려움이 있다. 특히, 복잡한 본문의 경우에는 그 어려움이 더 커진다. 따라서 헤딩의 사용 범위는 본문에 한정하는 것이 바람직하다.
헤딩을 부여한다는 것이 결코 쉬운 일이 아니다. 문서 내에는 하나의 제목과 여러 개의 부제목이 존재한다. 제목을 제외한 나머지 부제목은 콘텐츠 중요도를 주관적으로 판단하여 H2, H3, H4, H5, H6 요소로 마크업해야 한다. 무엇이 얼마나 중요한지는 콘텐츠 작성자가 가장 잘 알고 있다. 따라서 HTML 코더에게 미루지 말고 기획자가 콘텐츠 기획서[94]에 헤딩을 직접 표시하는 것이 바람직하다.
예제 |
제목을 4단계로 구분하였고, 중요도에 따라 H1, H2, H3, H4 순으로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><h3>UX Design, 1st Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p>중략
<section id=”sub\_index”><h2>목차</h2>중략
</section><section id=”sub\_picture”><h2>상세이미지</h2>중략
</section><article id=”sub\_comment”><h2>댓글</h2></article></section><aside id=”sidebar”>중략
<section id=”video”><h3>Podcast</h3>중략
</section><section id=”bookstore”><h3>인터넷서점</h3>중략
</section>중략
</aside><footer>푸터 영역
</footer></body></html>
HGROUP 요소
카테고리 | Flow content, Heading content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
HGROUP 요소는 헤딩 그룹(Heading GROUP)을 표시한다. 헤딩 그룹은 H1~H6 요소 중 한 개 이상의 요소가 모여서 만들어진 그룹을 의미한다. HTML에는 HGROUP 요소[95] 외에도 FIELDSET 요소, COLGROUP 요소, OPTGROUP 요소처럼 같은 성질의 요소를 묶기 위한 요소가 여럿 있다. 이렇게 “같은 성질의 것” 묶으면 ‘구조의 단순화’, ‘중복의 최소화’를 구현할 수 있다.
우선 서로 다른 레벨의 헤딩을 묶어서 마크업해야 할 때가 있다. 제목과 부제목이 연이어 구성된 경우, HGROUP 요소를 이용하여 제목과 부제목을 묶을 수 있다. 이렇게 묶는다고 해서 사용자가 체감할 수 있는 변화는 없지만, 제목 체계가 단순해 지고 제목과 부제목 사이의 관계를 효과적으로 표현할 수 있다는 이점이 있다. 가령, 사이트 이름(로고)을 H1 요소, 태그라인(tagline)[96]을 H2 요소로 마크업해야 하는 경우, 콘텐츠의 계층화를 이루기 위해서는 그 다음에 오는 부제목은 H2나 H3 요소로 마크업해야 한다. 그런데 부제목을 H2요소로 마크업하면 태그라인과 부제목이 같은 레벨로 표현되는 문제가 발생하고, 그렇지 않고 H3 요소로 마크업하면 제목 체계가 복잡해 진다는 문제가 발생한다. 이럴 때 HGROUP 요소를 사용하여 H1과 H2 요소를 하나의 헤딩 그룹으로 묶으면 원래 H3 요소로 마크업하려고 했던 부제목을 H2 요소로 마크업할 수 있게 된다. 또한 HGROUP 요소로 묶인 헤딩들은 다른 헤딩에 비해 더 긴밀한 연관성을 갖게 되는데, 이러한 사실을 객관적으로 표현하게 되면 브라우저가 헤딩 사이의 관계를 좀 더 쉽게 해석할 수 있을 것이다.
H1~H6 요소만으로 마크업한 경우 | HGROUP 요소로 마크업한 경우 |
<h1>Example.com</h1> <h2>사람과 사람을 연결합니다!</h2> <h3>서비스 소개<h3> | <hgroup> <h1>Example.com</h1> <h2>사람과 사람을 연결합니다!</h2> </hgroup> <h2>서비스 소개<h2> |
예제 |
책 제목과 부제의 관계를 HGROUP 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”main”><h1>책소개</h1><section id=”sub\_overview”><h2>개요</h2><hgroup><h3>UX Design, 1st Edition</h3><h4>사용자가 경험하는 모든 것을 디자인하라</h4></hgroup><p>위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다.
</p>중략
</body></html>주석
[93] 아직 제목의 중요도가 정해지지 않았기 때문에 “Hn”으로 표시한다.
[94] 일반적으로 부르고 있는 “스토리 보드”는 콘텐츠 기획서의 한 종류다.
[95] HTML5에 추가된 속성이다.
[96] 사이트를 설명하기 위한 짧은 문구