보통 h1태그의 경우는 대제목을 작성할때 사용하며, 본문 내용으로는 잘 넣지 않는 편입니다. 제 워드프레스 블로그로, 예시를들어 보면, ‘[HTML5] h1 태그 사용 및 활용하는 방법‘이란 제목 부분이 h1태그로 사용되었습니다.
![[HTML5] h1 태그 사용 및 활용하는 방법 3 티스토리 H1](https://lifeblog.co.kr/wp-content/uploads/2021/06/티스토리-H1-1024x209.png)
마찬가지로, 티스토리 블로그 본문 내용 역시, 제목부분에 h1태그가 들어가있다는 사실을 알 수가 있습니다. (일부, h2~h3태그를 삽입한 스킨도 있긴합니다만, 구글 SEO 측면에서 별로 좋지 않다고 볼 수있습니다. 왠만하면 대제목 부분에는 h1 태그가 들어가는 것이 좋습니다.)
왠만하면 대부분 스킨들의 대제목 부분에는 h1태그가 사용되어있을 것이라고 생각합니다. 만약, h1태그가 사용되지 않았다면, 지금 당장이라도 바꿔주시는 쪽이 좋을것으로 보입니다.
h1 태그 두 개이상 사용한다면, seo 측면에서 좋을까?
결론부터 말씀을 드리자면, h1 태그는 하나만 사용하시는게 좋습니다. 이는 seo의 기본 규칙이라고 볼 수있습니다. 또, 위에서 언급드린 바와 같이, 대부분의 워드프레스 테마 혹은 티스토리 스킨 제목에는 h1태그로 설정되어있기때문에 따로 h1태그를 삽입해줄 필요는 없습니다.
h1~h6 태그 작성하는 방법
태그를 작성하시기 전에 비주얼스튜디오코드 같은 프로그램을 다운로드 하시고, 연습을 해보는 쪽이 좋을거라 생각합니다. 설치는 위 링크를 참고해주시면 되고, 사용하는 방법은 이 글을 읽으시면 도움이 될거라 생각하고 있습니다.
비주얼스튜디오코드는 html 뿐만아니라, js, css, php, react 등 다양한 언어들을 손쉽게 코딩할 수있는 마이크로소프트사의 프로그램입니다. html5 코딩연습할 계획이 있으시다면 반드시 설치해주시면 좋을거라 생각합니다.
<h1>여기는 h1태그입니다.</h1>
<h2>여기는 h2태그입니다.</h2>
<h3>여기는 h3태그입니다.</h3>
<h4>여기는 h4태그입니다.</h4>
<h5>여기는 h5태그입니다.</h5>
<h6>여기는 h6태그입니다.</h6>
출력결과
![[HTML5] h1 태그 사용 및 활용하는 방법 4 출력 1](https://lifeblog.co.kr/wp-content/uploads/2021/06/출력-1.png)
위에서 부터 순서대로 h1~h6태그입니다. 각각 글자사이즈가 다르고, h6의 경우는 매우 작은 폰트사이즈를 가지고 있습니다. 참고로, css를 통해, 각 글자 크기를 임의로 조정할 수있습니다. (위 글자사이즈는 웹표준 사이즈라고 보시면 되겠습니다.)
css를 통해, h1~h6 태그 가운데 정렬 및 글자크기 조정해보기
h1,h2,h3,h4,h5,h6 {
text-align: center;
}
h1 {
font-size:20px;
}
h2 {
font-size:18px;
}
h3 {
font-size:15px;
}
h4 {
font-size:44px;
}
css파일에다가 위 css코드를 작성하시게 되면, h1~h6태그들을 가운데 정렬 할 수있으며, 글자크기를 임의로 조절할 수있습니다. h1태그는 보통 font-size:2em을 사용하는데 20px로 변경했으니, 더 작은 글씨로 나타납니다.
웹사이트 제작할때
위에서 말씀드린바와 같이, 웹사이트를 제작할때는 seo 측면에서 봤을때, h1태그는 각 페이지 당 하나씩 있는 것이 좋습니다. 이를 참고하셔서, 코딩하셨으면 합니다. 끝!