2012年07月26日 category : Web tags :

XHTML1.0の種類と記述方法をテンプレートにまとめてみた！

このエントリーをはてなブックマークに追加

xhtml

XHTML1.0で使用される3種類の記述ルールをテンプレートとして用意し、まとめてみました。

サイトやブログを作る際にどのマークアップ言語を使うか考えると思いますが、その選択肢の中に入ってくる言語にXHTML＋CSSがあります。XHTMLは各Webブラウザごとに独自拡張してしまったHTMLをXMLに適合する形で定義しなおしたマークアップ言語です。

HTMLからXHTML1.0になるにあたって、一部の要素や属性が非推奨となりました。XHTML1.0は移行期ということで非推奨タグの取り扱いが異なる3種類の記述ルールが用意されています。3種類とも覚えるのも大変ですのでテンプレートとしてまとめてみました。

METAタグ、文字コードなどは状況に合わせて追加変更してください。例によってテンプレートの使用は自己責任でお願いします＝ω＝

01 . XHTML 1.0 Strict （厳密型） テンプレート

非推奨の要素・属性の使用不可、フレームの使用不可
※以下ハイライトは注意する行

<?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

02 . XHTML 1.0 Transitional （移行型） テンプレート

非推奨の要素・属性の使用が可能。但しフレームの使用は不可

<?xml version="1.0" encoding="UTF-8"?>
<!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" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

03 . XHTML 1.0 Frameset （フレームセット型） テンプレート

非推奨の要素・属性の使用が可能、フレームの使用も可能

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<frameset cols="50%,50%" title="Title">
    <frame src="xxx1.html" name="xxx1" id="xxx1" title="Title1" />
    <frame src="xxx2.html" name="xxx2" id="xxx2" title="Title2" />
    <noframes>
        <body>
        <p>本文</p>
        </body>
    </noframes>
</frameset>
</html>

04 . XHTML 1.0 Frameset の解説

フレームを使用する場合は形式が異なりますので少し解説をいれておきます。</head>直下には<body>要素が置けないため、代わりに<frameset>要素を配置します。上のテンプレートではcolsで左右50％ずつにフレームを分割しています。（上下に分割する場合はrows）

属性値は50%,* と書いてもOKです（50％、残りを1分割という意味になります。残りを3分割する場合は50%,3*とします）

<frameset cols="50%,50%" title="Title">
</frameset>

次にframe要素を使い分割したフレーム内に表示するHTMLファイルを指定します。id、name、title属性を指定します。左側にTitle1が、右側にTitle2が表示されます。

<frameset cols="50%,50%" title="Title">
    <frame src="xxx1.html" name="xxx1" id="xxx1" title="Title1" />
    <frame src="xxx2.html" name="xxx2" id="xxx2" title="Title2" />
</frameset>

フレームに対応していない環境用に<noframes>要素を配置します。フレームに対応しているページでは無視されます。フレームに対応していないページでは代替ページになるため、フレーム部分が表示されていなくても内容が分かるよう構造を意識したページを作成します。

<frameset cols="50%,50%" title="Title">
    <frame src="xxx1.html" name="xxx1" id="xxx1" title="Title1" />
    <frame src="xxx2.html" name="xxx2" id="xxx2" title="Title2" />
    <noframes>
        <body>
        <p>本文</p>
        </body>
    </noframes>
</frameset>

05 . XML宣言、DOCTYPE宣言、名前空間、xmlns属性

XHTMLではXML宣言、DOCTYPE宣言、名前空間、xmlns属性などを指定する必要があります。テンプレートに含まれている部分ですので以下に併せてまとめておきます。

0６ . XHTML1.0 XML宣言と文字コード

HTMLファイル冒頭でXML宣言とMETA内で文字コードの指定を行っています。文字コードはXML宣言部とMETA部で同じ文字コードを指定します。使用する文字コードを指定してください。（※下記SampleはStrictのテンプレを使用しています）

<?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

◯Shift_JISの場合

<?xml version="1.0" encoding="Shift_JIS"?>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

◯EUCの場合

<?xml version="1.0" encoding="EUC-JP"?>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />

◯JISの場合

<?xml version="1.0" encoding="iso-2022-jp"?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp" />

◯UTF-8の場合（省略可能）

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

07 . XHTML1.0 DTD宣言 DOCTYPE宣言

DTD（Document Type Definition：文書型定義）文書構造の宣言部分です。Strict、Transitonal、Framesetで異なります。各違いは上記テンプレート参照してください（※下記SampleはStrictのテンプレを使用しています）

<?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

08 . XHTML1.0 名前空間 xmlns属性とxml:lang属性

名前空間（ネームスペース）を指定します。XHTML1.0ではネームスペース属性に続けてxml:lang属性とlang属性を指定します。xml:lang属性とlang属性には同じ属性値をセットし、jaは日本語という意味です。（※下記SampleはStrictのテンプレを使用しています）

※lang属性はXHTML1.1では廃止されxml:lang属性のみの指定となります。

<?xml version="1.0" encoding="UTF-8"?>
<!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=UTF-8" />
    <meta name="description" content="xxx" />
    <meta name="keywords" content="xxx,xxx" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="css/xxx.css" type="text/css" />
    <title>Title</title>
</head>
<body>
<p>本文</p>
</body>
</html>

以上まとめでした。XHTMLはまだまだ現役のマークアップ言語ですね：）

HOME >>  Web > XHTML1.0の種類と記述方法をテンプレートにまとめてみた！

√ 関連記事：こんな記事も読まれています！

Comments

コメントを残す（反映までしばらくかかります）

*