HTML 사전

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) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원          

참고

댓글

댓글 본문
  1. engfordev
    아주 잘 해주셨습니다~ 읽으면서 저같은 일반인도 편하게 읽히네요~
    훔.. 그나저나 user agents..가 가리키는 것이 뭘까요? 사용자? 아니면 웹페이지를 만드는 사람일까요?
    용어사전에 의문을 올려 두었습니다 ^^https://docs.google.com/spread...
    그리고... h1 ~ h6을 사용하면 목차를 자동으로 만들 수 있나보네요? 훔.. 어떻게 만드는지 궁금해지는 1人입니다...
버전 관리
마법부리는곰
현재 버전
선택 버전
graphittie 자세히 보기