..

Search

<h1> - <h6>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<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 {};


연관 페이지

HTML 제목 수업 ⇒


연습문제