<h1>제목 수준 1</h1>
<h2>제목 수준 2</h2>
<h3>제목 수준 3</h3>
<h4>제목 수준 4</h4>
<h5>제목 수준 5</h5>
<h6>제목 수준 6</h6>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제목 태그</title>
    </head>
    <body>
        <h1>제목 태그</h1>
        <p>h에 숫자 1부터 6까지를 붙인 h1, h2, h3, h4, h5, h6 태그들을 말합니다.</p>
        <p>해당 영역의 제목(heading)을 나타냅니다.</p>       
        <section>
            <h2>제목 태그의 사용</h2>
            <p>이 태그들은 웹 페이지(문서)의 개요와 계층적인 구조를 나타내는데 사용합니다.</p>
            <h3>제목 태그의 사용의 이점</h3>
            <ul>
                <li>
                    콘텐츠의 각 영역에 제목을 부여하여 문서의 구조를 명확하게 표현합니다.
                    이를 통해 사용자는 콘텐츠를 빠르게 스캔하고 관련된 영역을 식별할 수 있습니다.
                </li>
                <li>
                    검색 엔진은 페이지의 제목을 분석하여 콘텐츠의 주제를 이해하고 검색 결과에 반영하기 때문에,
                    검색 엔진 최적화(SEO)에 도움이 됩니다.
                </li>
                <li>
                    시각장애인이나 다른 장애를 가진 사용자들에게 웹 페이지의 구조를 전달하는 데 도움이 됩니다.
                </li>
            </ul>
            <h3>제목 태그의 사용 시 주의할 점</h3>
            <p>콘텐츠의 의미적인 구조를 명확히 부여해야 합니다.</p>
        </section>
        <section>
            <h2>제목 태그의 접근성</h2>
            <p>.....</p>
            .....
        </section>
        ....
    </body>
</html>
<h1>제목 수준 1</h1>
<h3>제목 수준 3</h3> <!-- 논리적으로나 구조적으로 h2가 기대된다. -->
<h4>제목 수준 4</h4>
...
<h3>제목 수준 3</h3>
<p>제목 수준 3에 대한 내용</p>
....
...
<div role="heading" aria-level="3">제목 수준 3</div>
<p>제목 수준 3에 대한 내용</p>
....
<nav aria-labelledby="min-menu-heding">
    <h2 id="min-menu-heding">메인 메뉴</h2>
    <!-- 메인 메뉴 아이템 -->
</nav>