00님, 저희 페이지 검색해도 안 나오는데요?[5] (H tag 작성하는 법)

생각보다 사이트 제작 시 많은 사람들이 놓치는 부분이 H tag입니다.
H tag는 SEO의 근본이라고 볼 수 있기 때문에 각 사이트와 페이지에 맞게 H tag를 올바르게 넣어줘야 합니다.

---

H tag의 특징

• H tag의 H는 heading을 의미합니다.
  h1 ~ h6까지 있으며 구획 제목을 나타냅니다.
• H tag는 h1 ~ h6까지 있습니다.
  h1이 높고 h6이 낮습니다.
• 가급적 내용의 순서와 중요도에 맞게 h1 다음에 h2, h2 다음에 h3을 적습니다.
• H1 태그는 한 페이지에 하나만 존재해야 합니다.
  보통은 H1 태그 안에 logo를 넣은 뒤 H1 태그 클릭 시 Home으로 갈 수 있도록 합니다.
  이는 시각 장애인이나 다른 제한 사항이 있는 분들을 위해 대부분의 웹페이지에서 준수하는 웹 표준 규칙입니다.
  웹 접근성을 높이기 위해, H1 태그를 홈 버튼으로 사용하는 것이 좋습니다.
  좀 더 접근성을 높이고 싶다면 title 속성에 title=”Home”이라고 적는 것도 좋겠지요.

---

그러나 실제로 H tag를 적재적소에 넣는 것은 귀찮기도 하고 유지/보수가 어려울 수 있습니다.
(보통 다 div로 컨텐츠를 감싸시지요.)

간단한 방법으로 유지/보수가 쉽게 H tag를 넣는 방법은 아래와 같습니다. (가라로 작성하는 법)

<h1>
	<a href="/" title="Home">Logo</a>
</h1>
<div sytle="display:none">
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
</div>

위처럼 하였을 경우 H tag를 무척 손쉽게 유지/보수할 수 있다는 장점이 있습니다.

대신 위 방법은 정석이 아니기 때문에 가급적 올바르게 컨텐츠 중간마다 H tag를 올바르게 넣어주시는 것이 좋습니다.

---

참고 문헌:

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN