H태그는 HTML에서 제목의 계층을 표시하는 h1부터 h6까지의 요소입니다. h1이 가장 높은 단계이고 숫자가 커질수록 하위 제목입니다. 글씨 크기를 정하는 용도가 아니라 문서에서 어느 부분의 제목인지를 나타냅니다.
<h1>페이지 대표 제목</h1>
<h2>큰 단락 제목</h2>
<h3>세부 항목 제목</h3>
H태그의 역할
검색엔진은 헤딩으로 페이지의 주제와 계층을 파악합니다. 독자는 소제목을 훑어 필요한 부분을 찾고, 스크린리더 사용자는 헤딩 단위로 이동할 수 있습니다.
따라서 헤딩은 실제 내용의 목차가 되도록 작성합니다. 헤딩만 이어 읽어도 어떤 내용을 어떤 순서로 설명하는지 알 수 있어야 합니다.
- 각 헤딩은 그 아래 내용을 요약합니다. ‘배송 조건’이라는 제목 아래에는 배송 지역, 비용과 소요 기간처럼 배송에 관한 내용이 와야 합니다.
- 하위 제목은 한 단계씩 나눕니다. H2 아래에 H4를 바로 두면 스크린리더 사용자는 H3에 해당하는 내용이 빠졌는지 혼동할 수 있습니다.
- 문장을 강조할 때는 굵게 표시하고, 새 절을 시작할 때는 헤딩을 사용합니다.
헤딩 개수와 H1 사용 기준
Google은 페이지에 필요한 헤딩 개수를 따로 정하지 않습니다.
일반적인 콘텐츠 페이지는 H1 태그 하나에 대표 주제를 담고 H2와 H3로 내용을 나누는 편이 좋습니다. HTML 문법상 서로 중첩하지 않는 여러 H1이 허용되지만, 일반적으로 권장하는 구조는 아닙니다. 제목에는 해당 절을 설명하는 말을 쓰고, 같은 키워드를 무리하게 반복하는 키워드 스터핑은 피합니다.
자주 생기는 실수
- 글씨 크기에 맞춰 태그 선택: h4의 크기가 마음에 든다는 이유로 페이지 대표 제목에 쓰면 제목의 단계를 잘못 전달합니다. 크기는 CSS로 조절하고 태그는 내용의 계층에 맞춥니다.
- 로고만 대표 제목으로 표시: 모든 페이지의 로고에만 H1을 붙이고 본문의 대표 제목을 빠뜨리면 각 페이지의 주제를 드러내기 어렵습니다. 메뉴나 사이드바도 실제로 구역의 제목이 필요하다면 헤딩을 사용할 수 있습니다.
- 문단마다 제목 추가: 같은 내용을 이어 설명하는 문단까지 각각 제목으로 나누면 글의 흐름이 끊깁니다. 새로운 하위 주제가 시작되는지 보고 제목을 붙입니다.
H태그에 해당하는 것과 아닌 것
| 코드와 화면 | 판단 |
|---|---|
<h2>배송 조건</h2> 아래에 배송 조건 설명이 이어짐 | 실제 섹션 제목이므로 헤딩에 해당 |
<p><strong>배송 조건</strong></p>를 크게 꾸밈 | 제목처럼 보여도 HTML 헤딩은 아님 |
<h3>를 글자 크기 때문에 본문 강조에 사용 | 헤딩의 의미와 맞지 않음 |
CSS로 작게 보이는 <h2> | 화면 크기와 관계없이 헤딩에 해당 |
브라우저 개발자 도구나 접근성 트리에서 heading 역할과 레벨을 확인하면 실제 제목의 단계를 알 수 있습니다. 예를 들어 ‘배송 조건’이 H2라면 그 안의 ‘배송비’와 ‘배송 기간’은 H3로, 별도 주제인 ‘반품 조건’은 다음 H2로 둘 수 있습니다. 제목을 순서대로 읽으며 이런 포함 관계가 맞는지 대조합니다.
자주 묻는 질문
H태그에 키워드를 꼭 넣어야 하나요?
제목 아래의 내용을 정확히 설명하면 핵심 용어가 자연스럽게 포함될 수 있습니다. 키워드를 넣으려고 설명 범위와 맞지 않는 제목을 만들지는 마세요.
h5, h6까지 쓰는 게 좋은가요?
하위 주제를 그만큼 세분해야 한다면 사용할 수 있습니다. H5나 H6까지 썼다고 더 좋은 구조가 되는 것은 아닙니다. 단계가 깊어져 내용을 따라가기 어렵다면, 일부 내용을 별도 글로 나누거나 같은 수준의 항목으로 묶을 수 있는지 검토합니다.
헤딩 구조는 어떻게 점검하나요?
브라우저 확장이나 개발자 도구에서 헤딩 목록을 확인합니다. 제목만으로 내용을 예상할 수 있는지, 상위 제목과 하위 제목의 관계가 맞는지 읽어 보세요. 단계 건너뜀도 함께 점검합니다.
함께 알아두면 좋은 용어
- H1 태그: 페이지의 대표 제목을 담는 최상위 헤딩
- 타이틀 태그: 검색결과와 브라우저 탭에 쓰이는 문서 제목
- 온페이지 SEO: 본문, 제목과 내부 링크 등 페이지 안의 요소를 개선하는 작업
- 스크린리더: 화면을 음성으로 읽어 주는 보조 기술