HTML5에서는 웹페이지 구조를 더 명확하게 표현하기 위해 다양한 시맨틱 태그가 추가되었습니다.
그중에서도 자주 혼동되는 태그가 바로 section과 article입니다.
두 태그 모두 콘텐츠를 구분하는 역할을 하기 때문에 비슷하게 보이지만, 실제로는 의미와 사용 목적에 차이가 있습니다.
이 차이를 제대로 이해하지 못하면 HTML 구조가 모호해지고, SEO와 접근성에도 영향을 줄 수 있습니다.
이번 글에서는 section 태그와 article 태그의 차이, 각각의 역할, 그리고 실무에서 어떻게 구분해서 사용해야 하는지를 쉽게 정리해보겠습니다.
section 태그란 무엇인가?
section 태그는 문서 내에서 관련된 콘텐츠를 묶는 구역(섹션)을 의미합니다.
하나의 주제나 목적을 가진 콘텐츠 그룹을 정의할 때 사용합니다.
예를 들어 웹페이지에서 다음과 같은 영역을 생각해볼 수 있습니다.
- 소개 영역
- 서비스 안내 영역
- 고객 후기 영역
이처럼 서로 다른 주제를 가진 콘텐츠를 구분할 때 section 태그를 사용합니다.
<section>
<h2>서비스 소개</h2>
<p>서비스 설명 내용</p>
</section>
section 태그는 보통 제목(h2, h3 등)과 함께 사용하여 해당 영역의 의미를 명확하게 표현합니다.
article 태그란 무엇인가?
article 태그는 독립적으로 존재할 수 있는 콘텐츠를 의미합니다. 즉, 하나의 완성된 글이나 콘텐츠 단위를 나타낼 때 사용합니다.
예를 들어 다음과 같은 콘텐츠가 article에 해당합니다.
- 블로그 글
- 뉴스 기사
- 게시글
- 댓글
article은 다른 페이지나 위치에서도 독립적으로 사용될 수 있는 콘텐츠입니다.
<article>
<h2>HTML 기초 배우기</h2>
<p>HTML은 웹페이지의 구조를 만드는 언어입니다.</p>
</article>
이처럼 article은 하나의 독립된 콘텐츠 단위로 사용됩니다.
section과 article의 핵심 차이
section과 article의 가장 큰 차이는 독립성입니다.
section은 주제별 구역
section은 문서 내에서 콘텐츠를 주제별로 나누는 역할을 합니다. 즉, 하나의 페이지 안에서 구조를 구분하는 용도로 사용됩니다.
article은 독립적인 콘텐츠
article은 다른 곳으로 옮겨도 의미가 유지되는 독립적인 콘텐츠입니다. 하나의 완성된 글이나 콘텐츠 단위라고 생각하면 됩니다.
section과 article을 함께 사용하는 방법
실무에서는 section과 article을 함께 사용하는 경우도 많습니다.
<section>
<h2>블로그 글 목록</h2>
<article>
<h3>첫 번째 글</h3>
<p>내용</p>
</article>
<article>
<h3>두 번째 글</h3>
<p>내용</p>
</article>
</section>
이 구조에서는 section이 전체 영역을 정의하고, article이 각각의 독립된 콘텐츠를 구성합니다.
잘못 사용하기 쉬운 예
다음과 같은 경우는 잘못된 사용 예입니다.
<section>
단순한 텍스트
</section>
section 태그는 반드시 의미 있는 그룹과 제목을 포함하는 것이 좋습니다.
또한 다음과 같은 경우도 주의해야 합니다.
<article>
단순한 레이아웃 영역
</article>
article은 독립적인 콘텐츠가 아닐 경우 사용하지 않는 것이 좋습니다.
SEO 관점에서의 section과 article
시맨틱 태그는 검색엔진이 웹페이지 구조를 이해하는 데 도움을 줍니다.
section과 article을 올바르게 사용하면 다음과 같은 장점이 있습니다.
- 콘텐츠 구조 명확화
- 검색엔진 이해도 향상
- 접근성 개선
특히 article은 하나의 콘텐츠 단위로 인식될 수 있기 때문에 블로그나 뉴스 페이지에서 매우 중요합니다.
section과 article 사용 기준 정리
두 태그를 구분하는 가장 쉬운 기준은 다음과 같습니다.
section을 사용해야 하는 경우
- 콘텐츠를 주제별로 나눌 때
- 페이지 구조를 구분할 때
article을 사용해야 하는 경우
- 독립적인 콘텐츠일 때
- 다른 페이지에서도 사용 가능한 콘텐츠일 때
마무리
section과 article 태그는 HTML5에서 매우 중요한 시맨틱 요소입니다. 두 태그는 비슷해 보이지만 역할이 명확하게 구분됩니다.
정리하면 다음과 같습니다.
- section은 콘텐츠를 구분하는 영역
- article은 독립적인 콘텐츠 단위
- 두 태그를 상황에 맞게 사용하는 것이 중요
웹페이지를 작성할 때 이러한 차이를 이해하고 적용하면 HTML 구조가 더 명확해지고 SEO와 접근성 측면에서도 좋은 결과를 얻을 수 있습니다.