<h1>~<h6>(제목) 태그의 정의 및 사용법

h에 숫자 1부터 6까지를 붙인 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그는
해당 영역의 제목(heading)을 나타냅니다.

  • 이 태그들은 1부터 6까지의 숫자로 지정된 제목 수준을 가지며,
  • 이는 중첩된 영역의 계층적인 수준을 나타냅니다.
  • <h1> 태그는 최상위 영역에 사용되는 제목이며,
  • <h2>는 그 아래 수준, <h3>는 <h2>보다 한 단계 아래 수준의 제목 태그입니다.
  • 이러한 식으로 <h6> 태그까지 계속됩니다.
HTML 모든 수준의 제목 태그 마크업 예시 
<h1>제목 수준 1</h1>
<h2>제목 수준 2</h2>
<h3>제목 수준 3</h3>
<h4>제목 수준 4</h4>
<h5>제목 수준 5</h5>
<h6>제목 수준 6</h6>

이 제목 태그들은 웹 페이지(문서)의 개요와 계층적인 구조를 나타내는데 사용합니다.

HTML 웹 페이지(문서)의 개요와 계층적인 구조를 나타내는데 사용한 예 
<!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>

사용법 참고 사항

  • 텍스트의 크기나 굵기 때문에 제목 태그를 사용하지 마세요. 대신 CSS의 텍스트 크기 관련 속성인 font-size나 텍스트 굵기 관련 속성인 font-weight 속성을 사용하세요.
  • 계층적인 구조 순서의 단계를 건너뛰기는 하는 것은 피하세요. 제목의 레벨은 항상 계층적인 구조 순서를 나타내야 합니다. 언제나 <h1> 태그 다음에 <h2> , 그 다음에 <h3>, 이런식으로 순차적으로 마크업하세요. 그래야 논리적인 콘텐츠 구조나 개요를 쉽게 파악할 수 있습니다.
  • <h1> 태그는 최상위 영역에 사용되는 제목입니다. 웹 페이지의 주요 제목이나 주제에 사용하는 것으로써, 웹 페이지에는 하나의 <h1> 태그만 사용하는 것이 좋습니다. 이는 웹 접근성을 위한 스크린 리더나 검색엔진 최적화에도 도움이 됩니다.
  • 모든 웹 페이지에 <h1>~<h6>까지의 제목 태그들을 다 사용해야 하는 것은 아닙니다. 웹 페이지의 계층 구조가 깊지 않다면 <h1> 태그만 사용할 수도 있고, <h1>~<h2>, <h1>~<h3> , <h1>~<h4> 혹은 <h1>~<h5> 태그까지만 사용할 수도 있습니다.
HTML 계층적인 구조 순서의 단계를 건너뛰기는 하는 것은 피하세요. 
<h1>제목 수준 1</h1>
<h3>제목 수준 3</h3> <!-- 논리적으로나 구조적으로 h2가 기대된다. -->
<h4>제목 수준 4</h4>

구문상 주의할 점

  • <address> 태그 내에서 사용할 수 없습니다.
  • <hgroup> 태그 내에서 사용하지 마세요. <hgroup> 태그는 더 이상 사용하지 않는 태그입니다. W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다. 하지만, <hgroup> 태그는 이론적으로만 유효한 태그로 남아 있고 어떠한 브라우저도 관련된 개요 알고리즘을 구현하지 않습니다.

role 속성으로 제목 태그 역할 부여하기

role="heading"을 사용하면 해당 태그를 제목 태그인 것처럼 식별합니다. 이 방법은 제목 태그를 사용할 수 없는 상황에서 사용되며, 웹 접근성을 위한 스크린 리더 및 보조 기술에 정보를 제공합니다.

HTML role 속성

다음의 예시를 통해 살펴보겠습니다.

HTML 
...
<h3>제목 수준 3</h3>
<p>제목 수준 3에 대한 내용</p>
....

위 코드는 제목 태그인 <h3> 태그를 사용한 예제입니다.

다음의 코드는 role="heading"을 사용해서 해당 태그를 제목 태그로 의미를 부여하고, aria-level="3"을 사용해서 제목 태그 수준이 3, 즉 <h3>로 명시한 예제입니다.

HTML 
...
<div role="heading" aria-level="3">제목 수준 3</div>
<p>제목 수준 3에 대한 내용</p>
....

aria-level 속성은 role="heading"이 적용된 태그에 사용되는 것으로써, 값이 1~6까지 있으며, 해당 값은 제목 태그의 수준과 동일합니다. 예를 들어 aria-level="2"는 <h2>와 동일한 수준입니다.

특별한 경우를 제외하고 role="heading"을 사용하기 보다는 제목 태그를 사용하세요!

웹 접근성 향상을 위한 제목 태그의 활용

스크린 리더를 사용하는 사용자에게는 콘텐를 쉽게 파악하고 탐색하는 것이 매우 중요합니다. 스크린 리더를 사용하지 않는 사용자 측면만을 고려해서 제작한 웹사이트나 웹 콘텐츠는 스크린 리더를 사용하는 사용자에게 불편과 혼란을 가중시킬 수 있습니다. 웹의 보편성은 웹의 발전에 있어서 매우 중요한 가치이기도 합니다.

스크린 리더를 사용하는 사용자에게 콘텐츠 영역의 레이아웃에 관련된 레이블을 제공하면 스크린 리더를 사용하는 사용자는 쉽게 해당 콘텐츠를 파악하는데 도움이 됩니다.

스크린 리더를 위한 레이블을 제공하는 레이블 텍스트 속성이 있습니다. aria-label 또는 aria-labelledby 속성을 사용하면 웹 접근성 향상에 더 나은 방법입니다. 다음의 링크를 참조하세요.

이 두 속성 중에서 aria-labelledby 속성과 id 속성을 함께 사용해서 제목 태그와 연결하여 콘텐츠 영역의 레이아웃에 관련된 레이블을 제공할 수 있습니다. 당연하겠지만, 이 기법은 웹 페이지 내에 많은 수의 콘텐츠 영역이 있을 때 유용합니다.

HTML 
<nav aria-labelledby="min-menu-heding">
    <h2 id="min-menu-heding">메인 메뉴</h2>
    <!-- 메인 메뉴 아이템 -->
</nav>
<nav> 태그

위 코드에서 aria-labelledby="min-menu-heding"은 현재 콘텐츠 영역인 <nav> 태그의 레이블을 설정하는 부분입니다. 구체적으로는 min-menu-heding이라는 id를 가진 제목 태그가 <h2>로 정의되어 있습니다. 이렇게 하면 스크린 리더가 <nav> 태그를 만날 때 "메인 메뉴"라는 레이블을 제공할 수 있습니다.

이렇게 하여 스크린 리더를 사용하는 사용자들이 해당 콘텐츠를 더 빠르고 쉽게 이해하고 탐색하는 데 도움을 줍니다.

브라우저 호환성

h1~h6 태그들의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<h1>~<h6> 예 예 예 예

명세서

h1~h6 태그들의 명세서 사양
명세서 사양
<h1>~<h6> HTML Standard
#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

참고문헌

같이 보기