HTML - 제목 태그 (<h1> ~ <h6>)

 

제목 태그 (<h1>~<h6>)

 

HTML에서 제목을 표시할 때 사용하는 태그

제목의 크기와 중요도를 나타내며, <h1>이 가장 크고 <h6>이 가장 작음

→ 문서의 계층 구조 정의

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

• 웹 문서의 구조를 잡을 때 중요

제목 태그 미리 보기

 

 

 

SEO(Search Engine Optimization, 검색 엔진 최적화)

<h1>은 페이지의 가장 중요한 제목으로 검색엔진이 내용을 분석할 때 참고함

한 페이지에 <h1>은 하나만 쓰는 게 일반적

<h1> : 문서의 주요 주제

(<h2>, <h3>) : 문서의 하위 주제

 

웹 접근성(A11Y:Accessibility)

스크린 리더(시각 장애인을 위한 프로그램)가 제목 태그를 읽어서 문서 구조를 설명

<h1> ~ <h6>을 논리적인 순서로 배치하면 사용자 경험(UX)이 향상됨

→ 단순 글자 크기를 키우고 싶은 경우, CSS를 사용하는 것이 좋음

 

가독성

<h2>, <h3> 등을 활용하면 문서의 구조가 명확해져서 가독성이 좋아짐

 

자동 스타일 적용

브라우저는 기본적으로 <h1>이 크고 <h6>이 작게 보이도록 스타일을 적용함

*CSS로 크기를 조정할 수도 있음

h1 {
  font-size: 32px;
  color: blue;
}
h2 {
  font-size: 28px;
  color: green;
}