정의 및 사용 방법

h에 숫자 1부터 6까지를 붙인 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그는
제목을 나타내며, 웹 페이지의 구조에서 1부터 6까지의 숫자로 지정된 6 단계의 제목 수준을 가집니다.

이 태그는 의미론적 측면에서 문서 전체(<h1>에 해당)나 섹션·영역(<h2>~<h6>에 해당)의 계층 수준, 주제와 내용을 파악하는데 중요한 지표가 됩니다.

특징

  • 이 태그들은 1부터 6까지의 숫자로 지정된 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>

코드 부연설명
<section> 태그는 문서, 애플리케이션의 일반적인 섹션을 나타냅니다.
이 섹션은 특정 주제에 따라 묶인 콘텐츠 그룹을 의미하며, 주제의 제목이 필수적이지 않지만 일반적으로 함께 사용됩니다.

사용법 참고 사항

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

한 페이지에 여러 개의 <h1> 태그를 사용하지 않기

<h1> 태그는 최상위 영역에 사용되는 제목입니다. 웹 페이지의 주요 제목이나 주제에 사용하는 것으로써, 웹 페이지에는 하나의 <h1> 태그만 사용하는 것이 좋습니다. 이는 웹 접근성을 위한 스크린 리더나 검색엔진 최적화에도 도움이 됩니다.

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

role 속성은 HTML 요소의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 속성입니다.

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

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

HTML 
<!-- <h3> 제목 요소를 사용한 예 -->
<h3>제목 수준 3</h3>
<p>제목 수준 3에 대한 내용</p>

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

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

HTML 
<!-- role="heading"과 aria-level 속성을 사용한 예 -->
<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> 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(navigation)을 위한 링크(links)가 있는 영역을 나타냅니다. 일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

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

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

기술적인 문법 요약

h1~h6 태그의 기술적인 문법 요약
허용되는 부모 요소 플로우 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠 구문 콘텐츠
암시적인 role 속성 값 heading
허용된 role 속성 값 tab, presentation 또는 none

구문상 주의할 점

<address> 태그 내에서 사용할 수 없습니다.

브라우저 호환성

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

참고문헌

같이 보기