정의 및 사용 방법

<section> 태그는
문서, 애플리케이션의 일반적인 섹션을 나타냅니다.
이 섹션은 특정 주제에 따라 묶인 콘텐츠 그룹을 의미하며, 주제의 제목이 필수적이지 않지만 일반적으로 함께 사용됩니다.

이 태그는 <article>, <aside>, <nav> 등 섹션을 나타내는 더 적합한 의미의 요소가 없을 때, 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는 데 사용합니다.

사용할 수 있는 예

  • 웹 페이지에서 하나 하나의 주제를 다루는 섹션(예: 상품별 섹션, 소개 등)
  • 슬라이더와 각각의 슬라이드 컨테이너
  • 탭으로 구성된 대화 상자의 각 탭 페이지
  • 홈 페이지를 소개, 뉴스, 연락처 섹션으로 나눌 때

기본 예제

다음은 <section> 태그를 사용해 주제별 콘텐츠를 논리적으로 구분한 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>프로젝트 소개</title>
    </head>
    <body>
        <header>
            <h1>우리의 프로젝트</h1>
        </header> 
        <nav>
            <ul>
                <li><a href="#section1">프로젝트 목표</a></li>
                <li><a href="#section2">진행 상황</a></li>
                <li><a href="#section3">결과 및 향후 계획</a></li>
            </ul>
        </nav> 
        <section id="section1">
            <h2>프로젝트 목표</h2>
            <p>이 섹션은 프로젝트의 목표와 목표를 설명합니다.</p>
        </section>
        <section id="section2">
            <h2>진행 상황</h2>
            <p>이 섹션은 프로젝트의 현재 진행 상황에 대한 정보를 제공합니다.</p>
        </section>
        <section id="section3">
            <h2>결과 및 향후 계획</h2>
            <p>이 섹션은 프로젝트의 결과 및 향후 계획을 다룹니다.</p>
        </section>
        <footer>
            <p>© 2025 우리 프로젝트. 모든 권리 보유.</p>
        </footer>       
    </body>
</html>

이 예제에서는 <section> 태그를 사용해 각 주제를 독립적인 섹션으로 구분하고, 각 섹션 안에 관련 콘텐츠를 넣는 방식을 보여줍니다.

구문상 특징

  • <section> 태그는 <address> 태그의 자식 혹은 자손 요소가 될 수 없습니다. <address> 태그는 섹셔닝 콘텐츠(sectioning content)를 허용하지 않기 때문입니다.
  • <section> 태그를 자체적으로 의미가 없는 일반 컨테이너로 사용하지 마세요. 단순 스타일링이 목적이라면 <div> 태그를 사용해야 합니다.
  • 주제별 섹션을 정의할 때에는 제목 태그(<h1>~<h6>)를 <section> 태그 안에 함께 사용하세요. 이러면, 주제를 식별하는데 도움이 됩니다. 하지만, 반드시 필요한 것은 아닙니다.

<section>과 <article> 태그의 차이점

<section>과 <article> 태그의 사용 의미를 혼동하기 쉽습니다.
다음은 이 두 태그의 차이점을 요약해서 비교한 것입니다.

  • <section> 태그는 문서나 애플리케이션의 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는데 사용됩니다.
  • 반면, <article> 태그는 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다.
  • 독립적으로 배포하거나 재사용할 수 있는 콘텐츠의 아이템으로 구성할 때에는 <article> 태그가 더 좋은 선택일 수 있습니다.

부연설명
<article> 태그는 문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다. 예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있습니다.

사용 예제

<section> 태그가 어떻게 사용되는지 주요한 예제로 살펴보겠니다.

<article> 태그 내에서 <section> 태그 사용하기

<article> 태그 내에서 <section> 태그를 사용하는 것은 가능합니다. <article> 태그는 독립적인 콘텐츠 덩어리를 나타내는 데 사용되며, <section> 태그는 해당 콘텐츠를 더 논리적으로 나누는 데 활용될 수 있습니다.

다음은 <article> 태그 내에서 <section> 태그를 사용한 간단한 예제입니다.

HTML 
<article>
    <h1>최신 레시피 컬렉션</h1>
    <p>이번 주의 최고의 레시피를 소개합니다.</p>
    <section>
        <h2>아침 식사</h2>
        <p>아침에 먹기 좋은 요리 아이디어입니다.</p>
    </section>

    <section>
        <h2>점심 식사</h2>
        <p>점심 식사를 위한 레시피 추천입니다.</p>
    </section>
    <section>
        <h2>저녁 식사</h2>
        <p>저녁 식사 아이디어와 레시피를 확인하세요.</p>
    </section>
</article>

이런 방식으로 <article> 태그 내에 <section> 태그을 사용하면 기사나 콘텐츠를 논리적으로 구분하여 나타낼 수 있으며, 웹 페이지의 의미와 구조를 강화하는 데 도움이 됩니다.

사이드바의 위젯 섹션으로 사용하기

위젯은 사이드바에서 독립적인 블록으로 나타낼 수 있으며, 각각의 <section> 태그 내에서 특정 위젯에 관련된 콘텐츠를 정의할 수 있습니다. 이것은 웹 페이지의 구조를 더 논리적으로 만들어주고, 사용자에게 부가 정보를 제공하거나 주요 콘텐츠를 보완하는 데 도움이 됩니다.

예를 들어, 웹 페이지의 사이드바에 다음과 같은 위젯을 나타내는 경우 <aside> 태그 내에 <section> 태그을 사용합니다.

부연설명
<aside> 태그는 페이지 내 주요 콘텐츠와 직접적이지는 않지만 간접적으로 연관된 내용으로 구성된 별도의 부분을 나타냅니다.

HTML 
<aside>
    <section>
        <h2>날씨 위젯</h2>
        <p>현재 날씨 정보 및 예보를 표시합니다.</p>
    </section>
    <section>
        <h2>소셜 미디어 위젯</h2>
        <p>최신 트윗 및 소셜 미디어 업데이트를 표시합니다.</p>
    </section>
    <section>
        <h2>광고 위젯</h2>
        <p>광고 또는 추천 상품을 표시합니다.</p>
    </section>
</aside>

슬라이더의 각각의 슬라이드 컨테이너로 사용하기

슬라이더는 주제나 콘텐츠가 순차적으로 전환되는 경우에 사용되며, 각 슬라이드는 주제나 섹션의 논리적인 일부일 수 있습니다. <section> 태그를 사용하여 각 슬라이드를 나타낼 수 있습니다.

예를 들어, 웹 페이지의 슬라이더가 여행지에 관한 정보를 표시하는 경우, 각 슬라이드는 특정 여행지에 관한 정보를 포함할 수 있으며, <section> 태그로 묶어서 각 슬라이드를 정의할 수 있습니다.

HTML 
<div id="slider">
    <section>
        <h2>파리, 프랑스</h2>
        <p>파리에 대한 아름다운 여행 경험을 만나보세요.</p>
        <!-- 이 슬라이드의 내용 -->
    </section>
    <section>
        <h2>로마, 이탈리아</h2>
        <p>로마의 역사와 문화를 탐험하세요.</p>
        <!-- 이 슬라이드의 내용 -->
    </section>
    <section>
        <h2>도쿄, 일본</h2>
        <p>도쿄에서의 멋진 여행을 계획하세요.</p>
        <!-- 이 슬라이드의 내용 -->
    </section>
</div>

이렇게 하면 각 슬라이드가 주제별 콘텐츠 그룹으로 구성되며, 웹 페이지의 의미론적 구조를 향상시킬 수 있습니다.

관련 속성

<section>만을 위한 속성은 없습니다. 모든 글로벌 속성을 사용할 수 있습니다.

기술적인 문법 요약

section 태그의 기술적인 문법 요약
가능한 부모 요소 <address>의 자손 요소가 될 수 없습니다.
암시적인 role 속성 값 제목(<h1>~<h6>)이나 aria-labelledby, aria-label, title 등과 같은 접근 가능한 이름이 있으면 region, 그렇지 않으면 generic
허용된 role 속성 값 alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel

브라우저 호환성

section 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<section> 5 12 4 5

명세서

section 태그의 명세서 사양
명세서 사양
<section> HTML Standard
#the-section-element

참고문헌

같이 보기