BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

XHTML1.0への移行

Home > XHTMLへの移行 > XHTML1.0への移行

移行準備が完了しましたら、いよいよXHTML1.0に移行します。

XHTMLにおける初めての文書型であるXHTML1.0は、HTML4.01を最形式化したものです。ここでは、XHTML1.0への移行方法について触れていきます。

XML宣言

XHTMLはXMLに適合しており、これを明示するためのXML宣言を文頭に記述します(*1)。文字コードがUTF-8またはUTF-16である場合には省略することも可能ですが、それ以外の文字コード(Shift_JISやEUC-JP等)を利用する場合には必須です。

<?xml version="1.0" encoding="Shift_JIS"?>

現在XMLのバージョンは1.0のみです。encoding属性には文書の文字コードを指定します。但し古いブラウザはencoding属性を認識できないので、同時にmeta要素でも指定しておきましょう(*2)。

<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS" />

文書型宣言

XHTML1.0はHTML4.01を再形式化したものであり、HTML4.01と同様に3種類の文書型宣言が定義されています。文書型宣言はXHTML文書において必須です。

  1. XHTML1.0 Strict(厳密型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

  2. XHTML1.0 Transitional(移行型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

  3. XHTML1.0 Frameset(フレーム設定型)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

仕様の詳細につきましては、XHTML 1.0 specification又はXHTML 1.0 仕様書翻訳をご覧ください。

名前空間

名前空間とは要素の名前を示すものであり、XHTML以外に様々なものが存在します。XHTML文書であることを示すには、XHTML最大の親要素であるhtml要素の開始タグで名前空間を指定します。

<html xmlns="http://www.w3.org/1999/xhtml">

言語コード

xml:lang属性を用いて、XHTML文書がどこの国や地域の言語で記述されているのかを指定します。但し古いブラウザはxml:lang属性を認識できないので、同時にlang属性でも指定しておきましょう。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

空要素

XHTMLにおいてはbr , img , meta要素等、中身が空である要素も終了タグで閉じる必要があります。しかし、<br></br>のように記述すると古いブラウザでは解釈のされ方に違いが生じるため、<br />といった記述を用います(*3)。後方互換性を考慮して「/」(スラッシュ)の手前に半角スペースを記述しておきましょう。

【注釈】

このページの一番上へ

XHTML1.0への移行準備

Home > XHTMLへの移行 > XHTML1.0への移行準備

XHTMLにおける初めての文書型であるXHTML1.0は、HTML4.01を最形式化したものです。ここでは、XHTML1.0への移行を前提とした準備の仕方について触れていきます。

HTML4.01に準拠
HTML4.01の仕様に準拠していない文書をXHTMLに適合させることは困難です。当ブログにおきましては、HTML4.01に準拠したHTMLの記述法について簡単に触れております。参考にしてください。
要素及び属性は小文字で記述
HTMLでは大文字と小文字の区別がなく、<html>または<HTML>どちらの記述法でも問題ありませんでしたが、XHTMLでは要素や属性は小文字でのみ定義されています。<HTML>は誤りで、<html>と記述する必要があります(*1)。
HTMLタグの省略不可
HTMLでは<html>、<head>、<body>のように開始タグも終了タグも省略可能なものや、<p>、<li>、<td>のように終了タグのみ省略可能なものが存在しましたが、XHTMLにおいてはこれらのタグを省略することができません(*2)。
整形式で記述
親要素と子要素の区別が明確でない記述は、正しく解釈されない恐れがあります(*3)。
間違った例
これは<a><em>間違った記述の一例</a>です。</em>
正しい例
これが<em><a>正しい記述の一例</a>です。</em>
属性値を引用符で囲う
HTMLでは属性値を「"」(引用符)で囲わなくても問題ありませんでしたが、XHTMLにおいては引用符で囲う必要があります。<a tabindex=2>は誤りで、<a tabindex="2">と記述する必要があります。
属性値の最小化不可
HTMLでは論理型属性の最小化が認められていましたが、XHTMLにおいては完全書式で記述する必要があります。<input checked />は誤りで、<input checked="checked" />と記述する必要があります。
name属性について
a , form , img , map要素のname属性はXHTML1.1において廃止されており、代わりにid属性が定義されています。しかしXHTML1.0が勧告されたのは2000年1月のことであり、それ以前のブラウザはid属性を認識できないことより、XHTML1.0ではid属性とname属性の併記が認められています。併記する際の注意点は次のとおりです。
  1. id属性とname属性には同一の値を指定しましょう。

    <a id="top" name="top">

  2. id属性は半角数字ではじめることができません。id属性、name属性共に半角英字ではじめましょう。
CSSとJavaScript
HTMLではスタイルシートやスクリプトを<!--と-->(スクリプトの場合は<!--と//-->)でコメント扱いすることが許されています。これは、携帯電話環境や古いブラウザのようにstyle要素及びscript要素をサポートしていない環境において、スタイルシートやスクリプトがテキストとして表示されるのを防ぐための手法ですが、XHTMLにおいてはスタイルシートやスクリプトがコメントとして扱われ、無視される恐れがあります。これを解決する手段として、外部ファイルの参照が推奨されています。

準備が整いましたら、いよいよXHTML1.0に移行します。

【注釈】

このページの一番上へ

HTML4.01に準拠

Home > XHTMLへの移行 > HTML4.01に準拠

XHTMLにおける初めての文書型であるXHTML1.0は、HTML4.01を最形式化したものです。このため、HTML4.01の仕様に準拠していない文書をXHTMLに適合させることは困難です。ここでは、HTML4.01の仕様について簡単に触れてみたいと思います(*1)。

HTML4.01の文書型宣言
  1. HTML4.01 Strict(厳密型)

    W3Cの仕様に厳密に従っていることを宣言するものです。見栄えを指定するもの等、非推奨とされている要素や属性及びフレーム関連要素を使用することはできません。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  2. HTML4.01 Transitional(移行型)

    古いブラウザとの互換性を保つため、非推奨とされている要素や属性を使用することができます。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  3. HTML4.01 Frameset(フレーム設定型)

    frameset要素を用いてフレームを指定する際に用います。フレーム関連要素はStrict(厳密型)で定義されていないため、中のhtmlファイルはTransitional(移行型)を宣言します。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

内容モデル定義

要素の多くはブロック要素とインライン要素に分類されます。直接の子要素として持つことのできる要素はそれぞれ異なります(*2)。以下に一例を挙げてみます。

  1. h1〜h6要素、p要素、address要素等の要素は、ブロック要素を子要素とすることができません。
  2. blockquote要素、form要素、noscript要素等の要素は、インライン要素を直接の子要素とすることができません。
  3. a要素、form要素等の要素は、入れ子にすることができません。
  4. body要素の直接の子要素としてインライン要素を指定することは、Strict(厳密型)では許可されていません。
整形式で記述
親要素と子要素の区別が明確でない記述は、正しく解釈されない恐れがあります。
間違った例
これは<a><em>間違った記述の一例</a>です。</em>
正しい例
これが<em><a>正しい記述の一例</a>です。</em>
画像の代替テキスト
img要素にはalt属性による代替テキストが必須です。代替テキストは、画像が表示されない環境においても意味が通じるものにしましょう。装飾用画像のように代替テキストが不必要な場合にはalt=""としますが、スタイルシートで背景画像として指定することにより、構造と見た目を分離することができます。
文字実体参照
CGIスクリプト等においてフォームデータを送信する際、データの区切りに「&」(アンパサンド)が用いられますが、これは文字実体参照の開始点と解釈される恐れがあります。これを解決するためには、文字実体参照を用いて「&amp;」と記述する必要があります。
【注釈】

このページの一番上へ

| ホーム | 古い記事

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 転職