1. 헤딩 태그(heading tag)
1️⃣ 헤딩 태그란?
문서의 제목과 구조를 나타내는 태그
단순히 글자를 크게 만드는 용도가 아니라, 웹페이지의 뼈대(목차) 역할
HTML에는
h1부터 h6까지 6단계 헤딩 태그가 있어요.<h1>가장 중요한 제목</h1>
<h2>큰 섹션 제목</h2>
<h3>하위 섹션</h3>
<h4>더 작은 제목</h4>
<h5>소제목</h5>
<h6>가장 작은 제목</h6>- 숫자가 작을수록 중요도 ↑
- 숫자가 클수록 하위 개념
- 기본적으로 글자가 클수록 중요
2️⃣ 헤딩 태그의 역할
1) 문서 구조 표현
헤딩은 책의 목차처럼 문서를 계층 구조로 나눕니다.
<h1>쇼핑몰</h1>
<h2>상품 목록</h2>
<h3>의류</h3>
<h3>전자기기</h3>
<h2>고객센터</h2>
<h3>공지사항</h3>➡ 이런 구조를 브라우저, 검색엔진, 스크린리더가 이해해요.
2) SEO (검색엔진 최적화)
- 검색엔진은
h1~h6를 중요 키워드로 인식
h1은 페이지 핵심 주제
❌ 잘못된 사용
<h1>메인</h1>
<h1>서브</h1>
<h1>기타</h1>✅ 올바른 구조:
<h1>쇼핑몰</h1>
<h2>베스트 상품</h2>
<h2>신상품</h2>3) 접근성 (Accessibility)
- 시각장애인은 스크린리더로 헤딩 목록만 듣고 이동
- 헤딩 순서가 엉키면 페이지 이해가 어려워짐
3️⃣ 올바른 헤딩 사용 규칙
✅ 기본 원칙
1) h1은 페이지당 1개 (권장)
<h1>상품 상세 페이지</h1>2) 순서대로 사용 (h1 → h2 → h3)
❌ 잘못된 예
<h1>제목</h1>
<h3>바로 소제목</h3>⭕ 올바른 예
<h1>제목</h1>
<h2>소제목</h2>
<h3>세부 내용</h3>3) 크기 조절은 CSS로
<h2 class="title">공지사항</h2>.title {
font-size:14px;
}
4️⃣ 헤딩 태그는 블록 태그다
h1 ~ h6모두 블록 요소
- 자동 줄바꿈 발생
- 상하 여백(margin)이 기본 적용됨
<h2>제목</h2>
<p>내용</p>5️⃣ h1 ~ h6 실제 쓰임 감각
태그 | 용도 |
h1 | 페이지 전체 대표 제목 |
h2 | 큰 섹션 제목 |
h3 | 섹션 안의 소제목 |
h4 | 상세 항목 |
h5 | 보조 설명 |
h6 | 거의 사용 안 함 |
실무에서는 보통
h1 ~ h3 까지 많이 씁니다.6️⃣ 잘못된 사용 예 (실무에서 자주 봄 ❌)
1) ❌ 디자인용으로 헤딩 사용
<h1>로그인</h1><!-- 그냥 글자 크게 하려고 -->➡️ 제목이 아니라면
div, span + CSS 사용2) ❌ 헤딩 안에 버튼/링크만 넣기
<h2><button>전송</button></h2>
➡️ 의미적으로 이상함 (제목은 제목이어야 함)
7️⃣ 시맨틱 구조 예시 (좋은 HTML 👍)
<h1>블로그</h1>
<section>
<h2>최신 글</h2>
<article>
<h3>HTML 기본</h3>
<p>내용...</p>
</article>
</section>8️⃣ 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- h태그는 제목태그이다. block속성이다 -->
<h1>제목1</h1>
<h3>제목3</h3>
</body>
</html>
➡️ 헤딩 태그는 블록 속성
Share article