태그해부학 <h1> - <h6>

정의 및 사용 방법

- 문서의 제목을 표현한다.

- h1부터 순차적으로 써야한다.

- h1은 가장 중요한 제목이므로 한 번만 사용하는 것이 좋다. (스크린리더와 SEO에도 좋다.)

 

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

 

 

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

 

 

 

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

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

 

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements