HTML section 태그 – 문서 내 콘텐츠 섹션 정의하기

HTML의 <section> 태그는 HTML 문서 안에서 헤더(header), 푸터(footer), 챕터(chapter) 등 독립적인 콘텐츠 구역, 즉 '섹션'을 정의하는 데 사용되는 시맨틱 요소입니다.

<section> 태그를 활용하면 문서를 주제별로 논리적으로 구분할 수 있어 가독성과 접근성이 향상되며, 검색 엔진 최적화(SEO) 측면에서도 긍정적인 효과를 기대할 수 있습니다.

아래 예제를 통해 <section> 태그의 실제 사용 방법을 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
<h2>Graduation</h2>
<select>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h2>Postgraduation</h2>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>

출력 결과

HTML section 태그 – 문서 내 콘텐츠 섹션 정의하기

위 예제에서는 <select> 태그와 함께 서로 다른 섹션들을 구성했습니다. 먼저 첫 번째 섹션은 학사 학위(Graduation) 관련 선택 목록을 담고 있습니다.

<section>
<h2>Graduation</h2>
<select>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>

나머지 두 개의 섹션은 각각 석사 학위(Postgraduation) 선택 목록과 경력 사항을 설명하는 단락으로 구성되어 있습니다.

<section>
<h2>Postgraduation</h2>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>

이처럼 <section> 태그는 하나의 문서 안에서 성격이 다른 콘텐츠 블록을 명확하게 분리하고 구조화하는 데 매우 유용합니다. 각 섹션에는 일반적으로 자체적인 제목(h1~h6)을 포함시키는 것이 권장됩니다.