HTML5 <section> vs <article> 차이와 활용법 – 구조를 잡는 웹표준 태그 가이드

 

 

안녕하세요 😊
HTML5에서는 문서 구조를 더 명확히 하기 위해 의미론적(Semantic) 태그들이 있습니다.
그중에서도 <section>과 <article>은 초보자들이 헷갈리기 쉬운 태그인데요,
이번 글에서 차이점과 올바른 활용 방법을 쉽게 정리해드리겠습니다.

---

📍 1. <section> 태그란?

• 문서의 주제별 구역을 나누는 태그
• 제목(<h1>~<h6>)과 함께 쓰이는 경우가 많음
• 같은 주제의 콘텐츠를 묶어 구조적으로 표현할 때 사용

예시

<section>
  <h2>회사 소개</h2>
  <p>우리 회사는 2020년에 설립되었습니다...</p>
</section>

 

📌 포인트

• 주제별 덩어리 구분
• 여러 <section>이 모여 문서를 구성

---

📍 2. <article> 태그란?

• 독립적으로 배포하거나 재사용 가능한 콘텐츠를 나타냄
• 기사, 블로그 글, 포럼 글, 댓글, 제품 카드 등에 사용

예시

<article>
  <h2>HTML5 태그 가이드</h2>
  <p>이 글에서는 HTML5 구조 태그에 대해 설명합니다...</p>
</article>

 

📌 포인트

• 이 콘텐츠 하나만 떼어내도 의미가 유지
• RSS 피드, 검색결과, 다른 페이지에서 재활용 가능

---

📍 3. section vs article 비교

구분	<section>	<article>
의미	주제별 구역	독립된 콘텐츠
사용 예	회사 소개, 서비스 안내, 카테고리	블로그 글, 뉴스 기사, 댓글
제목 필요성	보통 제목 포함	제목 포함 권장
재사용성	페이지 내부에서 사용	페이지 외부에서도 사용 가능

 

---

📍 4. 함께 쓰는 경우

<article> 안에 <section>이 들어갈 수도 있고,
<section> 안에 <article>이 들어갈 수도 있습니다.

예시

<section>
  <h2>최신 뉴스</h2>
  <article>
    <h3>AI 기술 동향</h3>
    <p>최근 AI 시장은...</p>
  </article>
  <article>
    <h3>웹개발 트렌드</h3>
    <p>올해는 SPA와 SSR의 결합이...</p>
  </article>
</section>

• <section>은 "뉴스"라는 주제를 묶는 컨테이너
• <article>은 각각의 개별 뉴스 기사

---

📍 5. SEO와 접근성 팁

• <h1>~<h6> 제목 태그와 반드시 함께 쓰기
• <section>은 주제 구분을, <article>은 독립 콘텐츠에 사용
• 스크린리더 사용 시 의미가 명확해져 접근성 향상
• 검색엔진이 콘텐츠 구조를 더 잘 이해함

---

✅ 마무리

<section>과 <article>은 비슷해 보여도
구조적 의미와 활용 목적이 다릅니다.
웹표준에 맞춰 올바르게 사용하면 SEO와 접근성 모두 향상됩니다.
앞으로 페이지 레이아웃을 짤 때, 이 두 태그를 적극 활용해보세요! 😊