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>
요소를 쓰는 편이 좋습니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
section |