<section>: 일반 구획 요소

시도해 보기

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

• 각각의 <section>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.
• 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 <article> 요소를 고려하세요.
• <section> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.

예제

이전

<div>
  <h2>Heading</h2>
  <img>some image</img>
</div>

이후

<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>

명세

브라우저 호환성

같이 보기

• ARIA: Region role