HTML 제목 태그란?
HTML 제목 태그(heading tag)는 웹페이지의 제목, 소제목, 섹션 구분 등에 사용하는 태그입니다.<h1>부터 <h6>까지 총 6가지가 있으며, 숫자가 커질수록 글씨 크기가 작아집니다.
제목 태그 종류와 차이점
- <h1>: 가장 큰 제목, 페이지의 주제(1페이지에 1번만 사용 권장)
- <h2>: h1 다음으로 큰 제목, 주요 소제목
- <h3>~<h6>: 점점 더 작은 소제목, 세부 섹션 구분
Tip: 제목 태그는 검색엔진(SEO)에서도 중요한 역할을 하므로, 계층 구조에 맞게 사용하는 것이 좋습니다.
HTML 제목 태그 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목 태그 예시</title>
</head>
<body>
<h1>가장 큰 제목은 h1 태그입니다.</h1>
<h2>h1 다음으로 큰 제목 h2입니다.</h2>
<h3>h2 다음으로 큰 제목 h3입니다.</h3>
<h4>h3 다음으로 큰 제목 h4입니다.</h4>
<h5>h4 다음으로 큰 제목 h5입니다.</h5>
<h6>가장 작은 제목은 h6 태그입니다.</h6>
</body>
</html>
예시 결과:
가장 큰 제목은 h1 태그입니다.
h1 다음으로 큰 제목 h2입니다.
h2 다음으로 큰 제목 h3입니다.
h3 다음으로 큰 제목 h4입니다.
h4 다음으로 큰 제목 h5입니다.
가장 작은 제목은 h6 태그입니다.
728x90
제목 태그의 올바른 사용법
- h1 태그: 홈페이지 이름, 블로그 메인 제목 등 가장 중요한 제목에 사용
- h2 태그: 블로그 글의 주요 소제목, 섹션 제목에 사용
- h3 태그: h2의 하위 소제목(소소제목)에 사용
- h4~h6 태그: 더 세부적인 구분이 필요할 때 사용
참고: h1~h6 태그는 글씨 크기와 굵기가 다르며, CSS로 스타일을 변경할 수도 있습니다.
MDN에서 제목 태그 자세히 알아보기
SMALL
정리 및 다음 강의 예고
오늘은 HTML 제목 태그(h1~h6)의 종류와 사용법을 예시와 함께 알아보았습니다.
제목 태그를 올바르게 사용하면, 웹페이지의 구조가 명확해지고 SEO에도 큰 도움이 됩니다.
꼭 복습하시고, 다음 시간에도 유익한 코딩 수업으로 찾아오겠습니다!
이전 강의 보기: [HTML 강의] 3강 - 메타 태그 종류 & 의미
다음 강의 보기: [HTML 강의] 5강 - 굵은 글씨 태그 (strong tag)