[html5] article vs section 차이

[html5] article, section 차이

html5에 새로운 요소들을 알아보겠습니다

첫 타자로 article과 section 입니다.

<article> 요소

article 요소는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담습니다.

주로 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있습니다.

▶브라우저 지원

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

▶사용 예

<article>
<h1>쇼셜네트워크</h1>

<p>온라인의 가상공간을 통해...</p>
...
</article>

<section> 요소

section은 서로 관계 있는 문서를 분리하는 역할을 함.

주로, 문서를 다른 주제로 구분짓기 위해 사용됨

▶브라우저 지원

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

▶사용 예

article, section, div 차이

article 역시 section처럼 문서를 분리하는 역할을 하므로 section과 비슷한 점이 많습니다.

또한 section은 div와 자주 혼동되는데 어떻게 구분할 수 있을까요?

1. 내용이 독립적이고 스스로 설 수 있는 내용이라면 article을 사용
2. 내용이 서로 관계가 있다면 section
3. 의미적으로 관계가 없다면 div를 사용. (div는 오직 내용을 묶는 역할)

article 은 스스로 설 수 있는 내용이라는 점에서 section보다 좀 더 구체적인 의미를 지닙니다.

여러 개의 section을 article로 묶을 수 있고

마찬가지로 여러 개의 article을 section으로 묶을 수 있습니다.

사용 예 1.

사용 예 2.

참조 사이트