HTMLリファレンス

使い道別の要素索引です。文書を作成する時に必要な、body要素内の要素を記載しております。完全網羅ではありません。

文書作成を作成する準備は、文書作成のはじめにを参照してください。

簡略目次

• 見出しを作る
• 段落を作る
• リンクを張る
• 強調する
• 略語をあらわす
• 用語を定義する
• プログラム関連
• リストを作る
• 引用する
• 画像を置く
• 表を作る
• べた書き
• 学術的記述
• 署名を入れる
• 文書の修正
• レイアウト
• 文字を装飾する

• 要素索引

詳細目次

• 見出しを作る
  • 見出し
• 段落を作る
  • 段落
• リンクを張る
  • リンク
• 強調する
  • 強調
  • より強い強調
• 略語をあらわす
  • 略語
  • 頭文字
• 用語を定義する
  • 定義用語
• プログラム関連
  • コード
  • サンプル
  • キーボード
  • 変数
• リストを作る
  • 序列リストおよび順不同リスト
    • リスト項目
  • 定義リスト
    • 定義の用語
    • 用語の解説
• 引用する
  • ブロックレベルの引用
  • インラインの引用
  • 参照元の明示
• 画像を置く
  • 画像
• 表を作る
  • 表
    • 表題
    • 列のグループ化
      • 列の属性指定
    • 表のヘッダー部
    • 表のフッター部
    • 表の本体部
      • 行
        • 見出しセル及びデータセル
• べた書き
  • 整形済みテキスト
• 学術的記述
  • 添字、肩文字
• 署名を入れる
  • 著者情報
• 文書の修正
  • 挿入、削除
• レイアウト
  • ブロックレベルのコンテナ
  • インラインのコンテナ
  • 双方向アルゴリズムの上書き
  • 水平線
  • 改行
• 文字を装飾する
  • 等幅テキスト
  • イタリック体
  • ボールド体
  • 大きい文字
  • 小さい文字

• 要素索引

見出しを作る

見出し（h1〜6要素）

h1〜6要素には1から6までのレベルがあります。h1要素、h2要素、h3要素、h4要素、h5要素、h6要素です。<h1>要素索引</h1>のような記述の仕方をします。

見出しレベルは数字が若いほど上位の見出しを表します。見出しレベルは飛ばさない方がよいという向きもあります。詳しくは、やってしまいがちなテクニック　間違えがちな要素　h1〜h6要素（heading）を参照してください。

段落を作る

段落（p要素）

p要素は段落を作る要素です。

<p>このサイトはサイトを作成する際に生じる問題を取り扱っています。</p>
<p>多くの問題は間違ったネチケット（<span class="annotation">ネット上でのエチケット</span>）サイトや間違ったリファレンスサイトが原因でしょう。</p>

のような記述の仕方をします。

body要素直下に生のテキストを置く事は出来ませんので、段落ごとにp要素でマークアップする必要があります。

リンクを張る

リンク（a要素）

<a href="#confirmation" name="list_confirmation">確認すること</a>

リンク先指定（href属性）

href属性はハイパーリンクを生成します。属性値にURIを指定してください。リンク先のファイルの種類に制限はありません。画像に対して直接リンクを張ったり、音楽ファイルへのリンクを張ったりすることも可能です。

<a href="http://www.rju666.com/web/index.html">サイト作成における問題</a>

mailto:と付けることによってメールを送れるようにすることも可能です。

<a href="mailto:rju@rju666.com">rju@rju666.com</a>

href属性の属性値をname属性の属性値の先頭に#を付けたものとすることで、name属性で明示したアンカーへのリンクを作成することが可能です。ページ内リンクなどと呼ばれ、name属性の位置がページの先頭に来るようにスクロールされた状態で表示されます。

<a href="link.html#how">リンクを張る時の心得</a>

リンク先での挙動（直接ブラウザに表示したり、他のアプリケーションが起動して表示したり、ダウンロードが開始されたり）はMIMEタイプやブラウザの設定によります。

内容の文字列には特に制限はありませんが、参照先のファイルの情報を表す言葉を用いるべきでしょう。「こちら」などの表現は適切とはいえません。参照先のファイルのtitle要素の内容などを用いると無難かと思われます。

リンク位置指定（name属性）

a要素のname属性は、href属性のアンカーとしての役割を持ちます。ページ内の特定の位置にname属性を与えることによって、href属性で参照させることが可能です。

要素の内容を空にしてはいけません。

<a name="how"></a>

参照する先の文字を内容としてください。

<a name="how">リンクを張る時の心得</a>

強調する

強調

強調したい文字列をem要素でマークアップしてください。

<p>とりあえず、<em>リュックサック</em>だけは大切にしてね。</p>

より強い強調

より強く強調したい文字列はstrong要素でマークアップしてください。

<p>絶対に、<strong>リュックサック</strong>は大切にするのだぞ。</p>

略語をあらわす

略語

略語であることをあらわします。略さない正式な形をtitle属性で示します。

略語の元の文章をあらわす（title属性）

読み上げに用いられたり、あるいは他の略語と混同されずに済むことが期待されます。

<abbr title="Hypertext Markup Language">HTML</abbr>

HTML

頭文字

頭文字であることをあらわします。略さない正式な形をtitle属性で示します。

頭文字の元の文章をあらわす（title属性）

読み上げに用いられたり、あるいは他の略語と混同されずに済むことが期待されます。

<acronym title="time place occasion">TPO</acronym>

TPO

頭文字なのか、略語なのかの判別がつきにくい場合は、abbr要素を用いると無難です。

用語を定義する

定義用語

特定の用語を定義するときに用います。「特殊な使い方がされている単語」「特殊な単語」などに使ってください。

<p>それは<dfn>ブラフマーストラ</dfn>と呼ばれていた。</p>
<p>ランカー島を焼き滅ぼしたと言われる神の兵器である。</p>

プログラム関連

コード

コードを表します。

<p>スタイルシートで<code>font-size : 0.8em;</code>と記述します。</p>

サンプル

出力サンプルを示します。

<p>このスクリプトを実行すると<samp>Hello! World!</samp>と表示されます。</p>

キーボード

ユーザーが入力する部分を表します。

<p>パスワード入力欄に<kbd>test</kbd>と入力してログインできます。</p>

変数

プログラムの変数（状況によって可変する部分）を示します。

<p>a要素のhref属性でhref="<var>リンク先URI</var>"と記述します。</p>

<p><var>$password</var>を参照して、認証を行います。</p>

リストを作る

序列リスト（ol要素）および順不同リスト（ul要素）

ol要素は、内容（li要素）を順序のあるリストとします。li要素の行頭に連番が与えられます。

ul要素は、内容（li要素）を順不同のリストとします。箇条書きなどをマークアップしてください。li要素の行頭に中黒などが与えられます。

li要素のみ内容とすることが出来、一つ以上のli要素が必要です。

<ol>
<li>宝田</li>
<li>山下</li>
<li>高田</li>
</ol>

<ul>
<li>鮭弁当</li>
<li>靴下</li>
<li>ビール2ケース</li>
</ul>

リスト項目（li要素）

li要素はol要素、ul要素の子要素です。ol要素、ul要素の中にしか書けません。

定義リスト（dl要素）

dl要素は、定義される用語（dt要素）とその定義（dd要素）のリストを作成するときに用います。基本的にdd要素は直前のdt要素の解説となりますので、定義される用語（dt要素）とその定義（dd要素）の繰り返しで記述されます。

<dl>
<dt>呼吸法</dt>
<dd>息を吸ったり吐いたりする方法。</dd>
<dt>根拠は無いんですけど</dt>
<dd>根拠が無い時に使用する言葉。</dd>
</dl>

dt要素だけ、あるいはdd要素だけという記述の仕方も可能です。

一つの用語に対して複数の意味、あるいは複数の用語に対して一つの意味、という記述も可能です。

<dl>
<dt>インスパイア[inspire]</dt>
<dd>吹き込む、の意。</dd>
<dd>ネタや企画、発想などをパクった時に使う。</dd>
</dl>

<dl>
<dt>うつけ</dt>
<dt>たわけ</dt>
<dd>罵倒</dd>
</dl>

応用として、発言者をdt要素でマーク付けをし、発言内容をdd要素でマーク付けをする対話を表現することもできます。

定義される用語（dt要素）

用語の解説（dd要素）

引用する

ブロックレベルの引用（blockquote要素）

ブロックレベルの引用です。blockquote要素はブロックレベル要素ですが、body要素と同様にブロックレベル要素のみを内容とできます。cite属性を用いて引用元URIを記述することや、cite要素と組で使って参照元を明示することができます。

<blockquote><p>参照したい項目がありましたら、アンカー（<span class="annotation">A要素のname属性</span>）が指定してありますのでそれをご利用下さい。</p></blockquote>

インデントしてレンダリングされることが多いですが、インデントのためにblockquote要素を使用することはお勧めできません。詳しくはblockquote要素で代用するデメリットを参照してください。

引用元URIの明示（cite属性）

URI for source document or msg（citation）

cite属性は、引用文の引用元URIを表します。

<blockquote http://www.rju666.com/web/mistakable.html><p>blockquote要素は、多くのブラウザではインデント（左右にスペースが空く）してレンダリングされるでしょう。しかしblockquote要素はその文章が「引用」であることを表す要素で、結果的にインデントされるだけであって、見栄えを定義する要素ではありません。</p></blockquote>

<p><q cite="http://www.rju666.com/web/link.html">著者は「リンクはトップに張るもの」だと思い込んでいた</q>とある。</p>

インラインの引用（q要素）

インラインの引用です。インライン中に出現する引用をマークアップします。cite属性を用いて引用元URIを記述することや、cite要素と組で使って参照元を明示することができます。

<p>彼は<q>ラッキーだからいいんだよ</q>と言っていたよ。</p>

引用元URIの明示（cite属性）

cite属性はblockquote要素のものと同様です。

参照元の明示（cite要素）

ネット上に存在するリソースからの引用でない場合、cite属性で引用元を明らかにすることは出来ません。その場合は、cite要素とセットで使うことによって引用元を表記することが出来ます。

<blockquote><p>頑張ったけど、ダメだったよ</p></blockquote>
<p><cite>太郎のメモ帳</cite>にはこう書いてあった</p>

<p><cite>Rju</cite>の主張は、<q>頑張るのは持続が必要なので嫌だ</q>というものであった。</p>

画像を置く

画像（img要素）

img要素は画像を置くことが可能です。画像ファイルのURIを記述するsrc属性、画像の代わりとなる代替文字列を記述するalt属性、画像の縦、横のサイズを指定するheight属性、width属性は必要属性です。必ず指定してください。

<img src="disc.gif" alt="大きな円盤" height="120" width="120">

画像URI指定（src属性）

img要素の必要属性です。属性値には画像ファイルのURIを記述します。

画像代替文字列（alt属性）

img要素の推奨属性です。属性値には画像の代わりとなる代替文字列を記述します。画像の解説を書かれる方もおられますが、代替文字列は画像の代わりに使われるテキストであるべきです。ですので、以下のような記述は避けた方がよいです。

<img src="foot.jpg" alt="とても臭いです" height="360" width="230">

画像が表示されていなくても、意味が通じるような文字列を記述して下さい。

<img src="foot.jpg" alt="洗っていない足" height="360" width="230">

画像サイズ指定（height属性、width属性）

img要素の推奨属性です。画像の縦、横のサイズを指定します。画像を表示する際画像のサイズが不明ですと、画像が読み込まれたときに画像のサイズ分ずれるという現象が起こったりします。

表を作る

表(table要素)

table要素は内容とする項目が多いため、少々難しくなっております。

<table summary="武器と防具の効果の表">
 <caption>武器と防具の効果</caption>
 <colgroup span="1"></colgroup>
 <colgroup>
  <col span="3" class="attack">
  <col span="1" class="comment">
 </colgroup>
 <thead>
  <tr>
   <th rowspan="2">種類</th><th>斬撃</th><th>打撃</th><th>叩き切り</th><th rowspan="2">コメント</th>
  </tr>
  <tr>
   <th>槍、刃物など</th><th>鈍器など</th><th>剣、斧など</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td></td><td colspan="2">有利不利が存在する<td>万能だが得意がない</td><td></td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>ハード</td><td>有利</td><td>不利</td><td>通常</td><td>鈍器に弱い</td>
  </tr>
  <tr>
   <td>ソフト</td><td>不利</td><td>有利</td><td>通常</td><td>斬撃に弱い</td>
  </tr>
  <tr>
   <td>重ね着</td><td>通常</td><td>通常</td><td>通常</td><td>万能だが普通</td>
  </tr>
 </tbody>
</table>

レイアウトのためにtable要素を使用することはお勧めできません。詳しくはテーブルレイアウトを用いるデメリットを参照してください。

summary属性

summary属性は表自体の概説を記述します。音声ブラウザや点字ブラウザなど表自体が見えない環境で使用されて何の表であるかがわかるようにしておくとよいでしょう。

表題（caption要素）

表の題名を記述します。

列のグループ化（colgroup要素）

列をグループ化します。span属性で何列分をグループ化するか指定できます。

数（span属性）

属性値分の列数が指定されます。

<colgroup span="3"></colgroup>

上記の例の場合、左から3列目までをグループ化しています。

また、col要素を内容として列をグループ化することも可能です。

列の属性指定（col要素）

列をグループ化します。span属性で何列分をグループ化するか指定できます。

数（span属性）

属性値分の列数が指定されます。複数のcol要素を用いる場合は、前の属性値の次の列から適応されます。

<colgroup>
 <col span="2">
 <col span="4">
</colgroup>

上記の例の場合、左から2列目まで、3列目から6列目までをグループ化しています。

表のヘッダー部（thead要素）

表のヘッダー部分に該当する行をグループ化します。

<thead>
 <tr>
  <th>日付</th><th>回数</th><th>金額</th>
 </tr>
</thead>

上記の例の場合、見出し要素の部分をヘッダーとしてグループ化しています。

表のフッター部（tfoot要素）

表のフッター部分に該当する行をグループ化します。多くの視覚系ユーザーエージェントでは表の最下部に表示するようにレンダリングするものと思われますが、必ずしも最下部に表示されるとは限りません。tfoot要素はthead要素の直後、tbody要素より前にに出現します。

表の本体部（tbody要素）

表の本体部分に該当する行をグループ化します。表の本体が一つだけで、thead要素、tfoot要素が存在しない場合を除いて常に必要です。

行（tr要素）

tr要素は、行を指定します。tr開始タグの後のth要素（またはtd要素）が行の開始を表します。

見出しセル及びデータセル（th要素、td要素）

th要素は、それが見出しセルであることを表します。td要素は、データを内包するセルを表します。

colspan属性で複数列、rowspan属性で複数行にまたがらせる事が可能です。

列の数（colspan属性）

属性値はまたぐ列の数を表します。

<tr>
 <th>山</th><th>川</th><th>海</th>
</tr>
<tr>
 <td colspan="2">好きとも嫌いとも言い難い</td><td>漁師の子なので好き</td>
</tr>

上記の例の場合、最初の行の最初のセル山と次のセル川に対し、次の行の最初のセルで好きとも嫌いとも言い難いと示しています。次のセルはまたがられているので記述しません。次のセルは3列目に該当することになります。

colspan属性のサンプル

山	川	海
好きとも嫌いとも言い難い		漁師の子なので好き

行の数（rowspan属性）

属性値はまたぐ行の数を表します。

<tr>
 <th rowspan="2">赤色の食べ物</td><td>リンゴ</td>
</tr>
<tr>
 <td>トマト</td>
</tr>
<tr>
 <th>紫色の食べ物</td><td>なすび</td>
</tr>

上記の例の場合、最初の行の最初のセルの赤色の食べ物が下のセルにまたがっています。次のセルリンゴと次の行2列目のセルトマトの見出しとなるわけです。

rowspan属性のサンプル

赤色の食べ物	リンゴ
	トマト
紫色の食べ物	なすび

べた書き

整形済みテキスト（pre要素）

整形済みのテキストを書くときに使います。改行などの位置がそのまま反映されます。img要素を内容とすることはできません。

ソースや詩などを記述したいときに使うといいでしょう。

<pre>改行などが
そのまま反映されます。
<em>強調</em>なども適応されます。</pre>

改行などが
そのまま反映されます
強調なども適応されます。

学術的記述

添字、肩文字（sub要素、sup要素）

sub要素は添字（下付き文字）を、sup要素は肩文字（上付き文字）をそれぞれマークアップします。

数式、化学記号やフランス語などをマークアップするときに使用しますが、小さな文字にしたいなどという理由で使うことはお勧めできません。その場合はスタイルシートを用いて、font-sizeプロパティでサイズを指定することをお勧めします。

H₂O

πr²

署名を入れる

著者情報（address要素）

address要素は、ページ著者の情報を記載するときに使います。名前、メールアドレスなどを記述してください。

<address>
<a href="mailto:rju@rju666.com">rju@rju666.com</a>
</address>

文書の修正

挿入、削除（ins要素、del要素）

ins要素はブロックレベル要素あるいはインライン要素、通常のテキストが挿入されたことを表すマークアップ、del要素はブロックレベル要素あるいはインライン要素、通常のテキストが削除されたことを表すマークアップです。修正された日時をdatetime属性で記述することが出来ます。

<p>山田を見ていた。</p>
<ins datetime="2003-10-18T22:22:08+09:00"><p>いや、睨んでいたというべきか。</p></ins>
<p>彼はまるで気付かないでいた。</p>

ブロックレベル要素が挿入されたことを表しています。

<p>振り返った。</p>
<del datetime="2003-10-18T22:24:42+09:00"><p>なんか、腰の骨が鳴った。</p></del>
<p>眼前に広がる景色に、心が動いた。</p>

ブロックレベル要素が削除されたことを表しています。

<p>彼の目が<ins>とても</ins>嫌いだった。</p>

通常のテキストが挿入されたことを表しています。

<p>お前は<del>きっと</del>過去に縛られている。</p>

通常のテキストが削除されたことを表しています。

del要素とins要素と併用することで、文章が書き換えられたことを表すことも可能です。

<p>出発の予定は<del>10時</del><ins>8時半</ins>ですよ。</p>

引用元URIの明示（cite属性）

URI for source document or msg（citation）

cite属性は、引用文の引用元URIを表します。

日時（datetime属性）

datetime属性で要素を用いた日時を付記します。西暦（4桁）-月（2桁）-日T（区切り）時間（2桁）:分（2桁）:秒（2桁）タイムゾーンという記述の仕方をします。Tは日付と時間の区切り子です。時間は24時間制で記述します。タイムゾーンは、標準時の場合は大文字でZ、日本の場合は+09:00となります。2003年10月18日午後9時41分6秒の日本ですと、以下のようになります。

datetime="2003-10-18T21:41:06+09:00"

レイアウト

ブロックレベルのコンテナ（div要素）

div要素は、ブロックレベル要素のコンテナを作ります。

<div>
<h1>たかしの事</h1>
<p>たかしについてあれこれ書きます。</p>
<ul>
<li>名前の由来
<li>生年月日の謎
<li>戦歴
</ul>
</div>

上記の例では見出しや本文などを一括りにしています。

インラインのコンテナ（span要素）

span要素は、インライン要素のコンテナを作ります。span要素自体に何も意味は含まれていません。

双方向アルゴリズムの上書き（bdo要素）

bdo要素はdir属性を用いて書字方向を強制します。

書字方向（dir属性）

属性値にはltr（left to right（左から右））とrtl（right to left（右から左））があり、文字列の書字方向アルゴリズムを上書きします。

これは、左から右へ表示する言語と右から左へ表示する言語が混在する文書で、ある範囲のテキストについて双方向アルゴリズムを無効にするときに使用します。

水平線（hr要素）

hr要素は、水平線を引きます。空要素なので終了タグはありません。

改行（br要素）

強制改行をします。通常ブラウザは、幅に合わせて自動的に折り返してくれるのであまり使う必要はありません。

文字を装飾する

文字を装飾する要素です。この要素は非推奨ではありませんが、見栄えに関係しているのでスタイルシートを用いる方がよいかと思われます。

等幅テキスト（tt要素）

等幅フォントでレンダリングさせます。

スタイルシートを用いて、font-familyプロパティにmonospaceを指定することをお勧めします。

イタリック体(i要素)

イタリック体でレンダリングさせます。

スタイルシートを用いて、font-styleプロパティにitalicを指定することをお勧めします。

強調が目的でしたら、em要素、strong要素などを使用した方がいいでしょう。

ボールド体(b要素)

ボールド体でレンダリングさせます。

スタイルシートを用いて、font-weightプロパティにboldを指定することをお勧めします。

強調が目的でしたら、em要素、strong要素などを使用した方がいいでしょう。

大きい字(big要素)

大きい字でレンダリングさせます。

スタイルシートを用いて、font-sizeプロパティでサイズを指定することをお勧めします。

強調が目的でしたら、em要素、strong要素などを使用した方がいいでしょう。

小さい字(small要素)

小さい字でレンダリングさせます。

スタイルシートを用いて、font-sizeプロパティでサイズを指定することをお勧めします。

強調が目的でしたら、em要素、strong要素などを使用した方がいいでしょう。

• サイト作成における問題
• HTML/CSS解説
• HTMLリファレンス

参照

• HTML 4.01 仕様書邦訳概説
• ばけらの HTML リファレンス

• 2004.8.28　変数を誤解していたので修正。
• 2003.11.23　双方向アルゴリズムの上書き追記。
• 2003.11.17　学術的記述、文字を装飾するを追記。
• 2003.9.18　強調する　略語をあらわす　用語を定義する　プログラム関連　追加
• 2003.9.17　改行　表を作る　要素索引　追加
• 2003.9.6　画像を置く　追加
• 2003.9.5　リストを作る　追加。HTML/CSS解説を分離。
• 2003.9.3　公開。現状での制作予定「リスト」「テーブル」「画像」「論理強調」「整形済み」あたり。