- Home ›
- ホームページ作成入門 ›
- 文書の作成
見出し: <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文書を作成して試してみます。
<!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
FireFox3
子要素として持つことができる要素一覧
<h1>タグを使った要素が子要素として持つことができる要素は次の通りです。
ブロックレベル要素:
| タグ | STR | TRA | FRA | X1.1 | XBa |
|---|---|---|---|---|---|
| address | -- | -- | -- | -- | -- |
| blockquote | -- | -- | -- | -- | -- |
| center | -- | -- | -- | -- | -- |
| dir | -- | -- | -- | -- | -- |
| div | -- | -- | -- | -- | -- |
| dt | -- | -- | -- | -- | -- |
| fieldset | -- | -- | -- | -- | -- |
| form | -- | -- | -- | -- | -- |
| h1(～h6) | -- | -- | -- | -- | -- |
| hr | -- | -- | -- | -- | -- |
| isindex | -- | -- | -- | -- | -- |
| menu | -- | -- | -- | -- | -- |
| noframes | -- | -- | -- | -- | -- |
| ol | -- | -- | -- | -- | -- |
| p | -- | -- | -- | -- | -- |
| pre | -- | -- | -- | -- | -- |
| table | -- | -- | -- | -- | -- |
| ul | -- | -- | -- | -- | -- |
インライン要素:
| タグ | STR | TRA | FRA | X1.1 | XBa |
|---|---|---|---|---|---|
| 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 | ○ | ○ | ○ | ○ | ○ |
| テキスト | ○ | ○ | ○ | ○ | ○ |
その他の要素:
| タグ | STR | TRA | FRA | X1.1 | XBa |
|---|---|---|---|---|---|
| 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 )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。