본문 바로가기
HTML

HTML 문서 제목을 만드는 H 태그, SEO 최적화 필수 태그

by 40's Programmer 2023. 5. 27.
반응형

H 태그란?

제목(heading)을 정의하는 데 사용되는 태그입니다. h 태그는 웹 페이지의 구조를 형성하고 제목과 하위 제목을 표시합니다. h 태그는 h1부터 h6까지 6가지가 있습니다. h1은 가장 큰 제목을 나타내며, h6은 가장 작은 제목을 나타냅니다.

 

사용법

<H1> TEXT </H1>
  • H1에서 H6 사이 제목 수준을 정하고 태그를 열고 닫기
  • 태그 사이에 원하는 텍스트 작성하기

 

코드 작성

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

 

결과 확인

See the Pen H tag by 40's Programmer (@40sProgrammer) on CodePen.

 

왜 H 태그를 써야 하나?

웹페이지를 만드는 이유는 다른 사람들에게 공유하기 위함입니다. 때문에 검색엔진에 노출되는 게 중요합니다. h태그는 특정 페이지의 구조를 검색엔진 봇이 빠르게 확인할 수 있도록 도와줍니다. 다시 말해서, h태그 사용은 검색 엔진에서 웹 페이지를 색인화할 때 페이지의 중요성을 인식하는 데 도움을 줍니다.

 

아래 화면을 보면, 화면에서 보이는 모습은 똑같지만 코드는 완전 다릅니다.

 

See the Pen H TAG by 40's Programmer (@40sProgrammer) on CodePen.

 

검색엔진은 페이지 구조를 파악할 때 두번째는 제목이라고 생각하지 않기 때문에 구조 파악을 어려워 합니다. 그래서 h 코드를 적절하게 써야 한답니다.

 

반응형