HTML <h> Element

1. h(header) element

---

h 태그는 HTML 페이지에서 본문 내 제목을 표현하기 위한 태그입니다.

 

• 제목의 사용 용도, 크기에 따라 h1(대제목) ~ h6(소제목)을 제공합니다.
• h 태그를 얼마나 잘 사용하냐에 따라 검색 엔진에 잘 보이거나 잘 안 보일 수 있습니다.

---

2. 사용 예시

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

 

3. h 태그가 중요한 이유

h 태그가 중요한 이유는 h 태그의 사용 유무에 따라 검색 엔진에 노출이 잘 되거나 아예 안될 수도 있기 때문입니다.

 

1. h1 태그는 반드시 1개가 있어야 합니다. 다른 컨텐츠 내용(블로그 제목, 카테고리) 등을 제외하고 글 내용 안에는 h1 태그는 꼭 1개가 있어야 합니다. 티스토리의 경우 글 제목이 h1이고, 제목 1이 h2입니다.
2. 구글 로봇(검색 엔진)이 h1 제목을 보고 어떠한 주제의 글인지 파악하고 분류합니다.
3. 또한 h1 태그의 내용 (글 제목)과 글 본문 내용이 얼마나 일관성 있는지도 파악합니다.
4. 위의 내용과 마찬가지로 h2, h3, h4의 내용 아래의 일반 본문 내용 (p 태그)도 해당 h2, h3, h4와 연관성이 있는 내용이어야 합니다.

 

또한 h 태그의 순서도 중요합니다. h2 -> h3 ..의 순서대로 짜임새 있게 작성해야 합니다.

 

좋지 않은 예시

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

 

좋은 예시

<h2>Heading level 1</h2>
<h3>Heading level 2</h3>
<h4>Heading level 3</h4>

고로 h 태그는 글의 주제에 맞게 단계적으로 사용하는 것이 좋습니다.