<h1>–<h6>: HTML 구획 제목 요소

This translation is in progress.

HTML <h1><h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

콘텐츠 카테고리 플로우 콘텐츠, 제목 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소. <hgroup> 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.
가능한 ARIA 역할 tab, presentation
DOM 인터페이스 HTMLHeadingElement

특성

<h1>-<h6> 요소는 전역 특성만 포함합니다.

사용 일람

  • 사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있습니다.
  • 글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 CSSfont-size 속성을 사용하세요.
  • 제목 단계를 건너뛰는 것을 피하세요. 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하세요.
  • 첫 번째 단계의 제목은 한 페이지에 하나만 사용하세요. HTML5에서의 섹션 정의 in HTML 구획과 개요 사용하기

예제

모든 제목

다음 코드는 모든 단계의 제목을 보입니다.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

예제 페이지

다음 코드는 약간의 제목과 내용을 보여줍니다.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>

접근성 고려사항

탐색

스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.

하지 말것

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

할것

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

중첩

Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

  1. h1 Beetles
    1. h2 Etymology
    2. h2 Distribution and Diversity
    3. h2 Evolution
      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic
    4. h2 External Morphology
      1. h3 Head
        1. h4 Mouthparts
      2. h3 Thorax
        1. h4 Prothorax
        2. h4 Pterothorax
      3. h3 Legs
      4. h3 Wings
      5. h3 Abdomen

중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 "건너뛸" 수 있습니다.

구획 콘텐츠 라벨링

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

Sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

Example

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

In this example, screen reading technology would announce that there are two <nav> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

명세

명세 상태 주석
HTML Living Standard
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Living Standard
HTML5
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
h1Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기