div, article, section 정리

공부를 하면서 HTML5에서는 영역을 나누는데 div 뿐만 아니라 article과 section 태그가 있다는 것을 알았다.

 

일단 흔히 알고 있는 div 설명은 생략하고, section, article 순으로 설명을 하겠습니다.

 

section은 말그대로 세션이다.

 

즉 주제별로 나눌 경우가 생긴다면 section을 이용하여 나누면 된다.

<section name="포유류">
    1.강아지
    2.고양이
</section>

<section name="파충류">
    1.악어
    2.뱀
</section>

위의 예제와 같이 주제별로 나눌 때 사용하면 된다.

 

즉 내용이 서로 관계가 있다면 section을 사용하라는 것이다.

 

이제 article이다

 

article은 내용이 각기 독립적이고 홀로 설 수 있는 내용을 말한다.  네이버, 다음, 네이트 페이지를 가보면 블로그에 대한 내용, 뉴스 기사, 그리고 여러 가지 포럼에 대한 이야기가 각자 독립적으로 나뉘어 있을 것이다.

 

바로 이 영역을 나누기위해 사용한 것이 article이다.

 

<section name="포유류">
    
    <article name="강아지">
    1. 강아지
         - 페키니즈
         - 퍼그
    </article>
    
    <article name="고양이">
    2. 고양이
         - 페르시안
         - 노르웨이숲
    </article>
</section>

<section name="파충류">
    
    <article name="악어">
    1. 악어
        - 크로커다일
        - 엘레게이터
    </article>
    
    <article name="뱀">
    2. 뱀
        - 한국산뱀
        - 미국산뱀
    </article>
</section>

section과 article을 서로 혼합하여 쓸 수가 있다.

 

이로써 정리는 끝이다.

 

마지막으로 한번더 짧게 정리하자면

 

div : 의미적으로 관계가 없다면 사용!

article : 내용이 독립적으로 스스로 설 수 있는 내용이라면 가능!

section : 서로 관계가 있다면 가능!