コピー&ペーストして使える XHTML テンプレート集

[1] はじめに

ここに書いていることはかなりいい加減なので、正確な情報は

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)
XHTML1.0 の仕様書
HTML 4.01 Specification
HTML4.01 の仕様書

を見てください。

その他、参考になるリンクは

The W3C Markup Validation Service
HTMLの「文法」をチェックしてくれるサービス
Cascading Style Sheets
CSSスタイルシートのホームページ
W3C CSS 検証サービス
CSSの「文法」をチェックしてくれるサービス

[2] 文書全体のかたち

XHTML文書の骨格は下のような感じになります。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
<meta name="author" content=""/>
<meta name="copyright" content=""/>
<meta name="keywords" lang="ja" content=""/>
<meta name="description" lang="ja" content=""/>
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<link rel="stylesheet" href="" type="text/css"/>
</head>
<body>

</body>
</html>

[3] 注意すべき点

まず文字コードです。


<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>

の charset 欄は使用する文字コードに応じて適宜書き換えてください。例えば UTF8 なら charset=utf-8 と EUC-JP なら charset=euc-jp とします。

つぎに著者名、著作権情報、キーワード、概要です。


<meta name="author" content=""/>

の content 属性の値には、文書の著者の名前を入れます。例えば content="ほげ太郎"


<meta name="copyright" content=""/>

の content 属性の値には、著作権表示の文を入れます。例えば content="(c) 2003 Hogehoge" みたいな感じ。


<meta name="keywords" lang="ja" content=""/>

の content 属性の値には、文書のキーワードとなる単語をコンマでつないで書きます。たとえば content="XML,XHTML,スタイルシート"


<meta name="description" lang="ja" content=""/>

の content 属性の値には、文書の大体のあらすじを書きます。例えば content="コピー&ペーストして使えるXHTMLタグ集だよ" みたいな感じ。

それから一番重要なこと。


<title></title>

の内にはかならずタイトル文字を入れます。たとえば


<title>XHTMLタグ集</title>

最後にスタイルシートを使用しないのなら


<meta http-equiv="Content-Style-Type" content="text/css"/>

の行は不要です。

同様に Javascript を使用しないなら


<meta http-equiv="Content-Script-Type" content="text/javascript"/>

の行は不要です。


<link rel="stylesheet" href="" type="text/css"/>

の href 属性の値は外部スタイルシートへのパス名(*.css)です。外部スタイルシートを使用しないのなら、これは不要です。

[4] 他の meta 要素

5秒後に指定URL http://foo.bar.hoge へジャンプ。

    <meta http-equiv="refresh"
      content="5;url=http://foo.bar.hoge" />

[5] よく使うブロック要素

以下、


<body>

</body>

の内に書く要素等を列挙していきます。

[6] 見出し要素


<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

[7] 段落要素


<p></p>
<pre></pre>

[7-1] リスト要素


<ol>
<li></li>
</ol>

<ul>
<li></li>
</ul>

<dl>
<dt></dt>
<dd></dd>
</dl>

<li></li> の内はインライン要素、テキスト、ブロック要素。

dl は定義リストですが、対話文にも応用されます。

dt の t は term の意味です。対話文の場合は話し手の名前がここに来きます。<dt></dt> の内容はインライン要素とテキストに限ります。

dd の d は description の意味です。<dd></dd> の内容はインライン要素、テキスト、ブロック要素です。

[8] テーブル要素


<table>
<caption></caption>
<tr>
<td></td>
</tr>
</table>

<table>
<caption></caption>
<tr>
<th></th>
<td></td>
</tr>
</table>

th はテーブル見出し(head)、td はテーブルデータ(data)の意味です。これらを合わせてテーブルセルと言います。caption 要素は省略可です。

[9] 引用文


<blockquote cite="" title="">
<!-- block要素 -->
</blockquote>

他人の文章を引用するときは、引用文を <blockquote></blockquote> の内に書きます。

cite 属性には引用元のURLを書いておきます。

title 属性には引用文のタイトルを書いておきます。

[10] 連絡先


<address>
</address>

通常、HTMLの最後に入れます。内には連絡先を書いておきます。通常、この要素の直前には


<hr/>

を挿入します。

[11] よく使うインライン要素

インライン要素はブロック要素のなかに置かれる要素です。テキストと併用して用いられます。以下、よく使うインライン要素を列挙していきます。

[12] 強制改行


<br/>

[13] Span要素


<span class=""></span>

スタイルシートでスタイルを指定するのに用います。

[14] アンカー要素


<a href=""></a>
<a href="#"></a>

href 属性の値にはリンク先文書のURLを入れます。

# のあとには要素の id 属性の値を入れます。

[15] 画像リンク要素


<img src="" alt="" height="" width=""></img>

src 属性の値には画像ファイルのURLを指定します。

alt 属性の値には代替テキストを入れます。代替テキストには画像の内容の簡単な説明文を入れればOKです。代替テキストを表示したくないときは属性値を空白にしておきます。

height 属性、width 属性の値にはそれぞれ画像の高さと横幅とをピクセル値で指定します。

[16] フレーズ要素(phrase elements)


<em></em>
<strong></strong>
<cite></cite>
<dfn></dfn>
<code></code>
<samp></samp>
<kbd></kbd>
<var></var>
<abbr title=""></abbr>
<acronym title=""></acronym>

em は「強調」の意を示します。 strong は「より強い強調」の意を示します。

code はプログラムコード、samp はプログラムの出力結果、kbd はキーボード入力文字を示すものとされます。

abbr は「省略語」を書きます。 acronym は英文等でよくある「頭文字を並べた語」です。 abbr や acronym 要素の title 属性の値には正式の名称を書きます。 ただし title 属性は省略可です。

[17] 引用文


<q cite=""></q>

cite 属性の値には引用元のURLを指定します。これは省略可です。

[18] よく使う実体参照

&lt;<
&gt;>
&amp;&
&apos;'
&quot;"