<section>: 일반 구획 요소
HTML <section>
요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>
은 제목을 포함하지만, 항상 그런 것은 아닙니다.
시도해보기
참고: 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article>
요소가 더 좋은 선택일 수 있습니다.
콘텐츠 카테고리 | 플로우 콘텐츠, 구획 콘텐츠, 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 플로우 콘텐츠. |
태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
가능한 부모 요소 |
플로우 콘텐츠를 허용하는 모든 요소. 단, <section> 요소는
<address> 의 자손이 될 수 없습니다.
|
가능한 ARIA 역할 |
alert (en-US), alertdialog (en-US),
application (en-US), banner (en-US),
complementary (en-US),
contentinfo (en-US), dialog (en-US),
document (en-US), feed (en-US),
log (en-US), main (en-US),
marquee (en-US), navigation (en-US),
search (en-US), status (en-US),
tabpanel (en-US)
|
DOM 인터페이스 | HTMLElement |
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
- 각각의
<section>
을 식별할 수단이 필요합니다. 주로 제목(<h1>
-<h6>
) 요소를<section>
의 자식으로 포함하는 방법을 사용합니다. - 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면
<article>
요소를 고려하세요. <section>
요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면<div>
(en-US) 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면<section>
이 좋은 선택입니다.
예제
이전
html
<div>
<h2>Heading</h2>
<img>some image</img>
</div>
이후
html
<section>
<h2>Heading</h2>
<img>some image</img>
</section>
명세
Specification |
---|
HTML Standard # the-section-element |
브라우저 호환성
BCD tables only load in the browser