HTML5의 구조적인 마크업 요소를 위한 div, section, article 에 대해 알아봅시다
div, section, article 요소 소개
<div> : 가장 많이 이용하는 통상적인 컨텐츠 그룹. 단지 컨텐츠의 흐름만 형성하는 요소
<section> : 통상적인 문서 또는 어플리케이션의 섹션(구획)을 형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading 요소들을 <header>로 감싸기도 한다), 때때로 <footer> 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위
<article> : 문서나 사이트에서 독립적인 부분입니다. 이 부분을 다른 곳에 옮기더라도 분리되어 지고, 또 의미가 통해야 합니다. 웹 블로그에서의 글, 포럼에서의 포스팅, 또는 코멘트를 예로 들 수 있습니다. <section> 요소처럼, heading 요소를 반드시 가져야 하며, 그리고 가끔은 <header> 요소와, <footer> 요소를 포함하기도 합니다.
어떤것을 사용할지 선택하기
<article>은 관련된 컨텐츠 중 페이지의 문맥에서 벗어나도 그 자체만으로 이해가 되는 글 한편을 의미하는 반면, <section>은 관련된 컨텐츠를 의미합니다
홈페이지에서 최근글을 나타내는 부분처럼 여러개의 <article>을 포함할 수도 있고, 역시 또 길고 긴 한 <article> 안에서 섹션을 나누는데 <section> 요소를 사용할 수도 있습니다
동봉된 컨텐츠가 그 독립된 자체만으로도 의미가 통한다면 <article>를 사용합니다
동봉된 컨텐츠가 주제와 관련된 것이면 <section>을 사용합니다
관련성이 없다면, <div>를 사용합니다
기본적으로 사용되는 구조는 아래와 같습니다
<article>
<h1>Heading</h1>
<section>
<h2>Heading</h2>
<p>Content</p>
</section>
<section>
<h2>Heading</h2>
<p>Content</p>
</section>
<section>
<h2>Heading</h2>
<p>Content</p>
</section>
</article>