HTML에서 제목은 어디에 쓰는 걸까? <title> vs <h1>
1. 겉과 속이 다른 두 제목
웹페이지를 처음 열었을 때, 브라우저 탭에 보이는 문구와 화면 안에 있는 큰 글자가 다르다는 걸 느껴본 적 있나요? 사실 이 둘은 모두 ‘제목’이라는 역할을 하지만 서로 전혀 다른 영역에서 활동합니다. <title>은 무대 뒤에서 조명을 조절하는 조명감독 같은 존재고, <h1>은 무대 위에서 주연을 맡은 배우처럼 사용자 눈앞에 드러나는 주제예요.
2. <title> – 무대 밖의 히든 주인공
<title>은 <head> 안에 위치하고, 브라우저 탭, 즐겨찾기, 검색엔진 결과 등 외부에서 문서를 대표하는 텍스트로 사용돼요. 눈에 보이지 않지만, 사이트의 첫인상을 결정짓는 핵심 요소입니다. 특히 검색 결과에서 클릭을 유도하는 문장이 되기 때문에, 잘 작성된 <title>은 높은 클릭률로 이어질 수 있죠.
<head>
<title>HTML 강좌 - 제목 태그 정리</title>
</head>렌더링 결과:
브라우저 탭에 “HTML 강좌 – 제목 태그 정리”가 표시됩니다.
3. <h1> – 사용자를 맞이하는 주연배우
<h1>은 <body> 안에 위치하며, 페이지에서 가장 중요하고 눈에 띄는 제목으로 쓰입니다. 이는 방문자가 가장 먼저 읽게 되는 핵심 메시지로, 콘텐츠의 방향성을 제시하죠. 신문의 헤드라인처럼 독자의 시선을 잡아끌고, 스크롤을 내리게 만드는 ‘진입 문’이라 볼 수 있어요.
<body>
<h1>HTML 태그 완전 정복</h1>
</body>렌더링 결과:
본문 상단에 크고 굵은 “HTML 태그 완전 정복”이라는 제목이 표시됩니다.
4. 두 태그의 차이 정리
이제 두 태그를 비교해보면 각각의 역할이 얼마나 명확히 나뉘는지 알 수 있어요. <title>은 문서의 외부적 성격을 정의하고, <h1>은 내부 콘텐츠 구조를 형성합니다. 각 태그는 ‘어디서, 누구에게’ 보여지는지를 중심으로 설계되어 있고, 혼용하거나 생략할 경우 SEO나 UX 모두에 악영향을 줄 수 있어요.
특히 <title>은 검색엔진이 페이지를 인식하는 기준이 되므로 반드시 고유하고 매력적인 문장으로 작성되어야 하고, <h1>은 한 페이지에 하나만 사용하는 것이 좋습니다. 이는 콘텐츠 구조를 명확히 해주는 기본 원칙이에요.
| 비교 항목 | <title> | <h1> |
|---|---|---|
| 위치 | <head> 내부 | <body> 내부 |
| 보이는 곳 | 브라우저 탭, 검색 결과 | 웹페이지 본문 |
| 주된 역할 | 문서 전체를 대표 | 본문 내용의 주제 표현 |
| SEO 관점 | 검색 결과 제목으로 매우 중요 | 문서 구조 인식에 기여 |
5. 예제 코드와 렌더링 비교
아래 예제는 지금까지 설명한 <title>과 <h1>의 역할을 직관적으로 비교해볼 수 있게 구성했어요. 각각이 어디에 위치하고, 어떤 모습으로 렌더링되는지를 눈으로 확인해보세요.
실제로 이런 구조는 모든 HTML 페이지의 기초가 되며, 웹페이지의 완성도를 크게 좌우하는 요소이기도 합니다. 간단한 구조지만 그 안에는 콘텐츠 설계, 사용자 경험, 검색 최적화까지 모두 연결돼 있다는 점을 기억해두면 좋아요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML 제목 비교하기</title>
</head>
<body>
<h1>이건 화면에 보이는 제목이에요</h1>
</body>
</html>렌더링 결과:
탭 제목: “HTML 제목 비교하기”
본문 제목: “이건 화면에 보이는 제목이에요”
6. 마무리하며
<title>과 <h1>은 모두 제목 역할을 하지만, 적용되는 위치, 목적, 사용자에게 전달되는 방식은 완전히 다릅니다. 이 둘을 잘 활용하는 것이 좋은 웹문서의 시작이에요.
<title>은 외부 환경에 노출되는 요약 정보이고, <h1>은 내부 사용자에게 전달되는 콘텐츠의 얼굴입니다. 이제부터는 ‘누구에게 보여줄 것인가’를 먼저 생각하고 태그를 선택해보세요!