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