HTML의 <section> 요소는 문서 안에서 독립적인 콘텐츠 구역을 표현하기 위해 사용되는 컨테이너 요소입니다. 이 글에서는 <section> 태그의 기본 개념부터 실전에서 바로 활용할 수 있는 작성 예시까지 차근차근 살펴보겠습니다.
<section> 요소란 무엇인가?
<section>은 하나의 문서를 의미 있는 단위로 나눌 때 사용하는 시맨틱(semantic) 요소입니다. 각 섹션에는 보통 고유한 제목(<h2>, <h3> 등)이 함께 들어가며, 이를 통해 검색 엔진과 스크린 리더가 문서의 구조를 더 정확하게 파악할 수 있습니다.
웹페이지를 여러 섹션으로 나누기
가장 대표적인 활용 사례는 회사 소개 페이지처럼 여러 종류의 정보를 담고 있는 웹페이지입니다. 예를 들어 다음과 같은 섹션들이 있을 수 있습니다.
- 히어로(Hero) 섹션
- 서비스 소개 섹션
- 팀 소개 섹션
- 스폰서 섹션
- 문의하기 섹션
이렇게 주제가 서로 다른 콘텐츠는 각각 독립된 <section>으로 감싸주면 됩니다.
<section>
<h2>첫 번째 섹션</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>두 번째 섹션</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>세 번째 섹션</h2>
<p>...</p>
<img src="" alt="" />
</section><article> 요소 안에서 section 활용하기
<section>의 또 다른 활용 사례는 <article> 요소 내부입니다. 여러 주제를 다루는 긴 형식의 아티클을 작성할 때, <section>을 사용해 본문을 주제별로 나누면 가독성이 크게 향상됩니다.
<article>
<h1>메인 포스트 제목</h1>
<section>
<h2>주제 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>주제 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>주제 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
</article>section 안에 article 넣기
반대로 <article> 요소를 <section> 안에 배치하는 것도 가능합니다. 예를 들어 메인 페이지에 개별 포스트로 연결되는 링크를 담은 블로그 카드 목록을 보여준다고 가정해 보겠습니다.
<section>
<h2>최신 블로그 게시물 만나보기</h2>
<article>
<a href="/blog-post-1">
<h3>블로그 게시물 1</h3>
</a>
</article>
<article>
<a href="/blog-post-2">
<h3>블로그 게시물 2</h3>
</a>
</article>
<article>
<a href="/blog-post-3">
<h3>블로그 게시물 3</h3>
</a>
</article>
</section>함께 알아두면 좋은 HTML 컨테이너 요소들
<section>은 HTML에서 컨테이너 역할을 하는 여러 태그 중 하나일 뿐입니다. 실무에서 가장 많이 사용되는 컨테이너 요소는 다음과 같습니다.
<article>: 독립적으로 배포·재사용 가능한 콘텐츠 단위<main>: 문서에서 핵심이 되는 본문 콘텐츠 영역<header>: 문서나 섹션의 머리말 영역<footer>: 문서나 섹션의 꼬리말 영역<form>: 사용자 입력을 받는 폼 영역<div>: 위 어느 태그에도 해당하지 않을 때 사용하는 범용(generic) 컨테이너
정리하자면, 콘텐츠에 명확한 주제와 제목이 있다면 <section>을 사용하고, 순수하게 스타일링이나 레이아웃 목적이라면 <div>를 선택하는 것이 좋습니다. 상황에 맞는 시맨틱 태그를 사용하면 접근성과 SEO 모두에서 이점을 얻을 수 있습니다.