Movatterモバイル変換


[0]ホーム

URL:


  1. 개발자를 위한 웹 기술
  2. HTML: Hypertext Markup Language
  3. HTML 참고서
  4. HTML 요소 참고서
  5. <section>

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

<section>: 일반 구획 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통<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;}

참고 :요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면<article> 요소가 더 좋은 선택일 수 있습니다.

콘텐츠 카테고리플로우 콘텐츠,구획 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠플로우 콘텐츠.
태그 생략불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소.
단,<section> 요소는<address>의 자손이 될 수 없습니다.
가능한 ARIA 역할alert,alertdialog,application,banner,complementary,contentinfo,dialog,document,feed,log,main,marquee,navigation,search,status,tabpanel
DOM 인터페이스HTMLElement

특성

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

사용 일람

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

예제

이전

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

이후

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

명세

Specification
HTML
# the-section-element

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp