HTML <section> 태그 – 올바른 이해와 사용 방법

`<section>` 태그의 정의 및 사용법

<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>
            <h2>프로젝트 목표</h2>
            <p>이 섹션은 프로젝트의 목표와 목표를 설명합니다.</p>
        </section>
        <section>
            <h2>진행 상황</h2>
            <p>이 섹션은 프로젝트의 현재 진행 상황에 대한 정보를 제공합니다.</p>
        </section>
        <section>
            <h2>결과 및 향후 계획</h2>
            <p>이 섹션은 프로젝트의 결과 및 향후 계획을 다룹니다.</p>
        </section>
        <footer>
            <p>© 2023 우리 프로젝트. 모든 권리 보유.</p>
        </footer>       
    </body>
</html>

이 예제에서는 <section> 태그를 사용하여 각각의 주제별 섹션을 정의하고, 그 안에 해당 주제에 대한 콘텐츠를 넣었습니다.

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

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

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

HTML <article> 태그 - 올바른 이해와 사용 방법

주의할 점

<section> 태그는 <address> 태그의 자식 혹은 자손 요소가 될 수 없습니다.
<section> 태그를 일반 컨테이너로 사용하지 마세요. 단순 스타일링이 목적이라면 <div> 태그를 사용해야 합니다.
주제별 섹션을 정의할 때에는 제목 태그(<h1>~<h6>)를 <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>

이렇게 하면 각 슬라이드가 독립적인 섹션으로 구성되며, 웹 페이지의 의미론적 구조를 향상시킬 수 있습니다.