HTML Headings
HTML(하이퍼텍스트 마크업 언어)에서 헤딩(Heading) 요소는 페이지의 제목과 섹션을 정의하는 데 사용됩니다. 헤딩은 검색 엔진 최적화(SEO)에 중요한 역할을 하며, 사용자에게 페이지의 구조를 명확히 보여줍니다.
HTML에서는 <h1>부터 <h6>까지 총 6개의 헤딩 태그가 있으며, <h1>은 가장 중요한 제목, <h6>은 덜 중요한 제목을 나타냅니다. 각각의 헤딩은 페이지의 구조와 계층을 시각적으로 구분해주는 역할을 합니다.
각 헤딩의 역할과 중요성
| 태그 | 설명 | 자주 쓰이는 곳 |
|---|---|---|
<h1> |
페이지의 최상위 제목, 가장 중요한 내용 | 웹페이지의 메인 타이틀, 블로그 글 제목 |
<h2> |
섹션의 제목, 두 번째로 중요한 내용 | 웹페이지의 주요 섹션 타이틀, 블로그의 부제목 |
<h3> |
하위 섹션의 제목, 중간 정도의 중요성 | 섹션 내의 소제목, FAQ 페이지의 질문 제목 |
<h4> |
세부 내용의 제목, 중요도 낮음 | 페이지나 문서의 세부 소제목 |
<h5> |
더욱 세부적인 내용의 제목 | 잘 사용되지 않음, 필요한 경우 세부 항목으로 사용 가능 |
<h6> |
가장 덜 중요한 제목, 거의 사용되지 않음 | 매우 세부적인 내용으로 거의 사용되지 않음 |
HTML Heading의 사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings Example</title>
</head>
<body>
<h1>웹사이트 제목</h1>
<h2>첫 번째 섹션</h2>
<h3>첫 번째 섹션의 하위 섹션</h3>
<h4>세부 사항</h4>
<h5>더 세부적인 사항</h5>
<h6>가장 세부적인 사항</h6>
</body>
</html>헤딩의 중요성
- SEO에 기여: 검색 엔진은 페이지의 구조를 이해할 때 헤딩 태그를 참조합니다.
<h1>은 페이지의 주제를 나타내므로, 검색엔진 최적화에 큰 영향을 미칩니다. - 접근성 개선: 스크린 리더기를 사용하는 사용자들은 헤딩을 통해 페이지의 구조를 쉽게 이해할 수 있습니다.
- 가독성 향상: 시각적으로 페이지가 잘 구분되어, 사용자는 콘텐츠를 빠르게 스캔할 수 있습니다.
실제 사용 사례
- 블로그 게시글: 블로그 포스팅에서
<h1>은 제목,<h2>는 주요 소제목으로 사용됩니다. - 문서 페이지: 기술 문서나 매뉴얼에서 각 장이나 섹션에 헤딩을 사용하여 구조화합니다.
- FAQ 페이지: 질문은
<h3>, 답변은 일반 텍스트로 구분해 사용자들이 질문을 쉽게 찾아볼 수 있도록 돕습니다.