BODY 내 구조 개념 --> 콘텐츠 구분 H1~H6

6단계의 문서 제목을 구현한다. 구획 단계는 <H1>이 가장 높고 <H6>는 가장 낮다.

 

 

 

<사용방법 (추천하는 방식)>

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

<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은 딱 한번만 사용할 수 있지만, 다음과 같이 h2나 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