[html 태그] section, article 태그 (사용, 비교)

html5에 새롭게 시맨틱한 마크업을 위해 추가 된 태그 중

특정 영역을 감싸는 용도로 사용하는 section, article 태그가 추가 되었다.

 

1. section 태그

section 태그는 주제별 영역들을 그룹화 하기위해 사용한다.

주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다.

<section>
   <h1>상품소개</h1>
   <ul>
      <li>상품1</li>
      <li>상품2</li>
      <li>상품3</li>
   </ul>
   <p>상품의 실제이미지와 다를 수 있습니다.</p>
</section>

 

2. article 태그 (section 태그와 비교)

aricle 태그는 section과 마찬가지로 특정한 영역을 그룹화할 때 사용한다.

 

하지만 section 태그와는 다르게 article 태그는

해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.

 

예를 들면

- 블로그 및 SNS 영역

- 뉴스 기사

- 신문 논평

등에서 사용한다.

<article>
   <h3>브랜드 페이스북</h3>
   <ul>
      <li>포스팅1</li>
      <li>포스팅2</li>
      <li>포스팅3</li>
   </ul>
</article>

 

즉, section은 영역을 감싸거나 구분할 때,

article은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 수 있는 것