헤딩 태그
헤딩 태그는 HTML의 <h1>~<h6> 요소로, 페이지 콘텐츠의 제목과 계층 구조를 표시합니다. 가독성과 접근성을 높이고 검색엔진이 콘텐츠의 주제와 구조를 이해하도록 돕습니다.
- 헤딩 태그는 <h1>부터 <h6>까지 6단계로 이루어진 HTML 제목 요소로, 콘텐츠의 주제와 위계를 명시합니다.
- 한 페이지의 핵심 주제는 <h1>으로 표현하며, 그 아래 섹션은 <h2>·<h3> 순으로 단계를 건너뛰지 않고 논리적으로 배치하는 편이 좋습니다.
- 구글은 헤딩의 의미론적 순서가 랭킹에 거의 영향을 주지 않으며, 한 페이지에 <h1>이 여러 개 있어도 문제 삼지 않는다고 밝혔습니다.
- 헤딩의 계층 구조는 스크린 리더 사용자가 페이지를 빠르게 탐색하는 데 결정적이므로, 접근성 관점에서 순서를 지키는 일이 중요합니다.
- 글자를 크게 보이려는 목적으로 헤딩 태그를 쓰는 것은 잘못된 사용이며, 시각적 크기는 CSS로 조정해야 합니다.
개요
헤딩 태그는 HTML에서 콘텐츠의 제목과 계층 구조를 표시하는 <h1>~<h6> 요소를 가리킵니다. 'h'는 heading(제목)을 뜻하며 숫자가 작을수록 상위 단계로, <h1>이 가장 중요한 최상위 제목이고 <h6>이 가장 하위 제목입니다. 헤딩은 문서를 사람이 읽기 쉬운 단락으로 나눌 뿐 아니라, 스크린 리더 같은 보조 기술과 검색엔진이 콘텐츠의 구조와 주제를 파악하도록 돕는 의미론적 표지 역할을 합니다.
MDN 문서에 따르면 헤딩 요소는 기본적으로 블록 레벨 박스를 생성하며, 페이지의 제목 위계를 표현하는 용도로 설계되었습니다. 단순한 글자 굵기나 크기 조절을 위해 사용하는 요소가 아닙니다.
계층과 모범 사례
헤딩은 문서의 목차처럼 동작합니다. 페이지 전체를 대표하는 제목을 <h1> 하나로 두고, 그 하위 섹션을 <h2>로, 다시 그 안의 세부 항목을 <h3>으로 표현하는 식으로 논리적 깊이를 따라 내려갑니다. 핵심 원칙은 다음과 같이 정리됩니다.
- 페이지의 주제는 <h1> 하나로 명확히 표현하는 편이 권장됩니다. <h1>은 문서의 <title>과 유사하게 페이지 전체 내용을 요약합니다.
- 단계를 건너뛰지 않습니다. <h2> 다음에 바로 <h4>로 가지 않고 <h3>을 거쳐 내려가야 합니다. 단계를 건너뛰면 스크린 리더 사용자가 중간 단계가 없다고 오인하게 됩니다.
- 제목은 해당 섹션 내용을 정확히 반영해야 하며, 관련 키워드를 자연스럽게 포함하되 과도하게 채워 넣지 않습니다.
- 시각적 크기 조절에는 CSS를 사용합니다. 글자를 크게 보이려고 헤딩 태그를 남용하지 않습니다.
<h1>헤딩 태그 완벽 가이드</h1>
<h2>헤딩 태그란</h2>
<h2>계층 구조</h2>
<h3>h1의 역할</h3>
<h3>h2~h6의 역할</h3>
<h2>SEO와 접근성</h2>근거
헤딩에 관한 흔한 오해 두 가지는 출처로 명확히 정리됩니다.
의미론적 순서와 랭킹. 구글의 Gary Illyes는 2024년 SEO Office Hours에서 헤딩의 의미론적 순서가 접근성(특히 스크린 리더)에는 매우 유용하지만 구글의 검색 랭킹 알고리즘에는 큰 영향을 주지 않는다고 밝혔습니다. Search Engine Journal 정리에 따르면, 헤딩 순서를 고친다고 해서 순위가 바뀌지는 않습니다. 다만 이는 "순서가 중요하지 않으니 막 써도 된다"는 뜻이 아니라, 접근성과 가독성을 위해 여전히 권장된다는 의미입니다.
복수 <h1> 허용. 구글은 한 페이지에 <h1>이 여러 개 있어도 문제 삼지 않으며, 이는 웹에서 흔한 패턴이라고 설명해 왔습니다. 반면 Ahrefs, Semrush, Screaming Frog 같은 SEO 감사 도구는 '복수 H1'을 이슈로 표시하는데, 이는 구글의 실제 허용 범위가 아니라 모범 사례(best practice)를 기준으로 경고하기 때문입니다. 정리하면, 복수 <h1>은 구글 기준 페널티 요소가 아니지만, 콘텐츠 구조를 명료하게 하려면 페이지당 하나의 <h1>을 두는 편이 안전합니다.
실행 체크리스트
- 페이지마다 핵심 주제를 담은 <h1>을 명확히 하나 둡니다.
- 섹션 구조를 <h2> → <h3> → <h4> 순으로 단계를 건너뛰지 않고 배치합니다.
- 각 헤딩이 바로 아래 본문 내용을 정확히 요약하는지 확인합니다.
- 제목은 간결하게(대략 4~8단어) 쓰고 관련 키워드를 자연스럽게 포함합니다.
- 글자 크기·굵기 조절은 헤딩 태그가 아니라 CSS로 처리합니다.
- 스크린 리더로 헤딩만 따라 탐색했을 때 페이지 구조가 이해되는지 점검합니다.