#HTML5의 새로운 요소(hgroup,article,section)

헤드라인을 여러 개로 묶을 필요성이 있을 때 사용하는 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> 에서 발췌

---