[HTML] 시멘틱태그 중 article / section 차이점

 

 

1. section

주제 별로 영역을 그룹화 하기 위해 사용 되며 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다.

<section>
        <h1>상품 소개</h1>
        <ul>
            <li>상품 1</li>
            <li>상품 2</li>
            <li>상품 3</li>
        </ul>
    </section>
</code></pre>

2. article

section 태그와 같이 주제 별로 영역을 그룹화할때 사용하지만 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.

 

블로그 및 SNS 영역 / 뉴스 기사 / 신문 내용 등에 사용된다

<article>
        <h1>블로그 글</h1>
        <ul>
            <li>포스팅 1</li>
            <li>포스팅 2</li>
            <li>포스팅 3</li>
        </ul>
    </article>

3. 차이점

article은 내용이 독립적이다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다.

 

section은 주제별로 구분한 그룹이다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.