HTML <h1> ~ <h6> 태그
정의 및 특징
<h1> ~ <h6> 태그는 HTML 문서에서 제목(heading)을 정의할 때 사용합니다.
<h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의합니다.
예제
<h1>이 텍스트는 h1 요소를 사용한 제목입니다.</h1>
<h2>이 텍스트는 h2 요소를 사용한 제목입니다.</h2>
<h3>이 텍스트는 h3 요소를 사용한 제목입니다.</h3>
<h4>이 텍스트는 h4 요소를 사용한 제목입니다.</h4>
<h5>이 텍스트는 h5 요소를 사용한 제목입니다.</h5>
<h6>이 텍스트는 h6 요소를 사용한 제목입니다.</h6>
<p>이 텍스트는 p 요소를 사용한 단락입니다.</p>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <h1> ~ <h6> | 지원함 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 제목 태그(heading tag)의 align 속성을 더 이상 지원하지 않으므로, CSS를 대신 사용해야 합니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
align |
|
left center right justify |
제목 태그(h1~h6)의 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음. |
CSS 기본값
|
h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
|
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
DOM 인터페이스
|
interface HTMLHeadingElement : HTMLElement {}; |
