[HTML] section VS article 시맨틱태그 차이

 

🔖 section VS article 시맨틱 태그 비교

 

section과 article은 쓸때마다 헷갈려서 제대로 짚고 넘어가자고 다짐했다.

 

---

 

article

내용이 독립적이고 따로 떼어져도 흐름이 깨지지 않는 내용일때 사용
블로그 글을 개별로 각각 나눌때 article을 사용하기도 한다.

<article></article>

 

---

 

section

각 section의 내용이 연관성(논리적으로 관계있는 문서) 있을때 사용

<section></section>

 

---

 

article 안에 section을 넣기도 하고 section안에 article을 넣기도 한다.
그러나 설명을 보다시피 저 맥락대로라면 article 안에 section이 있는 것이 자연스럽다.
어떻게 구성하든 본인 자유이지만 나는 맥락상 article > section이 맞다고 생각한다.

 

article > section

<article>
	<h1>민초</h1>
	<section>민초단</section>
	<section>반민초단</section>
</article>

 

section > article

<section>
	<h1>경제</h1>
	<article>경제뉴스1</article>
	<article>경제뉴스2</article>
</section>