헤드라인을 여러 개로 묶을 필요성이 있을 때 사용하는 hgroup 요소
만일 페이지에 산발적으로 여러 개의 헤드라인을 묶어 줘야 할 필요가 있을 경우 HTML5에서는 다음과 같이 hgroup 요소를 이용할
수 있습니다.
<header>
<hgroup>
<h1>쏭군 블로그</h1>
<h2>열심히 살아가는 88만원 세대의 이야기</h2>
</hgroup>
</header>
<article>
<hgroup>
<h1>최근 올라온 글</h1>
<h2>최근에 올라온 글을 시간 순으로 표현합니다.</h2>
</hgroup>
<section>
<hgroup>
<h1>봉사활동</h1>
<h2>나도 그들도 짠했던 이야기</h2>
</hgroup>
</section>
<section>
<hgroup>
<h1>자전거 구입</h1>
<h2>싼 녀석을 구하기 위한 사투 스토리</h2>
</hgroup>
</section>
</article>
<aside>
<hgroup>
<h1>위젯 사이드바</h1>
<h2>개인적으로 좋아하는 위젯들 모임</h2>
</hgroup>
</aside>
<hgroup>태그의 사용 예
앞서 과거에 사용되던 방식을 사용하는 것도 괜찮습니다.
그러나 HTML5에 추가된 <hgroup> 요소 덕분에 이 예제 코드와 같은 방식으로도 헤드라인 태그를 사용할 수 있게 되었습니다.
H1이나 H2와 같은 높이 단계에 있는 헤드라인 요소들도 이제는 문서의 최상단의 전유물이 아니라,
각 섹션이나 아티클 등 어디에서나 꾸릴 수 있게 된 것입니다. 이렇게 하면 각 콘텐츠가 훨씬 독립적으로 보입니다.
문서의 의미만 잘 구현된다면 헤드라인을 어떻게 사용하여도 큰 문제는 없습니다. 다만, 앞서 설명한 방식대로 콘텐츠를 쪼개
각 콘텐츠에 높은 레벨의 헤드라인을 부여하여 의미를 담을 수 있다는 정도를 알아둔다면 나중에 요긴하게 활용할 때가 있을 겁니다.
독립된 개별 콘텐츠를 담는 article, section 요소
섹션 요소에는 서로 다른 의미를 가진 콘텐츠를 담을 수 있습니다. 예를 들면 블로그에서 각 포스트를 요약해 둔 메인페이지가
꾸며진 경우를 볼수있는데, 그 요약된 포스트들의 묶음을 <section>태그로담고 각개별 포스트는 <article>태그로 묶으면 됩니다.
빨간색 박스로 되어 있는 부분은 <section>태그로 감싸고, 파란색 부분은 <article>태그로 담아내면 될 것입니다.
<section>
<article>
<h1></h1>
</article>
<article>
<h1></h1>
</article>
<article>
<h1></h1>
</article>
<section>
<article> 요소에는 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알 수 있는 콘텐츠를 담으면 됩니다.
<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# CSS의 특수 선택자 (0) | 2012.09.19 |
---|---|
# HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
#CSS3 배경지식 쌓기 (0) | 2012.08.25 |
#HTML5 문서계층 구조 (0) | 2012.08.25 |