[HTML5] section과 article 의 차이와 구별법

section과 article 의 차이와 구별법

검색엔진이 좋아하는 웹페이지는 HTML 요소의 성격에 맞게 컨텐츠가 담겨있는 페이지다. 작성자가 제목을 적어놓고 CSS로 글씨크기를 크게하고 굵게 처리해봤자 <h1></h1> 태그 사이에 컨텐츠를 위치해 놓지 않는다면, 검색엔진은 그 문장이 제목인지 본문인지 알지 못한다.

웹페이지의 레이아웃 또한 마찬가지다. HTML5로 발전하면서 웹페이지의 구성요소를 나타내는 태그를 사용할 수 있게 되었다. 즉 기존에 웹페이지의 헤더 부분을 <div> 태그를 사용하여 아래와 같이 나타내였다면,

이제는 <header> 태그를 사용하여 확실하게 나타낼 수 있다. 이러한 레이아웃을 구성하는 태그들은 여러가지가 있는데 대표적인 것들을 나열하자면 다음과 같다.

  • header
  • main
  • article
  • section
  • aside
  • nav
  • footer

이름만 봐도 대충 어디에 위치할 것인지 감이 오지 않는가? 각각 태그에 대한 자세한 설명은 공식 레퍼런스를 참고하고, 이 글에서 다룰 문제는 article과 section의 차이다.

HTML5를 충실히 반영한 워드프레스 테마를 개발하면서 블로그의 본문을 article과 section 두 태그 중 어디에 넣는 것이 좋을지 구분하기가 쉽지 않았다. 정확한 사용법을 알기 위해 여러 블로그를 돌아다니면서 사용사례들을 살펴보았다.

<div> 태그를 사용하는 경우가 가장 많았고 어떤 블로그는 article 사이에 본문을 위치하고 또 어떤 블로그는 section에 위치했다. 많은 개발자들이 혼용하여 쓰고 있다는 의미다.

특히 현재 대장넷의 홈페이지의 경우 제목과 본문의 일부를 한 페이지 10개씩 보여주는데, 전체를 감싸는 부분을 Section으로 할 것인지 제목과 본문의 묶음을 Section으로 할 것인지 가늠하기가 어렵다.

이에 대해서 열심히 찾아보던 중 명쾌한 해답을 제공한 블로그가 있었으니…

article – 포스트 본문 섹션으로써 처음에는 section 요소와 어떤 의미적 차이를 지니는지 구분하기 어려웠습니다. 그러나 article 요소는 이 영역을 독립적으로 다른곳에 옮겨놔도 하나의 완전한 문서 또는 섹션이 될 수 있는 ‘재 사용’ 가능한 또는 ‘배포 가능한’ 본문 영역이라고 설명할 수 있겠습니다. section 요소와 마찬가지로 hx 요소를 갖는것을 강력하게 권장합니다. section과 article 요소 가운데 무엇을 써야 할지 망설여질 때에는 주변의 맥락과 분리하여 독립해도 하나의 완전한 콘텐츠가 되는지 아닌지를 판단해 보세요. 독립적이라면 article에 가깝고 현재 문서의 개요와 구조를 결정하는 역할이라면 section에 가깝습니다.

via NARADESIGN

즉 위에 첨부한 이미지에서 빨간색 부분은 문서의 개요와 구조를 결정하는 역할은 확실히 아니고 비록 짧긴하지만 분리하여 독립해도 하나의 콘텐츠로 볼 수 있기 때문에 Article이고 이러한 Article을 담는 파란색 부분이 Section이라고 볼 수 있겠다.

작성자인 정찬명님도 무엇에 더 가깝다고 표현했지. 무엇이다! 라고 확정하지는 않았는데, 글과 그 구조라는게 너무 다양하고 애매해서 확정짓긴 힘든 것 같다. 그나마 가까운 것에 맞게 사용하는 것이 최선인 듯하다.

Section과 Article 이외에도 다른 요소들에 대한 설명도 친절하게 해놓았으니 HTML5와 검섹엔진이 좋아하는 웹페이지 만들기에 관심이 있다면 꼭 방문해서 보면 도움이 될 것이다. HTML5 & Responsive Web Design(반응형 웹 디자인)

About dezang

애플제품과 구글서비스를 좋아합니다. 블로그에서는 반말사용하며 시크한 척하지만 실제로는 예의바르고 상냥합니다^^. 언젠가는 세상을 바꾸는 개발자가 되고자 합니다. 언젠가는...

댓글 남기기