HTML 제목(Heading)이란?
HTML 제목(헤딩)은 <h1>부터 <h6>까지 총 6개 단계로 구성됩니다. 이 중 <h1>이 가장 높은 중요도를 가지며, <h6>가 가장 낮은 중요도를 나타냅니다. 즉, H1, H2, H3, H4, H5, H6 순서로 제목의 위계가 점점 낮아집니다.
참고: 제목 태그는 구글(Google)과 같은 검색 엔진이 웹페이지의 내용을 색인(indexing)할 때 활용하는 핵심 요소입니다. 따라서 문서의 구조에 맞게 제목 태그를 적절히 사용하는 것은 SEO(검색 엔진 최적화) 측면에서 매우 중요합니다.
일반적으로 페이지에는 하나의 <h1>만 사용하고, 하위 섹션에는 <h2>, 그 아래 세부 항목에는 <h3>를 사용하는 식으로 계층 구조를 지키는 것이 좋습니다.
예제
다음은 HTML 제목 태그를 직접 실습해 볼 수 있는 예제입니다. 텍스트를 입력하고 H1~H6 중 원하는 수준을 선택한 뒤 '미리보기' 버튼을 클릭하면 해당 제목 태그가 적용된 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var headingPreview = document.getElementById("headingPreview");
function changeHeading() {
if(textSelect.value === '')
headingPreview.innerHTML = 'Write a Heading';
else{
for(var i=0; i<6; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true && textSelect.value !== '')
headingPreview.innerHTML ='<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
}
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
1) 텍스트 입력란이 비어 있는 상태에서 '미리보기(Preview)' 버튼을 클릭하기 전:
2) 텍스트 입력란이 비어 있는 상태에서 '미리보기(Preview)' 버튼을 클릭한 후 — 'Write a Heading'이라는 안내 메시지가 표시됩니다:
3) 텍스트를 입력하고 'h6' 라디오 버튼을 선택한 상태에서 '미리보기(Preview)' 버튼을 클릭한 후:
4) 텍스트를 입력하고 'h1' 라디오 버튼을 선택한 상태에서 '미리보기(Preview)' 버튼을 클릭한 후:
