HTML <section>: 구획 요소

HTML <section>: 구획 요소

HTML <section> 요소는 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. <section>은 보통 헤딩을 포함합니다.

<h1>사과 고르기</h1>
<section>
  <h2>소개</h2>
  <p>이 문서에서는 사과를 잘 고르는 법에 대해 알아봅니다.</p>
</section>
<section>
  <h2>기준</h2>
  <p>사과를 고를 땐 다양한 것을 고려해야 합니다. 크기, 색상, 단단함, 달콤함, 새콤함... (이어서)</p>
</section>

불러오는 중...

탐색 메뉴는 <nav> 요소로 묶을 수 있고, 블로그 글이나 댓글은 <article> 요소로 묶을 수 있습니다. 그러나 검색 결과를 나타낼 때 사용할 <result>라는 이름의 요소는 없습니다. 이 때가 더 적합한 의미를 가진 요소가 없을 때입니다.

특성

전역 특성만 포함합니다.

사용 일람

  • 각각의 <section>을 구분할 수단이 필요합니다. 주로 헤딩(<h1> ~ <h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.
  • <section>을 범용 컨테이너로 사용하지 마세요. 오직 스타일링만을 위해 구획을 분할해야 할 필요가 있으면 <div> 요소를 사용해야 합니다.
  • 묶으려는 콘텐츠를 외부와 분리해서 독립적으로 사용했을 때도 말이 된다면 <section>보다 <article> 요소를 쓰는 편이 좋습니다.

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
section

같이 보기