section과 article : 같은 듯, 다른 듯 애매한 둘

HTML에서 문서의 전반적인 영역을 잡을 때 시맨틱 태그를 사용하려고 하면 떠오르는 게

section 아니면 article 태그인데, 이 둘은 같아 보이면서도 차이가 있는 태그다.

 

애매하게 쓰면 오히려 애매한 페이지 구조가 되지만

명확하게 알고 쓰면 태그만 보더라도 깔끔하게 페이지 구조가 명확해지는

이 둘을 한번 정리해 보고 가자.

 

---

 

section과 article

우선 각 태그의 정의를 살펴보면

section : 논리적 측면에서 주제별 콘텐츠 그룹을 나타내는 태그
article : 독립적인 콘텐츠를 나타내는 태그

 

두 태그에 대한 정의만 보면 두 태그의 명확한 차이를 느끼지 못할 수 있다.

왜냐하면 어떠한 콘텐츠를 묶을 때 사용하는 태그라는 의미는 비슷하기 때문이다.

그래서 사용하기 조금 까다로울 수 있는데 각 태그에 대해서 조금 더 쉽게 풀어서 알아보자.

 

먼저 section 태그는 같은 주제로 연관된 그룹과 그룹을 구분하는 데 사용하는 태그라고 이해하면 될 것 같다.

위의 사진을 통해 설명해 보면 일반적인 레이아웃에서 위와 같은 구조를 많이 보게 되는데,

여기서 표시된 header나 aside, footer 모두 section으로 구분할 수도 있다.

 

그러나 header나 aside, footer 역시 시맨틱 태그로 그것이 가지고 있는 의미가 더 명확하기에

해당 태그들을 사용하는 것이 더 좋다.

 

다음 article 태그는 무엇보다 '독립적'이라는 키워드에 집중하면 좋다.

독립적이기에 재사용이 가능한 콘텐츠어야 한다는 점도 또 하나의 특징이다.

그래서 대표적으로 article을 사용하는 콘텐츠로는 블로그 글, 뉴스 기사 등이 있다.

 

728x90

 

section과 article 사용 예시

어찌 됐건 둘 다 어떤 문서의 영역을 잡을 때 사용하는 태그라면 어떻게 사용해야 할까?

일반적인 생각으로는 section은 어쨌든 콘텐츠의 영역을 구분할 때 쓰고,

article은 특정 콘텐츠를 나타낼 때 section 안에 article을 자식 요소로 넣지 않을까 생각한다.

 

<section>
  <h1>회사 소개</h1>
  <article>
    <h2>회사 역사</h2>
    <p>우리 회사는 20XX년에 설립되어, 현재까지 꾸준한 성장을 이루고 있습니다.</p>
  </article>
  <article>
    <h2>회사 비전</h2>
    <p>우리 회사는 고객의 만족도를 높이고, 사회적 책임을 다하는 것을 목표로 하고 있습니다.</p>
  </article>
</section>

위와 같이 어떤 회사의 소개 페이지를 만든다고 가정하자.

회사 소개라는 특정 주제를 나타내는 문서의 영역을 section으로 잡고

각각 회사의 역사와 회사의 비전이라는 콘텐츠를 article로 잡았다.

회사의 역사와 비전은 독립된 콘텐츠로도 사용할 수 있는 콘텐츠기 때문에 article로 잡은 모습을 볼 수 있다.

 

<article>
  <h1>블로그 글</h1>
  <section>
    <h2>본문</h2>
    <p>오늘은 HTML5의 section과 article 태그에 대해 알아보겠습니다.</p>
  </section>
  <section>
    <h2>댓글</h2>
    <p>댓글이 없습니다.</p>
  </section>
</article>

article 안에 section이 위치하는 경우도 물론 있다.

블로그 글이라는 독립된 콘텐츠는 article 태그로 잡아주고,

그 안에 실제 글 영역과 댓글 영역을 각각 section으로 잡아주는 것을 볼 수 있다

이렇게 독립된 콘텐츠 안에서도 주제별로 section을 사용할 수 있다.

 

---

 

사실 여전히 section과 article 사용에 대해서는 조금 생각해 봐야 할 부분도 있고

적용하기 조금 까다로운 부분도 있지만

명확한 의도를 갖고 사용한다면 가독성이나 SEO 측면에서도 좋은 효율을 보여줄 것이라고 생각이 되니

앞으로 사용할 때 한번 더 고민해 보고 작성해 보는 습관을 가져야겠다.

 

 

포스팅 작성에 참고한 감사한 글들

codingEveryBody : section

webactually : section 버리고 article 써야 하는 이유