? 見出し: <h1> ~ <h6> - 文書の作成 | HTML5入門

見出し: <h1> ~ <h6>

広告

<h1>タグから<h6>タグは見出しを表します。

<h1> ~ <h6>
要素の形式
<h1>contents</h1>
<h2>contents</h2>
<h3>contents</h3>
<h4>contents</h4>
<h5>contents</h5>
<h6>contents</h6>
DTD
Strict
Transitional
Frameset
XHTML 1.1
XHTML Basic
要素の種類
ブロックレベル要素

文書の中で見出しとして扱いたい部分をh1要素からh6要素までの要素を使い見出しとして設定します。適切な見出しを設定することで文書が構造化され、どのような内容を持った文書なのかを分かりやすくすることができます。

hの後に続く数字の1から6はレベルを表しています。<h1>タグが最も上位であり<h6>タグが最も下位の見出しとなります。

各タグを使った要素の形式は以下の通りです。

<h1>見出し</h1>

h1要素からh6要素までを全て使う必要はありませんが、途中のレベルを飛ばさないで使用するようにします。つまりh1要素とh3要素を使っているのにh2要素は使っていないということが無いようにします。

例えばh1要素からh3要素までを使用する場合は次のような構成となります。

<h1>大見出し</h1>
  <h2>中見出し</h2>
    <h3>小見出し</h3>
      ....
      ....
    <h3>小見出し</h3>
      ....
      ....
  <h2>中見出し</h2>
    <h3>小見出し</h3>
      ....
      ....
    <h3>小見出し</h3>
      ....
      ....

属性

指定可能な属性は以下の通りです。

[属性] align

属性説明
align
(非推奨)
left
right
center
justify
左揃え
右揃え
中央揃え
両端揃え

※ Transitional 及び Frameset のみ使用可能

align属性は見出しを行の中で揃える位置を指定します。実際には次のように使用します。

<h1 align="center">見出し</h1>

非推奨属性の為、位置揃えについてはスタイルシートで設定するようにして下さい。

サンプル

では簡単なHTML/XHTML文書を作成して試してみます。

sample1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>見出し(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)</title>
</head>
<body>

<h1>ホームページの作成</h1>
  <h2>1. はじめに</h2>
    <p>この文章は....</p>
  <h2>2. 作成者紹介</h2>
    <h3>2.1 経歴</h3>
      <p>2005年4月 ...</p>
    <h3>2.2 過去の出版物</h3>
      <p>スタイルシート...</p>

</body>
</html>

表示結果は以下の通りです。

IE7

見出し(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

FireFox3

見出し(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

子要素として持つことができる要素一覧

<h1>タグを使った要素が子要素として持つことができる要素は次の通りです。

ブロックレベル要素:

タグSTRTRAFRAX1.1XBa
address----------
blockquote----------
center----------
dir----------
div----------
dt----------
fieldset----------
form----------
h1(~h6)----------
hr----------
isindex----------
menu----------
noframes----------
ol----------
p----------
pre----------
table----------
ul----------

インライン要素:

タグSTRTRAFRAX1.1XBa
a
abbr
acronym
applet------
b--
basefont------
bdo--
big--
br
button--
cite
code
dfn
em
font------
i--
iframe------
img
input
kbd
label
map--
object
q
ruby--------
s------
samp
select
small--
span
strike------
strong
sub--
sup--
textarea
tt--
u------
var
テキスト

その他の要素:

タグSTRTRAFRAX1.1XBa
area----------
base----------
body----------
caption----------
col----------
colgroup----------
dd----------
del--
dt----------
frame----------
frameset----------
head----------
html----------
ins--
legend----------
li----------
link----------
meta----------
noscript--------
optgroup----------
option----------
param----------
rb----------
rbc----------
rp----------
rt----------
rtc----------
script--
style----------
tbody----------
td----------
tfoot----------
th----------
thead----------
title----------
tr----------

(STR:Strict, TRA:Transitional, FRA:Frameset, X1.1:XHTML 1.1, XBA:XHTML Basic)

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)