h1 ~ h6

설명

Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

문서의 제목이라고 할 수 있는 Heading 요소는 총 6단계로 구현한다. <h1>요소가 가장 큰 제목이고 <h6>요소가 가장 작은 제목이다. 표제(Heading)요소는 어떠한 섹션의 주제를 표현한다. 마치 논문을 작성할 때 서론 본론 결론의 대 제목과 각각의 대 제목에 대한 소 제목과 같은 역할을 하는 것이다. 표제 정보는 사용자가 사용하는 웹브라우저에 의해 활용된다. 문서의 목차를 자동으로 만들 수 있는 것을 예로 들 수 있다.

Usage Context

Permitted content	Phrasing content
Tag omission	None, must have both a start tag and an end tag.
Permitted parent elements	<hgroup>, or any element that can accept Flow content. The <h1> element must not be a descendant of an <address> element.
Normative document	HTML 5, section 4.4.6; HTML 4.01, section 7.5.5

속성

이 엘리먼트는 전역속성을 지원한다.

The align attribute is Deprecated in HTML 4.01 and Obsolete in HTML5.

표제 태그에서의 align 속성은 HTML 4.01에서는 비권장 속성이고, HTML5에서는 완전히 사용되지 않는다.

예제

표제의 모든 단계

<h1>생활 코딩</h1>
<h2>생활 코딩 공동번역</h2>
<h3>2차 공동번역</h3>
<h4>h1 ~h6에 대한 번역</h4>
<h5>표제(Heading)에 대한 설명</h5>
<h6>표제(Heading)에 대한 예시</h6>

예제 페이지

<h1>생활 코딩</h1>
<h2>생활활 코딩 공동번역</h2>
<p>누구나 코딩하는 세상을 만들고자 공동번역을 시작하게 되었습니다.</p>

<h3>2차 공동번역</h3>
<h4>h1 ~ h6에 대한 번역</h4>
<p>여러가지 요소중에서 제목(Heading)에 대한 내용을 소개하도록 하겠습니다.</p>

<h5>표제(Heading)에 대한 설명</h5>
<p>표제요소는 각 페이지의 내용을 요약하여 제목으로 표현하는 요소입니다.</p>

<h6>표제(Heading)에 대한 예시</h6>
<p>여러분들께 이렇게 예시로 설명드리고 있습니다. 이해가 가시나요?</p>

참고 : 
Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
 
Avoid skipping heading levels: always start from <h1>, next use <h2> and so on. Also try to have only one first level heading on a page.
 
In HTML5, use the <section> element to define the outline of a document. Headings provide titles for sections and subsections. You can also group a heading and its content using the <div> element.

참고 : 
표제요소의 폰트 크기를 줄이려고 <h1>을 사용해야 할 것을 <h2>나 <h3>으로 낮추지 않는다 : 단, 폰트 크기를 줄이고 싶은 경우에 CSS의 font-size속성을 이용한다.

표제의 단계를 건너 뛰지 않는다 : 항상 <h1>을 먼저 사용하고, 그 다음 단계에서는 <h2>, 그 다음 단계는 <h3>을 사용하도록 한다. 그리고 하나의 페이지에서는 꼭 하나의 1단계 제목(<h1>)만 있도록 한다.

HTML5에서, 문서의 개요(아웃라인)을 정하기 위해서는 <section> 요소를 사용한다 : 표제는 섹션과 서브섹션에 제목을 부여한다. 또한, 표제와 그 표제의 내용을 <div> 요소를 사용해 묶을 수도 있다.

DOM Interface

This element implements the HTMLHeadingElement interface.

이 요소는 HTMLHeadingElement  인터페이스를 구현한다.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원

참고

• https://developer.mozilla.org/en/HTML/Element/h1
•  <p> HTML element
• <div> HTML element
• <section> HTML element