<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 등 대부분을 정의하고 있기 때문에 특별한 경우가 아니라면 사용 자제하는 것이 가독성을 높이는데 유리하다.
