웹페이지를 만들 때 가장 기본이 되는 요소 중 하나가 바로 제목 태그(h1~h6)입니다.
제목 태그는 단순히 글자를 크게 만드는 역할이 아니라, 문서의 구조와 의미를 정의하는 중요한 요소입니다.
특히 검색엔진 최적화(SEO)와 웹 접근성 측면에서 제목 태그는 매우 중요한 역할을 합니다.
하지만 많은 경우 단순히 디자인 목적으로 잘못 사용하는 경우가 많습니다.
이번 글에서는 HTML 제목 태그의 의미, 올바른 사용 방법, 그리고 SEO 관점에서의 활용법까지 자세히 정리해보겠습니다.
제목 태그(h1~h6)란 무엇인가?
HTML에서는 문서의 구조를 표현하기 위해 h1부터 h6까지 총 6단계의 제목 태그를 제공합니다.
- h1 : 가장 중요한 제목
- h2 : 두 번째 수준 제목
- h3 : 세 번째 수준 제목
- h4 : 네 번째 수준 제목
- h5 : 다섯 번째 수준 제목
- h6 : 여섯 번째 수준 제목
이 태그들은 단순히 크기 차이가 아니라 계층 구조를 의미합니다.
제목 태그를 사용하는 이유
문서 구조를 명확하게 만들기
제목 태그를 사용하면 콘텐츠의 구조를 명확하게 표현할 수 있습니다.
사용자는 제목을 통해 내용을 빠르게 이해할 수 있습니다.
검색엔진 최적화(SEO)
검색엔진은 제목 태그를 분석하여 페이지의 주요 내용을 파악합니다.
특히 h1 태그는 페이지의 핵심 주제를 나타내기 때문에 매우 중요합니다.
웹 접근성 향상
스크린리더는 제목 태그를 기준으로 페이지를 탐색합니다.
올바른 구조를 사용하면 접근성이 크게 개선됩니다.
제목 태그 올바르게 사용하는 방법
1. h1 태그는 페이지의 대표 제목으로 사용
h1 태그는 페이지의 핵심 주제를 나타내는 제목입니다.
일반적으로 한 페이지에 하나만 사용하는 것이 좋습니다.
<h1>HTML 제목 태그 사용 방법</h1>
2. 계층 구조를 유지하기
제목 태그는 순서대로 사용하는 것이 중요합니다.
h1 다음에 h3를 사용하는 것이 아니라 h2 > h3 순으로 내려가야 합니다.
<h1>웹 개발 기초</h1>
<h2>HTML 이해하기</h2>
<h3>기본 구조</h3>
이처럼 단계적으로 구조를 구성해야 합니다.
3. 디자인 목적이 아닌 구조 목적으로 사용
제목 태그는 글자 크기를 조절하기 위한 용도가 아닙니다.
디자인은 CSS로 처리하고, 제목 태그는 의미 중심으로 사용해야 합니다.
4. 키워드를 자연스럽게 포함하기
SEO를 고려한다면 제목 태그에 핵심 키워드를 자연스럽게 포함하는 것이 좋습니다.
하지만 과도한 키워드 반복은 피해야 합니다.
잘못된 제목 태그 사용 예
다음과 같은 사용은 좋지 않은 예입니다.
<h1>메인 제목</h1>
<h3>소제목</h3>
h2를 건너뛰고 h3를 사용하는 것은 구조적으로 올바르지 않습니다.
또한 다음과 같은 경우도 주의해야 합니다.
<h1>제목1</h1>
<h1>제목2</h1>
<h1>제목3</h1>
여러 개의 h1 태그를 사용하는 것은 페이지의 주제를 모호하게 만들 수 있습니다.
제목 태그 구조 예시
<h1>HTML 기초 배우기</h1>
<h2>HTML이란 무엇인가</h2>
<p>설명</p>
<h2>HTML 구조</h2>
<p>설명</p>
<h3>DOCTYPE 설명</h3>
<p>설명</p>
이 구조는 검색엔진과 사용자 모두에게 이해하기 쉬운 구조입니다.
제목 태그와 SEO의 관계
제목 태그는 검색엔진이 콘텐츠를 이해하는 데 중요한 역할을 합니다.
- h1 : 페이지 핵심 주제
- h2 : 주요 섹션
- h3 : 세부 내용
이 구조를 잘 지키면 검색엔진이 콘텐츠를 더 잘 이해할 수 있습니다.
마무리
HTML 제목 태그(h1~h6)는 단순한 스타일 요소가 아니라 문서의 구조와 의미를 정의하는 중요한 요소입니다.
정리하면 다음과 같습니다.
- h1은 페이지의 대표 제목으로 사용한다
- 제목 태그는 계층 구조를 유지해야 한다
- 디자인이 아닌 의미 중심으로 사용해야 한다
웹페이지를 제작할 때 제목 태그를 올바르게 사용하면 SEO와 접근성을 동시에 개선할 수 있습니다.