헤딩 태그

헤딩 태그는 어디에서 쓰이나요?

문서 제목과 소제목을 나누는 자리에서 씁니다. 목차를 자동으로 만들어주는 기능은 대부분 이 태그의 순서를 읽어서 만듭니다.

• 블로그 글이나 가이드 문서에서 제목과 소제목을 구분할 때
• 화면 낭독기 이용자가 제목에서 제목으로 건너뛰며 구조를 파악할 때
• 검색엔진이 문서의 위계를 읽어 목차형 검색결과를 만들 때

헤딩 태그는 어떻게 작성하나요?

문서 제목은 h1 하나만 쓰고 그 아래로 h2, h3 순서로 내려서 씁니다.

<h1>문서 제목</h1>
<h2>큰 소제목</h2>
<h3>그 안의 작은 소제목</h3>

<!-- h2 다음 h4로 건너뛰지 않는다 -->

지킬 규칙은 세 가지입니다.

• h1은 문서마다 한 번만 씁니다
• 단계를 건너뛰지 않고 h2 다음은 h3로 내려갑니다
• 글자 색과 크기는 CSS로 바꾸고 태그 이름은 그대로 둡니다

헤딩 태그가 왜 중요한가요?

화면 낭독기 이용자에게 검색엔진보다 먼저 영향을 미칩니다. h1부터 h6까지 총 6단계의 구획 제목을 오가며 이용자가 페이지 구조를 빠르게 파악합니다(MDN). 단계를 건너뛰면 이 탐색 흐름이 끊기고, 검색엔진도 같은 구조를 읽어 문서 위계를 판단합니다.

헤딩 태그라는 개념은 왜 생겼나요?

HTML이 처음 만들어졌을 때부터 문서를 종이 문서처럼 제목과 소제목으로 나눌 방법이 필요했습니다. 글자를 크게 보이게 하는 스타일이 아니라 그 부분이 새로운 주제의 시작이라는 구조적 의미를 전달하기 위해 만들어졌습니다.

내 상황에 적용하려면?

페이지 소스보기에서 h1부터 h6까지 순서를 확인합니다. 브라우저 개발자 도구의 접근성 트리 패널에서도 같은 순서가 보입니다.

• h1이 문서에 한 번만 있는지 확인했습니다
• h2 다음 h4로 건너뛴 곳이 없는지 확인했습니다
• 글자만 키우고 태그를 안 쓴 소제목이 없는지 확인했습니다
• 소제목이 그 아래 내용을 실제로 요약하는지 확인했습니다

헤딩 태그에 대한 흔한 오해는 무엇인가요?

글자만 키우면 된다는 오해가 가장 흔합니다. 아래 표로 정리합니다.

목차형 검색결과 노출은 리치 결과 항목에서, 헤딩 태그를 포함한 본문 배치 전반은 온페이지 SEO 항목에서 다룹니다.