[HTML 기초] <h1> - <h6> : 제목 태그

<h1> ~ <h6> 요소

<h1>부터 <h6>까지는 HTML에서 제목이나 섹션 제목을 표현하기 위해 사용되는 태그이다. 보기에는 비슷해 보이지만, 각 태그는 문서의 계층 구조를 표현하는 중요한 의미를 가진다.

총 6가지 제목 태그

• <h1>: 페이지의 최상위 제목을 나타내는 태그. 한 페이지에 하나만 존재해야 한다. 최상위 주제가 두 개일 수는 없기 때문이다.
• <h2> ~ <h6>: 하위 섹션 제목을 나타내는 태그이다.
  <h2>는 <h1>의 하위 제목이고, <h3>는 <h2>의 하위 제목이다. 이와 같이 계층 구조를 형성한다.

제목 계층의 중요성

• <h2>와 <h1>이 없으면 <h3>는 존재할 수 없다.
• <h1> ~ <h5>가 없다면 <h6>는 존재할 수 없다.
• 제목 단계를 뛰어넘으면 사용자에게 혼란을 줄 수 있다.
  예를 들어, <h3>를 사용하는데 앞에 <h2>가 없는 경우이다.

접근성과 SEO에 미치는 영향

• 제목 태그는 웹 페이지의 계층 구조를 나타내기 때문에 화면 리더기 사용자에게 문서의 구조를 전달하는 데 중요한 역할을 한다.
• 제목 태그의 올바른 사용은 SEO(Search Engine Optimization)에도 영향을 미친다.
  • <h1> 태그는 페이지의 주요 주제를 나타내므로 적절한 키워드를 포함해야 한다!

글씨 크기와 의미의 분리

• 폰트 사이즈를 바꿀 수는 있지만, 각각의 숫자에는 앞서 말했듯 고유한 의미가 있다. 따라서 글씨 크기를 위해 제목 태그를 사용하면 안 된다.
• 각 섹션의 제목의 의미로 제목 태그를 사용하고, 글씨 크기 조정은 CSS를 통해 해야 한다.
• CSS로 글자 크기를 조정하고 스타일을 적용하여 시각적인 요소를 수정하되, 태그의 의미를 훼손하지 않도록 주의해서 사용해야 한다.

HTML 제목 태그 예시

<h1>최상위 제목</h1>
<h2>하위 제목 1</h2>
<h3>하위 제목 1-1</h3>
<h2>하위 제목 2</h2>
<h3>하위 제목 2-1</h3>