상세 컨텐츠

본문 제목

[HTML tag] 문서의 제목을 나타내는 h1,h2,h3,h4,h5,h6 태그 알아보기

ProgramStudy/WEB

by Ming footprint 2020. 2. 10. 17:00

본문

728x90
반응형

h 태그란?

'h 태그''heading'라는 의미로 '페이지나 책에 붙이는 제목'이라는 뜻을 가지고 있습니다.
책을 보시면 가장 큰 제목을 기준으로 그 제목에 속하는 내용으로 작은 제목이 나오고 그 작은 제목을 기준으로 또 세부적인 제목으로 나누는 것을 보신 경우가 있을 거에요.

이 의미대로 'h 태크'는 HTML 문서의 제목을 표현할 때 사용합니다. 그리고 문단의 의미를 강조해주는 제목 태그 입니다.

 

h 태그의 필요성

웹 검색 엔진 웹 크롤러(web crawler)는 수많은 페이지를 방문하여 복사본을 생성하고, 생성된 페이지의 빠른 검색을 위해 인덱싱을 합니다.  이 때 페이지에서 가장 중요한 태그를 찾는 데 그것이 'h1 태그' 입니다. 인덱싱을 위해서는 가장 중요한 'h1 태그'를 HTML 페이지에서 찾고 그곳에 포함된 키워드를 검색엔진에서 사용한다고 합니다. 그렇다면 'h1 태그'에 웹상에서 자신이 노출하고 싶은 키워드를 넣는 다면 검색엔진에서 자신의 페이지를 검색할수 있게 하기에 바람직하다고 생각을 할수 있습니다.
또한 검색해서 들어온 사용자에게 문서의 내용을 알아보기 쉽게 시인성을 제공해줍니다.

h태그 적용 전(ATOM Preview 화면)
h태그 적용 후(ATOM Preview 화면)

 

h 태그 사용법

'h 태그''h1, h2, h3, h4, h5, h6'까지 총 6가지의 단계로 사용할수 있습니다.
h1 부터 h6까지의 태그를 사용해서 웹에서 어떻게 보여지는지 살펴 보겠습니다.

ATOM Preview 화면, 웹브라우저에 따라서 다른 사이즈로 보일수 있습니다.

'h 태그'는 별도의 줄바꿈이 필요없이 자동 줄바꿈이 됩니다.
1에서 6으로, 즉 숫자가 커질수록 글씨가 작아지는 것을 볼수 있습니다.
다른 의미로 소제목으로 갈수록 강조가 작아진다고 생각할 수 있습니다.

 

h 태그 사용상의 주의점

검색에 유용한 제목 태그지만 사용상의 주의 사항이 있습니다.
1. 하나의 HTML 페이지에서는 'h1 태그'는 한번만 사용합니다.
2. 'h 태그'는 제목을 나타내는 코드이기 때문에 문단의 처음에 배치를 합니다. 꾸미기에는 사용을 하지 않습니다.
3. 지나친 키워드의 사용은 제목의 부자연스러움을 나타낼수 있으므로 키워드의 반복 사용은 좋지 않습니다.
4. HTML 페이지에서 'h 태그'의 '1~6'까지 순서대로 사용하는 것을 권장합니다.

 

google에서 제공하는 'google 검색엔진 최적화 기본가이드'에서는 제목 태그('h 태그')에 대한 활용 가이드를 제공합니다.

google 검색 엔진 최적화 기본 가이드에서 발췌

 

h 태그 설명을 마치며...

오늘은 'h 태그'에 대해서 알아보았습니다.
'h 태그'를 잘 활용한다면 자신의 글에서 표현하고 싶은 중요 키워드를 검색엔진에 노출 시켜서 상위 노출에 도전할 수 있지 않을까요?
그리고 제목 태그를 잘 활용하여 자신의 글이 시인성 있게 보인다면 궁금증을 가지고 오는 유저들에게 정보 전달하기가 쉬울듯 합니다.

 

 

   HTML 관련 글

  [ProgramStudy/Development tool] - ATOM에서 HTML Preview 사용하기

  [ProgramStudy/WEB] - HTML 태그란?

  [ProgramStudy/WEB] - blockquote 태그

 

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~

 

728x90
반응형

'ProgramStudy > WEB' 카테고리의 다른 글

blockquote 태그  (6) 2019.12.05
HTML 태그란?  (0) 2019.06.01

카테고리의 글 목록 더보기

댓글 영역

Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]