반응형
HTML 제목 태그 <h1> ~ <h6>의 종류와 개념
제목(h1~h6 요소)에는 h1 요소, h2 요소, h3 요소, h4 요소, h5 요소, h6 요소, 이렇게 여섯 단계가 있습니다.
<h1> 요소는 큰 제목, <h2>는 중간 제목, <h3>는 작은 제목으로 사용하며, <h4>~<h6> 요소는 필요에 따라 <h3> 이하의 제목에 사용하는게 기본입니다.
보통 <h1>이 가장 크게 표시되며 <h6> 요소가 가장 작게 표시됩니다. 각각의 크기는 브라우저에 의존하지만 CSS의 font-size 속성으로 임의이 크기를 지정할 수도 있습니다.
<body>
<h1>제목1 입니다.</h1>
<h2>제목2 입니다.</h2>
<h3>제목3 입니다.</h3>
<h4>제목4 입니다.</h4>
<h5>제목5 입니다.</h5>
<h6>제목6 입니다.</h6>
</body>h1~h6 요소의 계층 구조에 주의
예컨데 h1 요소 다음에 h3 요소 지정은 계층 구조를 지키지 않은 것이 됩니다. 즉 h1 요소 다음에는 h2 요소, 그 다음에는 h3 요소 같이 제목을 순서에 맞게 작성해야 합니다.
<!-- 이 계층 구조는 좋지 않은 예시입니다. -->
<body>
<h1>제목1 입니다.</h1>
<h3>제목3 입니다.</h3>
<h2>제목2 입니다.</h2>
</body>
여러 검색 엔진은 각 웹사이트의 내용을 <h> 태그를 이용하여 키워드를 수집하고 내용을 크롤링 합니다. 따라서 HTML 문서에 포함되는 제목을 <h> 태그로 작성해야 SEO (검색 엔진 최적화)에도 도움을 받을 수 있습니다.
그리고 원칙적으로 h1 요소는 하나의 문서에 하나만 지정합니다.
<!-- 이 계층 구조는 좋지 않은 예시입니다. -->
<body>
<h1>제목1 입니다.</h1>
<h2>제목2 입니다.</h2>
<h1>제목1 입니다.</h1>
</body>
h1~h6 요소는 최대 여섯 계층의 제목 단계밖에 지정할 수 없는 문제가 있어서 <section> 요소를 활용할 수 있습니다.
정리
- <h1> ~ <h6> 태그는 6단계의 제목(heading)을 나타냅니다.
- <h1> 태그가 가장 높은 단계 <h6> 단계가 가장 낮은 단계입니다.
- <h1> ~ <h6> 태그는 글씨 크기의 변화만을 의미하지 않습니다. 글씨 크기는 CSS의 font-size로 변경 가능합니다.
- <h1> ~ <h6>의 단계적 계층 구조를 지켜야 합니다. <h1> 다음은 <h3>가 아니라 <h2>.
- 한 페이지에 <h1> 태그는 한 번만 사용해야 합니다.
참고 도서
- XHTML과 CSS로 만드는 '바른' 웹사이트, 웹표준 교과서 (2010, 마시코 타카히로, 디지털미디어리서치)
반응형
댓글