제목 태그란?
HTML의 제목 태그는 문서의 구조와 계층을 표현하는 데 사용돼요. 크기와 중요도에 따라 <h1>부터 <h6>까지 여섯 단계가 있어요. 숫자가 작을수록 더 중요한 제목이며, 글씨 크기도 더 커져요
<hn>은 무엇인가요?
<hn> 태그라는 표현을 볼 수 있는데, <hn>은 실제 HTML 태그가 아니고, n은 숫자(number)를 뜻하며, 프로그래머들이 모든 제목 태그(<h1>부터 <h6>까지)를 통칭할 때 사용하는 표현이에요. 실제 코드에서는 반드시 <h1> ~ <h6> 중 하나를 사용해야 해요.
<h1> ~ <h6>태그의 역할과 의미
| 태그 | 용도 | 특징 |
|---|---|---|
| <h1> | 문서에서 가장 중요한 제목 | 가장 크게 표시됨. 페이지당 1개 권장 |
| <h2> | 주요 섹션 제목 | 보다는 작지만 여전히 중요함 |
| <h3>~<h6> | 세부 항목 및 소제목 | 숫자가 클수록 글씨가 작아지고 중요도 낮음 |
브라우저는 이 태그들에 기본 스타일을 적용해서 시각적인 계층을 보여주고, 스크린리더는 이를 통해 문서 구조를 논리적으로 탐색할 수 있어요. 또한 제목 태그에 키워드를 포함하면 SEO(검색 엔진 최적화)에도 도움이 돼요.
기본 사용 예시
웹 개발 기초
HTML이란?
태그의 종류
CSS이란?
스타일 지정 방법
이렇게 <h1> ~ <h6>을 계층적으로 구성하면, 문서의 흐름이 논리적으로 정리돼요. 검색엔진도 내용을 잘 이해하고, 스크린리더도 사용자에게 적절히 안내해줘요.
이 구조 덕분에,
- 사용자는 글 흐름을 한눈에 이해하고
- 검색엔진은 콘텐츠를 더 잘 인식하며
- 스크린리더 사용자는 문서를 쉽게 탐색할 수 있어요
잘못된 사용 예
제목은 반드시 계층 순서를 지켜야 해요. 아래는 잘못된 예예요.
이렇게 순서를 뒤섞으면, 검색엔진이나 스크린리더가 내용을 제대로 이해하지 못해요. 문서의 구조가 혼란스러워지기 때문이에요.
<h> 태그는 틀린 문법이에요
HTML에서 <h>처럼 숫자 없는 제목 태그는 존재하지 않아요. HTML에서는 반드시 숫자를 포함한 <h1> ~ <h6> 형태로 써야 해요. <h>는 브라우저가 알 수 없는 태그이기 때문에 브라우저는 이를 무시하거나 일반 텍스트처럼 표시해버려요.
- 글씨가 커지지 않고 일반 텍스트처럼 보임
- CSS 스타일이 적용되지 않음
- HTML 문법 검사에서 오류 발생
올바른 제목 태그 사용 팁
HTML의 제목 태그는 단순한 꾸밈이 아니라, 웹 문서의 뼈대를 세우는 중요한 도구예요. 문서의 의미와 구조를 생각하며 쓰면 더 전문적이고 읽기 쉬운 웹페이지를 만들 수 있어요.
<hn>태그에 대해 더 알아보고 싶으시다면 아래의 MDN 공식 문서를 읽어보세요.