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

HTML <h1>–<h6> 요소는 6단계의 문서 제목을 구현합니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

• 콘텐츠 범주 Flow 콘텐츠, heading 콘텐츠, palpable 콘텐츠.
• 허용된 콘텐츠 Phrasing 컨텐트.
• 태그 생략 None, both the starting and ending tag are mandatory.
• 허용된 부모 요소들 flow 콘텐츠를 허용하는 모든 요소; 제목 요소를 <hgroup>(현재 사장됨) 요소의 자식으로서 사용하지 마시기 바랍니다.
• DOM 인터페이스 HTMLHeadingElement

속성

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

사용 일람

• 제목의 정보는 자동으로 문서의 목차를 만드는 것처럼 사용자 에이전트에 사용될 수 있습니다.
• 제목 폰트의 크기를 줄이기 위해 낮은 단계를 사용하지 마세요. 대신에 CSS의 font-size 속성을 사용하세요.
• 제목 단계를 건너뛰는 것을 피하세요. 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하세요.
• 첫 번째 단계의 제목은 한 페이지에 하나만 사용하세요. HTML5에서의 섹션 정의 in HTML5 문서의 섹션과 아웃라인

예제

모든 제목들

밑의 코드는 모든 단계의 제목을 보여주고, 사용합니다.

<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>

이것이 윗 코드의 결과입니다.

접근성 고려사항

Navigation

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

Don't

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

Do

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

Nesting

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

When headings are nested, heading levels may be "skipped" when closing a subsection.

• Headings • Page Structure • WAI Web Accessibility Tutorials
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

Labeling section content

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.

• Using the aria-labelledby attribute
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

명세

브라우저 호환성

같이 보기

• <p>
• <div>
• <section>