[20201210][이전블로그글]<div>, <section>, <article>

div: 단순히 영역을 묶어주는 역할(의미X)

 

article: 독립적으로 존재하는 내용 블록
article 부분만 독립적으로 봤을 때 이해 가능하며 이 부분만 떼서 다른 페이지에 끼워 넣을 수 있다.
ex. 블로그 포스팅

 

section: 다른 블록들과 관련이 있는 요소일 때 사용. 큰 묶음(단위)인데 다른 블록과 관련이 있을 때..
ex. 연속된 정보 그룹
section의 깊이에 따라 같은 h1태그여도 크기가 다르다.

 

See the Pen section_tag by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

하지만 결과가 이렇게 나온다고해서 section태그 깊이에 상관없이 h1태그만을 사용하는 것은 좋지 않다. 같은 크기의 텍스트여도 접근성 검사기능으로 확인했을 때 section으로 둘러싼 h1태그의 aria-level과 h2태그의 aria-level이 다르게 나타나기 때문이다.

[정리]

div는 의미를 나타내는 시맨틱 요소가 아니기 때문에 사용하는 것을 지양하고 역할에 따라 header, footer, main, article, section, nav, figure, figcaption 등으로 대체하는 것이 좋다.
div를 사용할 때는 class에 역할(header)을 지정해준다.
(div를 사용하면 해당 블록이 페이지에서 어떤 역할을 하는지 바로 알 수 없으므로 비교적 이해하기 어렵다.)

각 시맨틱 요소에 대한 설명은 다음 글을 읽으면 좋다.
http://www.tcpschool.com/html/html5_intro_addition

html 전체 태그에 대해서는 다음 사이트를 참조하면 좋다.
http://www.tcpschool.com/html-tags/intro

article과 section에 대해서..
https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/