[HTML] 시맨틱 태그 : section, article, div 차이

HTML 문서에서 <section>, <article>, <div> 태그는 콘텐츠를 구조화하고 그룹화하는 역할을 합니다.
이 태그들을 적절히 사용하면 검색 엔진 최적화(SEO)와 웹 접근성에도 유리합니다.

---

1️⃣ <section> 태그

✔ 의미 있는 주제(섹션)별 그룹화
✔ 제목(<h2>~<h6>)과 함께 사용
✔ 하나의 완전한 개별 콘텐츠는 아님

 

📌 사용 예시:

<section>
    <h2>웹 퍼블리싱이란?</h2>
    <p>웹 퍼블리싱은 HTML, CSS, JavaScript를 사용하여 웹사이트를 만드는 작업입니다.</p>
</section>

 

📌 여러 개의 섹션으로 구성된 페이지 예시:

<section id="about">
    <h2>회사 소개</h2>
    <p>저희 회사는 웹 개발을 전문으로 합니다.</p>
</section>

<section id="services">
    <h2>제공 서비스</h2>
    <ul>
        <li>웹 디자인</li>
        <li>웹 퍼블리싱</li>
        <li>프론트엔드 개발</li>
    </ul>
</section>

 

📌 언제 사용하면 좋을까?
✔ 하나의 페이지에서 여러 개의 큰 주제를 나눌 때
✔ 각 섹션에 제목(<h2>, <h3>)을 포함하여 논리적으로 구성할 때
✔ 한 웹페이지에서 여러 개의 독립적인 섹션이 있을 때

---

2️⃣ <article> 태그

✔ 독립적으로 존재할 수 있는 콘텐츠
✔ 뉴스 기사, 블로그 글, 제품 정보 등 개별 콘텐츠를 감쌀 때 사용
✔ 다른 페이지에서도 독립적으로 활용 가능

 

📌 사용 예시:

<article>
    <h2>웹 퍼블리싱이란?</h2>
    <p>웹 퍼블리싱은 웹사이트의 구조와 스타일을 만드는 작업입니다.</p>
</article>

 

📌 블로그 게시물 목록 예시:

<section id="blog">
    <h2>최신 블로그 글</h2>

    <article>
        <h3>HTML 기본 개념</h3>
        <p>HTML은 웹 문서의 구조를 만드는 언어입니다.</p>
        <a href="#">자세히 보기</a>
    </article>

    <article>
        <h3>CSS 스타일링 기초</h3>
        <p>CSS는 웹사이트의 디자인과 레이아웃을 조정하는 역할을 합니다.</p>
        <a href="#">자세히 보기</a>
    </article>
</section>

 

📌 언제 사용하면 좋을까?
✔ 블로그 글, 뉴스 기사, 제품 소개 등 개별적으로 의미 있는 콘텐츠
✔ 하나의 article이 다른 사이트에서도 독립적으로 활용될 수 있는 경우
✔ RSS 피드처럼 외부에서도 가져가 사용할 콘텐츠일 경우

---

3️⃣ <div> 태그

✔ 특별한 의미 없이 단순한 그룹화
✔ 레이아웃을 만들거나 스타일을 적용할 때 주로 사용
✔ 시맨틱 태그(<section>, <article>, <aside>, <nav> 등)를 사용할 수 없을 때 사용

 

📌 사용 예시:

<div class="container">
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
</div>

 

📌 CSS와 함께 활용하기:

<div class="card">
    <h2>웹 퍼블리싱 배우기</h2>
    <p>HTML, CSS, JavaScript 기초를 학습해보세요.</p>
</div>

<style>
    .card {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }
</style>

 

📌 언제 사용하면 좋을까?
✔ 레이아웃을 구성할 때
✔ 시맨틱 태그를 적용할 필요가 없을 때
✔ CSS와 JavaScript를 활용하여 특정 요소를 묶어 스타일링할 때

---

4️⃣ <section> vs <article> vs <div> 비교 정리

<section>	같은 주제의 콘텐츠 그룹	한 페이지에서 여러 개의 섹션으로 나눌 때
<article>	독립적인 콘텐츠 블록	블로그 글, 뉴스 기사, 제품 정보 등 개별 콘텐츠
<div>	의미 없는 그룹화	CSS, JavaScript를 활용하여 스타일링하거나 레이아웃을 만들 때

---

5️⃣ 올바른 사용 예시

❌ 잘못된 예시 (모든 것을 <div>로 감쌈)

<div class="container">
    <div class="title">웹 퍼블리싱이란?</div>
    <div class="content">웹 퍼블리싱은 HTML, CSS를 사용하여 웹사이트를 만드는 과정입니다.</div>
</div>

 

올바른 예시 (시맨틱 태그 활용)

<section>
    <h2>웹 퍼블리싱이란?</h2>
    <p>웹 퍼블리싱은 HTML, CSS를 사용하여 웹사이트를 만드는 과정입니다.</p>
</section>

---

Tip

👉 <section>은 주제별 그룹화
👉 <article>은 독립적인 콘텐츠
👉 <div>는 의미 없이 레이아웃을 만들 때