[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰

<article>과 <section>은 모두 <div>와 같은 block 속성을 갖고 있는 tag이다.

따라서 <article>과 <section> 을 모두 <div> tag로 대치해도 기능상의 문제는 전혀 없다. 이 외에도 semantic tag중 기본 구조를 구축하기 위한 <header>, <footer> 등도 모두 마찬가지이다.

다만 <header>, <footer> 등 그 뜻이 명확한 것과는 달리 <article>, <section>, <div>는 어디에 사용되어야 가장 적절 한지 명확히 구별하여 개발한 사례를 찾기가 힘들다.

시맨틱 태그를 사용하는 이유는 SEO뿐만이 아니라 개발자들의 가독성을 높이기 위한 측면도 무시할 수 없다.

이완 사용하는 것이라면 용도에 맞게 적절하게 사용하는 것이 좋을 것 같다.

각 tag의 기본적인 의미는 다음과 같다.

• <article> tag는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
• <section> tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
• <div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.
  

위와 같은 기본적인 의미를 생각 한다면 <section>안에 <article>이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 왜냐하면 서로 관련 있는 내용을 모아 놓아야 할 <section>안에 각각이 독립된 <article>이 들어가 서로 다른 내용의 독립 <article>이 배치되기 때문이다.

따라서 <article>안에 <section>이 들어가는 것이 자연스럽다.

<div>의 경우는 논리적 관계와는 무관하게 요소를 나누는데 사용됨으로 <article>과 <section> 어느 쪽의 내부에 정의하던 크게 어색하지 않다. 다만 시맨틱 태그에는 <div>태그로 사용하던 다양한 역할의 태그, 즉 aside, header, footer, nav 등 대부분을 정의하고 있기 때문에 특별한 경우가 아니라면 사용 자제하는 것이 가독성을 높이는데 유리하다. 

 

다음은 web page내용을 구성하는 기본 구조의 예시이다.

<article>
  <h1>Article1 Heading</h1>
  <section>
    <h2>Section1 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section2 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section3 Heading</h2>
    <p>Content...</p>
  </section>
</article>