--- title: '

–

: HTML 구획 제목 요소' slug: Web/HTML/Element/Heading_Elements tags: - Element - HTML - HTML sections - Reference - Web translation_of: Web/HTML/Element/Heading_Elements ---
{{HTMLRef}}

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

{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}
콘텐츠 카테고리 플로우 콘텐츠, 제목 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 {{no_tag_omission}}
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소. {{HTMLElement("hgroup")}} 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.
가능한 ARIA 역할 {{ARIARole("tab")}}, {{ARIARole("presentation")}}
DOM 인터페이스 {{domxref("HTMLHeadingElement")}}

특성

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

사용 일람

예제

모든 제목 단계

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

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

{{ EmbedLiveSample('모든_제목_단계', '280', '300', '') }}

예제 페이지

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

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

{{ EmbedLiveSample('예제_페이지', '280', '480', '') }}

접근성 고려사항

탐색

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

하지 말것

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

중첩

하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.

  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

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

구획 콘텐츠 레이블

스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.

콘텐츠 구획에는 aria-labelledby와 {{htmlattrxref("id")}} 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.

예제

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">주 탐색창</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">하단 탐색창</h2>
    <!-- navigation items -->
  </nav>
</footer>

위의 예제에서 스크린 리더는 두 개의 {{HTMLElement("nav")}} 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 <nav> 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.

명세

명세 상태 주석
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} {{Spec2('HTML4.01')}}

브라우저 호환성

{{Compat("html.elements.h1")}}

같이 보기