HTML 제목 태그 h1~h6, 제대로 알고 쓰자!
웹 문서를 만들다 보면 반드시 사용하는 것이 바로 제목 태그입니다.
HTML에서는 제목을 표현할 때 <h1>부터 <h6>까지의 태그를 사용합니다.
숫자가 커질수록 글자가 작아지는데, 혹시 그냥 크기만 보고 아무거나 쓰고 계시진 않았나요?
단순히 ‘크기만 다른 제목’이 아니며, HTML 구조와 SEO에도 큰 영향을 미치는 요소입니다.
오늘은 이 h 태그들을 순서대로 살펴보고, 어떤 상황에 어떤 태그를 쓰면 좋은지 함께 알아볼게요.
1. h1부터 h6까지 한눈에 비교
제목 태그는 총 여섯 개로 구성되어 있습니다. 숫자가 커질수록 시각적으로 작아지죠.
하지만 크기의 차이만 있는 것이 아니라, 구조적 의미와 역할도 다릅니다.
위 이미지를 보면 h1은 가장 크고 두껍게, h6은 작고 얇게 표현됩니다.
하지만 디자인 요소 외에도 이 태그들이 문서 구조에 끼치는 영향이 크다는 걸 알아두세요.
2. 제목 태그, 왜 중요할까?
검색 엔진은 웹페이지를 분석할 때 이 h 태그들을 기준으로 문서 구조를 파악합니다.
즉, 제목 태그는 단순한 디자인이 아니라 문서의 ‘뼈대’이자 ‘지도’ 역할을 하는 셈이죠.
💡 예를 들어 h1은 책의 제목, h2는 각 장의 제목, h3은 장 안의 소제목이라고 생각하면 이해가 쉬워요!
이렇게 계층적인 구조를 잘 설계하면 사용자도 내용을 한눈에 파악할 수 있고,
검색 엔진도 문서의 맥락을 더 잘 이해하게 되어 SEO 측면에서도 유리합니다.
3. 각 h 태그의 특징과 용도
h1은 페이지당 하나만 쓰는 게 원칙입니다. 페이지 전체를 대표하는 제목이기 때문이죠.
반면 h2~h6는 필요한 만큼 사용 가능하며, 내용의 흐름에 맞게 적절히 계층을 나누는 것이 중요합니다.
- h1 – 웹페이지 전체 주제를 대표 (ex. 블로그 글 제목)
- h2 – 주요 소제목, h1을 보조
- h3 – h2의 하위 항목 (ex. 소단락 제목)
- h4~h6 – 그 이하의 세부 항목 구분
특히 h4~h6은 디자인적으로는 잘 안 쓰이기도 하지만, 긴 문서나 기술 문서에선 유용하게 쓰입니다.
4. 시멘틱 구조와 접근성까지 고려!
시멘틱(Semantic)이란 의미를 담는다는 뜻입니다. 제목 태그는 시멘틱 태그 중 하나로, 단순히 ‘글씨 크기 조절’이 아니라 콘텐츠의 의미 구조를 표현하는 역할을 해요.
💡 시멘틱 태그를 잘 쓰면 시각장애인을 위한 스크린 리더도 내용을 더 쉽게 전달할 수 있습니다.
접근성, SEO, 유지보수성까지 챙기려면 반드시 제목 태그를 올바른 순서로 계층화해 사용하는 습관을 들이는 것이 좋아요.
마무리하며
지금까지 h1부터 h6까지 HTML 제목 태그에 대해 알아봤습니다.
크기만 보고 골라 쓰던 태그들이 사실은 웹 문서의 구조를 책임지는 중요한 요소라는 것, 이제는 확실히 아시겠죠?
이제 막 HTML을 배우는 단계에서도 제목 태그만큼은 올바르게 사용하려는 습관이 필요합니다.
오늘 배운 내용을 토대로 나만의 문서를 작성해보며 실제로 계층 구조를 적용해보세요.
흥미도 생기고 실력도 쑥쑥 올라갈 거예요.
다음 시간엔 또 다른 기초 태그를 심화해서 알아볼게요. 기대해주세요!