728x90
반응형
HTML의 헤딩(Heading) 요소는 문서의 제목이나 섹션의 제목을 표시하는 데 사용됩니다. HTML에는 여섯 가지 수준의 헤딩 요소가 있으며, 이들은 <h1>에서 <h6>까지의 태그로 표현됩니다. <h1>은 가장 중요하고 큰 제목을 나타내며, <h6>은 가장 덜 중요하고 작은 제목을 나타냅니다.
헤딩 요소의 특징
- 위계 구조: 헤딩 요소는 문서의 구조를 정의하는 데 사용됩니다. 예를 들어, <h1>은 문서의 주요 제목을 나타내고, 그 아래에 <h2>, <h3> 등의 부제목이 올 수 있습니다. 이러한 구조를 통해 문서의 계층을 명확하게 만들 수 있습니다.
- 검색 엔진 최적화(SEO, Search Engine Optimization): 검색 엔진은 헤딩 요소를 사용하여 문서의 주요 주제와 섹션을 파악합니다. 따라서 헤딩을 적절하게 사용하는 것이 SEO에 긍정적인 영향을 줄 수 있습니다.
- 접근성: 스크린 리더와 같은 보조 기술은 헤딩 요소를 사용하여 문서의 구조를 파악합니다. 이를 통해 사용자가 문서를 더 쉽게 탐색할 수 있습니다.
헤딩 요소 사용 예제
아래는 다양한 수준의 헤딩 요소를 사용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>헤딩 요소 예제</title>
</head>
<body>
<h1>이것은 h1 헤딩입니다</h1>
<p>여기에 h1 헤딩 아래에 있는 단락이 있습니다.</p>
<h2>이것은 h2 헤딩입니다</h2>
<p>여기에 h2 헤딩 아래에 있는 단락이 있습니다.</p>
<h3>이것은 h3 헤딩입니다</h3>
<p>여기에 h3 헤딩 아래에 있는 단락이 있습니다.</p>
<h4>이것은 h4 헤딩입니다</h4>
<p>여기에 h4 헤딩 아래에 있는 단락이 있습니다.</p>
<h5>이것은 h5 헤딩입니다</h5>
<p>여기에 h5 헤딩 아래에 있는 단락이 있습니다.</p>
<h6>이것은 h6 헤딩입니다</h6>
<p>여기에 h6 헤딩 아래에 있는 단락이 있습니다.</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>헤딩 요소 예제</title>
</head>
<body>
<h1>이것은 h1 헤딩입니다</h1>
<p>여기에 h1 헤딩 아래에 있는 단락이 있습니다.</p>
<h2>이것은 h2 헤딩입니다</h2>
<p>여기에 h2 헤딩 아래에 있는 단락이 있습니다.</p>
<h3>이것은 h3 헤딩입니다</h3>
<p>여기에 h3 헤딩 아래에 있는 단락이 있습니다.</p>
<h4>이것은 h4 헤딩입니다</h4>
<p>여기에 h4 헤딩 아래에 있는 단락이 있습니다.</p>
<h5>이것은 h5 헤딩입니다</h5>
<p>여기에 h5 헤딩 아래에 있는 단락이 있습니다.</p>
<h6>이것은 h6 헤딩입니다</h6>
<p>여기에 h6 헤딩 아래에 있는 단락이 있습니다.</p>
</body>
</html>
실제 코딩 (좌) 과 실행 결과 (우)
각 헤딩 요소의 용도
- <h1>: 문서의 최상위 제목. 일반적으로 한 문서에 하나만 사용합니다.
- <h2>: 문서 내의 주요 섹션 제목. <h1>의 하위 제목으로 사용됩니다.
- <h3>: <h2>의 하위 섹션 제목으로 사용됩니다.
- <h4>: <h3>의 하위 섹션 제목으로 사용됩니다.
- <h5>: <h4>의 하위 섹션 제목으로 사용됩니다.
- <h6>: <h5>의 하위 섹션 제목으로 사용됩니다.
스타일링
헤딩 요소는 기본적으로 브라우저에 의해 크기와 두께가 지정되지만, CSS를 사용하여 원하는 대로 스타일링할 수 있습니다.
<style>
h1 {
font-size: 2em;
color: navy;
}
h2 {
font-size: 1.5em;
color: darkgreen;
}
/* 나머지 헤딩 요소에 대해서도 원하는 스타일을 지정할 수 있습니다 */
</style>
실제 코딩 (좌) 과 실행 결과 (우)
별도로 이렇게 heading 태그가 있는 이유는
SEO 관점에서 필요한 것이라고 합니다.
저도 나중에 전문 웹개발자가 되면 검색엔진에서 얼마나 잘 검색되게 나오게 할지 고민하는 수준이 되어 있겠죠.
지금은 아무것도 모르지만, 일단 배운대로 문법을 열심히 적용하며 연습하는게 최고인 것 같습니다.
728x90
반응형