div, article, section의 차이점과 사용할 때

article: 서로 관계있는 문서들을 독립적으로 구분 할 수 있는 것들의 영역을 설정

display: block

ex) 신문기사, 블로그 글 등등

<article>
	<h1>주식<h1>
    	<p>XXX회사 주가...</p>
        <p>주식부자 그 비결은</p>
        ...
        ..
        .
</article>

 

section: 서로 관련되 있는 것들의 영역을 설정. 제목을 포함해서 의미를 가지고 있음.

display: block

ex) 위키에서의 목차

<section>
	<h1>뱀</h1>
    	<p>종류</p>
        <p>사육방법</p>
    ...
    ..
    .
</section>

 

div: 서로 의미적으로 관계가 없다면 사용. 그저 한 영역에 묶는 역할.

display: block

ex) 베스트 검색어

<div>
	<h1>베스트검색어</h1>
    	<p>고양이</p>
        <p>오늘의 맛집</p>
     ...
     ..
     .
</div>