HTML <h1>부터<h6> 태그

정의와 사용법

<h1> 부터 <h6> 태그는 HTML 제목을 정의하는 데 사용됩니다.

<h1> 가장 중요한 제목을 정의합니다.<h6> 가장 중요하지 않은 제목을 정의합니다.

주의

각 페이지에 하나만 사용하세요 <h1> - 이는 전체 페이지의 주요 제목/주제를 대표해야 합니다. 또한, 제목 수준을 건너뛰지 마세요 - <h1> 시작하고, 그런 다음 사용하십시오}} <h2>이를 따라서。

h 요소는 명확한 의미를 가지고 있으므로, 문서 구조를 구축하는 데 적절한 레벨의 태그를 선택하는 데 주의하십시오. 따라서, 동일한 줄에서 글자 크기를 변경하기 위해 제목 태그를 사용하지 마십시오. 대신, 아름다운 표시 효과를 얻기 위해 캐시드 스타일 시트 정의를 사용해야 합니다。

HTML 태그 선택 및 사용에 대한更多信息를 원하시면，《웹 품질》。

추가로 참조하십시오：

HTML 강의：HTML 제목

HTML DOM 참조 매뉴얼：Heading 객체

예제

예제 1

여섯 가지 다른 HTML 제목：

<h1>이는 제목 1입니다</h1>
<h2>이는 제목 2입니다</h2>
<h3>이는 제목 3입니다</h3>
<h4>이는 제목 4입니다</h4>
<h5>이는 제목 5입니다</h5>
<h6>이는 제목 6입니다</h6>

직접 시험해 보세요

예제 2

제목의 배경색과 텍스트 색상을 설정하십시오（CSS를 사용하여）：

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

직접 시험해 보세요

예제 3

제목의 정렬 방식을 설정하십시오（CSS를 사용하여）：

<h1 style="text-align:center">이는 제목 1입니다</h1>
<h2 style="text-align:left">이는 제목 2입니다</h2>
<h3 style="text-align:right">이는 제목 3입니다</h3>
<h4 style="text-align:justify">이는 제목 4입니다</h4>

직접 시험해 보세요

전역 속성

<h1> - <h6> 태그는 또한 HTML에서의 전역 속성。

이벤트 속성을 지원합니다

<h1> - <h6> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <h1> 요소:

예제 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

직접 시험해 보세요

대부분의 브라우저는 다음 기본 값으로 표시합니다 <h2> 요소:

예제 2

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> 요소:

예제 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

직접 시험해 보세요

대부분의 브라우저는 다음 기본 값으로 표시합니다 <h4> 요소:

예제 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

직접 시험해 보세요

대부분의 브라우저는 다음 기본 값으로 표시합니다 <h5> 요소:

예제 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

직접 시험해 보세요

대부분의 브라우저는 다음 기본 값으로 표시합니다 <h6> 요소:

예제 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

직접 시험해 보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원