レンタルサーバー・自宅サーバー設定・構築のヒント
レンタルサーバー・自宅サーバー設定・構築のヒント - レンタルサーバー・自宅サーバーの設定・構築情報を公開しています。

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント(相違点)

2013年2月22日 2015年5月15日
XHTML1.1

最近、Amazonや楽天の動向が注目されるように電子ブックの普及へ向かっていくことは必然の流れですね。 この流れから、HTMLからXHTMLへの移行を考えなくてはならないことは間違いないでしょう。

特に、電子ブックの基本規格と言っても良いくらいのepubの規格は、XHTMLの規格に沿ったものになっていますから、 ブログや自分のサイトをepubへ変換する場合、XHTMLに準拠しているとまとめやすい(epubにしやすい)というのもあります。

この記事は、W3Cの以下の英文の記事を元に、HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント(相違点)をまとめてみました。
(http://www.w3.org/TR/xhtml1/ )

EPUB
EPUB(イーパブ)は、電子書籍の規格の1つである。 “Electronic PUBlication”の意味を持ち「epub」「ePub」などと表記される場合もある。そのオープン性と単純さから、対応する電子書籍のハードウェアやアプリケーションソフトウェアは多く、英語圏での電子書籍用ファイルの標準規格となっている。

EPUBは、HTMLやウェブブラウザのオープン性を保持しつつ、インターネット接続が切断された状態の携帯情報端末 (PDA) やノートパソコンなどでも電子書籍の閲覧が継続できるように ダウンロード配信を前提にパッケージ化された、XHTMLのサブセット的なファイル・フォーマット規格であり、画面の大きさに合わせて表示を調整する「リフロー機能」が特徴である(固定する設定も可能)。 (出典:wikipedia)

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント(相違点)

HTMLからXHTML1.0 or XHTML1.1への移行するために行わなければならない作業と各規約の相違点について、簡単に以下にまとめてみました。

XML宣言を挿入する

このドキュメントがXMLに準拠していることを先頭に記載します。

[XHTML 1.0]/[XHTML 1.1]

<?xml version="1.0" encording="utf-8"?>
最近では、utf-8 がほとんどだと思います。ただ、Windows系でドキュメントを書かれている場合は、ShiftJISの場合もあるかと思います。その際は、以下のように指定します。
utf-8
<?xml version="1.0" encording="Shift_JIS"?>
また、DTD (Document Type Definition :文書型定義) ファイルを外部から読み込まないように設定することができる standalone属性の指定も可能です。 ただ、デフォルト no (外部から読み込む) なので特に指定することはないかと思います。
<?xml version="1.0" encording="utf-8" standalone="no"?>
ここでのバージョン 1.0 は、XMLのバージョンであってXHTMLのバージョンではないことに注意しましょう。 そのため、[XHTML 1.0]/[XHTML 1.1]いずれも 1.0 を指定します。

DOCTYPEを変更する

このドキュメントがどのバージョンに準拠しているかDOCTYPE で宣言します。

[HTML 4.01]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional (上記の上段の記載例)は、移行期を意味し、HTML 4.01 未満のバージョンからの移行を考慮し、緩やかな縛りによるHTML4.01に従う文書であることを宣言しています。
Strict (上記の下段の記載例)は、厳格にHTML 4.01 の規格に従うドキュメントであることを宣言しています。

[XHTML 1.0]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional (上記の上段の記載例)は、移行期を意味し、XHTML 1.0 未満のバージョンからの移行を考慮し、緩やかな縛りによるXHTML 1.0に従う文書であることを宣言しています。
Strict (上記の下段の記載例)は、厳格にXHTML 1.0 の規格に従うドキュメントであることを宣言しています。

[XHTML 1.1]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 では、Strict のみとなります。

xml:langで言語指定する

言語指定には、lang属性を用いていましたが、xml:langを用いるように変更します。

[HTML 4.01]

<html lang="ja">

[XHTML 1.0]

<html lang="ja" xml:lang="ja">
lang, xml:lang の2つで宣言することになっていますが、2つの値が異なる場合は、xml:langが優先されます。

[XHTML 1.1]

<html xml:lang="ja">
XHTML 1.1 では、lang は使えません。

HTMLタグでは、名前空間の指定まで行うことが一般的になっています。

[XHTML 1.1]

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
この指定を行っておくと、htmlタグでくくられた範囲内は、名前空間(xmlns属性)を指定しない場合は、すべて上記の例でいうと”http://www.w3.org/1999/xhtml”を指定したことと同じことになります。
名前空間は、何かDTDのような定義を含むものではなく、いわゆる名前付けですから、id属性の大きなものという捉え方が一番近いと思います。
慣習的にも、今後の定義づけの変更の可能性からも上記のように”http://www.w3.org/1999/xhtml”と名前付けしておくことが無難だと思います。

タグ名、属性名は小文字に変換する

HTMLの記述では、タグ名、属性名を大文字、小文字の区別なく使用できました。XHTMLでは、小文字になります。

[HTML 4.01]

<DIV ALIGN="LEFT">これは左寄せです。</DIV> 

[XHTML 1.0]/[XHTML 1.1]

<div align="left">これは左寄せです。</div> 

タグの階層化を厳密に行う

HTMLの記述では、タグの階層は、以下のようにあいまいでもOKでした。

[HTML 4.01]

<p>こちらは強調されている<em>段落</p>です。</em> 

これを階層化を厳密に行うと以下のようになります。


[XHTML 1.0]/[XHTML 1.1]

<p>こちらは強調されている<em>段落</em>です。</p> 

もう少しわかりやすく書き直すと以下のようになります。

<p>
	こちらは強調されている
	<em>
		段落
	</em>
	です。
</p> 

ちゃんとpタグの括りの中で、emタグが閉じています。


タグの終端は省略できない

HTMLの記述では、タグの終端(閉じ)を以下のように省略できました。

[HTML 4.01]

<ul>
	<li>1行目
	<li>2行目
</ul>

ここでは、</li> を省略しています。これをXHTMLで表記するには、以下のようになります。


[XHTML 1.0]/[XHTML 1.1]

<ul>
	<li>1行目</li>
	<li>2行目</li>
</ul>

必ず、</li> を記載います。
liタグの省略に限らず、
pタグでもpタグが開始され閉じていない状態で、さらにpタグを開始することはできません。

[HTML 4.01]

<p>こちらに段落があります。<p>こちらにもう一つ段落があります。 

[XHTML 1.0]/[XHTML 1.1]

<p>こちらに段落があります。</p><p>こちらにもう一つ段落があります。</p>

属性値を常に引用符で括る

HTMLの記述では、タグの属性値を必ずしも引用符で括る必要はありませんでしたが、XHTMLでは必須になります。

[HTML 4.01]

<table rows=3>

[XHTML 1.0]/[XHTML 1.1]

<table rows="3">

必ず、引用符(” or ‘) で括ります。


属性値を省略しない

HTMLの記述では、一部のタグの属性値を省略することができましたが、XHTMLでは省略不可になります。

[HTML 4.01]

<option selected>選択</option>

HTMLでは、selected属性の指定だけで、選択済までの意味を持たせていましたが、属性に対する値が設定されていないので、XHTMLでは以下のようになります。


[XHTML 1.0]/[XHTML 1.1]

<option selected="selected">選択</option>

また、dlタグでも同じようなことが言えます。以下のcompact属性は、定義語と定義説明のセットの表示を小さく表示するよう指定するものです。

[HTML 4.01]

<dl compact>

[XHTML 1.0]/[XHTML 1.1]

<dl compact="compact">

空要素のタグを /> で閉じる

HTMLの記述では、閉じタグがないタグがあります。たとえは、横線を引くための <hr> や 改行を指定するための <br> などです。 これは、XHTMLでは終端を示す / を加えてタグ終了を指定する必要があります。

[HTML 4.01]

<hr>
改行<br>

[XHTML 1.0]/[XHTML 1.1]

<hr />
改行<br />
一般的に HTMLしか対応できていないような古いブラウザの誤動作をなくすために / の前に半角空白を入れて対応します。

name属性をid属性へ変更する

HTMLの記述では、aタグやmapタグなどでname属性を使っていました。XHTMLではid属性が推奨されます。(XHTML1.1では、name属性は使用不可になります)

[HTML 4.01]

<a name="step1">STEP1</a>

[XHTML 1.0]

<a name="step1" id="step1">STEP1</a>

[XHTML 1.1]

<a id="step1">STEP1</a>
XHTML1.1では、name属性は使用不可です。

埋め込みCSS、Scriptは外部ファイルにする

HTMLでは、好きなようにスタイルシートやスクリプトをドキュメントの中に埋め込むことができました。
XHTMLでは、 <&]]> は、埋め込みのスタイルシート、スクリプトに使用することができません。 そのため、制約があるので、基本的には、外部ファイルとすることが求められます。

また、XHTMLのドキュメント内でスタイル、スクリプトを埋め込みたい場合は、CDATA マークで括ることになります。

[HTML 4.01]

<style type="text/css">
<!--
stylesheet code went here
-->
</style>
<script type="text/javascript">
<!--
scripting went here
-->
</script>

[XHTML 1.0]/[XHTML 1.1]

<style type="text/css">
<![CDATA[
stylesheet code went here
]]>
</style>
<script type="text/javascript">
<![CDATA[
scripting went here
]]>
</script>

imgタグにはalt属性を追加する

img(画像)タグには、 alt属性(Alternative Representation Text)が追加されました。これは、画像の解説文を記載するものです。

[HTML 4.01]

<img src="mt_fuji.jpg">

[XHTML 1.0]/[XHTML 1.1]

<img src="mt_fuji.jpg" alt="これは富士山の写真" />
XHTMLでは、alt属性と 最後の / を忘れないようにしましょう。

他のタグに含めることができないタグがある

HTMLでは自由にタグを記載できましたが、XHTMLではタグの括りの中では使用できるタグ、できないタグが存在ます。

  • ブロック要素タグをインライン要素タグに埋め込むことはできない。

    ブロック要素タグとは、
    見出し(h1、h2、h3、h4、h5、h6)、段落(p)、横罫線(hr)、ブロック引用(blockquote)などです。

    インライン要素タグとは、
    テキスト強調(b、strong )、イタリックテキスト(i、em)、画像(img)の、リンク(a)などです。

    HTMLでは、以下のようにどちらが先でもOKでした。

    [HTML 4.01]

    <b><p>どっちが先での良いの?</p></b>

    XHTMLでは、以下のようにブロック要素タグの中にインライン要素タグはOKです。その逆はNGです。

    [XHTML 1.0]/[XHTML 1.1]

    <p><b>どっちが先での良いの?</b></p>

  • 同じタグの入れ子はできない。

    [HTML 4.01]

    <a href="test.html">こっちが本当のリンク(<a href="test2.html">でもこっちも良いかも</a>)先</a>

    [XHTML 1.0]/[XHTML 1.1]

    <a href="test.html">こっちが本当のリンク(</a><a href="test.html">でもこっちも良いかも</a><a href="test.html">)先</a>

  • bodyタグの直下にインライン要素タグは書けない。

    [HTML 4.01]

    <body>
    <img src="mt_fuji.jpg">
    </body>

    [XHTML 1.0]/[XHTML 1.1]

    <body>
    <p><img src="mt_fuji.jpg" alt="これは富士山の写真" /></p>
    </body>
    bodyタグの直下では、インライン要素タグを直接記述することはできません。上記のようにブロック要素タグの中に記載します。

タグの属性値の & を &amp; へ変更する

HTMLでは、タグの属性値の & を使うことができましたが、XHTMLでは、 &は参照という特別な意味を持ちます。そのため、& → &amp; へ変更する必要があります。

[HTML 4.01]

<a href="http://example.com/test.php?a=test&b=2">テストリンク</a>

[XHTML 1.0]/[XHTML 1.1]

<a href="http://example.com/test.php?a=test&amp;b=2">テストリンク</a>

使用できなくなったタグ属性

XHTMLでは、使用できなくなった あるいは、推奨されなくなったタグ属性が多くあります。 以下にそれを列挙します。

  • language属性はなくなった。

    language属性の代わりに、type属性を使用することができます。

    [HTML 4.01]

    <script language="javascript">

    [XHTML 1.0]/[XHTML 1.1]

    <script type="text/javascript">

  • topmargin属性はなくなった。

    topmargin (or leftmargin, marginwidth, marginheight)属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <body topmargin="0" marginwidth="0" marginheight="0" leftmargin="0">

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <body>

    [スタイルシートコード]

    body { margin: 0px; padding: 0px; }

  • border属性はなくなった。

    border 属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <img src="picture.jpg" border="0" width="10" height="10" > 

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <img src="picture.jpg" width="10" height="10" alt="Picture" />

    [スタイルシートコード]

    img { border: 0px; }

  • hspace属性はなくなった。

    hspace (or vspace) 属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <img src="picture.jpg" hspace="5" width="10" height="10" > 

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <img class="imagewithmargin" src="picture.jpg" width="10" height="10" alt="Picture" />

    [スタイルシートコード]

    .imagewithmargin { margin-left: 5px; margin-right: 5px; }

  • align属性はなくなった。

    align 属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <p align="right" > or <img align="left" … />

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <p class="textright"> or <img class="floatleft" ... />

    [スタイルシートコード]

    .textright { text-align: right; }
    .floatleft { float: left; }

  • name属性はなくなった。

    name 属性の代わりに、id属性を使用することができます。

    [HTML 4.01]

    <form name="loginform">

    [XHTML 1.0]/[XHTML 1.1]

    <form id="loginform">

  • height属性はなくなった。

    height(or width or background) 属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <table width="100" height="200">
    <tr>
    <td width="100" height="100" background="image.gif">テーブルのセルです</td>
    </tr>
    </table>

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <table width="100">
    <tr>
    <td class="td_style">テーブルのセルです</td>
    </tr>
    </table> 

    [スタイルシートコード]

    .td_style { width: 100px; height: 100px; background: (‘image.gif'); }

  • table全般の属性は、推奨されなくなった。

    table全般の属性(cellpadding, cellspacing, border, bgcolor など)は、推奨されなくなりました。 これらの属性は、スタイルシートで補うことができます。

    [HTML 4.01]

    <table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="3">

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <table class="redborder">

    [スタイルシートコード]

    .redborder { border: solid 1px #ff0000; border-spacing: 0px; border-collapse: collapse; }
    .redborder td { padding: 3px; } This replaces cellpadding.

  • fontタグはなくなった。

    fontタグは使用できなくなりました。fontの代わりに、span タグを用いることが、最も確かだろうと思います。

    [HTML 4.01]

    <p><font color="#ff0000">ここは赤です</font> ここはデフォルトの色です。</p> 

    [XHTML 1.0]/[XHTML 1.1]

    [ドキュメントコード]

    <p><span class="red">ここは赤です</span> ここはデフォルトの色です。</p> 

    [スタイルシートコード]

    .red { color: #ff0000;"}


Media Typeを変更する

HTMLおよびZHTML1.0の記述では、metaタグにて Media Type を text/htmlと指定しましたが、XHTML1.1では application/xhtml+xml となります。

[HTML 4.01]

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

[XHTML 1.0]

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

[XHTML 1.1]

<meta http-equiv="Content-Type" content="application/xhtml+xml" />
ただし、この値は対応できていないブラウザもまだまだあるので、使用する場合は十分に注意が必要です。


ざっとですが、こんな感じです。
基本記事は、w3cの以下のサイト記事です。
(http://www.w3.org/TR/xhtml1/ )
これ以外にも、いろんなサイトからかき集めた情報も含まれています。おそらく XHTML1.0, XHTML1.1 の定義を確認すると、概ね、ここの内容が全てだと思います。 個人的な備忘録も含めて、記事にしてみました。何かの役にたてば、うれしく思います。
ご利用のブラウザは、広告ブロック(AdBlockなど) が適用となっていませんか?
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない検索ができないことがあります。


関連記事 :

Squid でキャッシュを削除する方法をまとめて解説してみた

Squidをリバースプロキシとして使ってみた では、Squidによるリバースプロキシの設定について書きました。 そこでは、キャッシュされたファ ...

Nginx で一時的なセキュアなリンクを使ってみる(phpで自力で認証してみる)

Nginx で一時的なセキュアなリンクを使ってみる(secure_link,secure_link_md5ディレクティブを使ってみる) では ...

Nginx で一時的なセキュアなリンクを使ってみる(secure_link,secure_link_md5ディレクティブを使ってみる)

Nginx でBasic認証(ユーザ名、パスワードを求める )するには では、セキュリティアップのための NginxでのBasic認証(ユー ...

nginx でKeepAliveを設定してみる

以前に ApacheのKeepAliveを考える で Apache による KeepAlive について記事を書きました。 今回は、その ...

anti-adblockを Wordpress で使ってみる

今回は、Anti Adblock を使ってみました。 Anti Adblock とは、 そもそも Adblock という ウェブ ...



コメントを投稿 :

お名前 *

メールアドレス *
( メールアドレスが公開されることはありません。)

サイトアドレス

コメント *

* 印の項目は、入力が必要な項目です。




最近投稿の記事

[ 画像提供元 : Amazon ] 先日、1TBのディスクの入れ替え時にバックアップをとろうとディスクコピーを行いました。 その際 ...

Windows で Linux ファイルシステム Ext4 のディスクをマウントするには? Ext3Fsd が、おそらく、最も簡単なツール ...

今回は、Windows で Compass を使ってみました。 Compass とは、 Sass(サス、Syntactica ...

今回は、Anti Adblock を使ってみました。 Anti Adblock とは、 そもそも Adblock という ウェブ ...

デスクトップ環境でない サーバーで、Webページのキャプチャー画像をコマンドで撮る には、wkhtmltoimage, CutyCapt ...


さくらのVPS 全プラン リニューアルです。(石狩(北海道)も選択可)


root権限ありで ¥685 / 月 ~ と非常にリーズナブルな CPU 1(core)の 512 プランから、 最高 CPU 10(core), メモリ 32(GB), SSD容量 800(GB) までとプランが充実。
ディスクは、SSDとHDDの選択が可能になった他、データセンターは人気の東京、石狩(北海道)となりました。

また、どのプランでも好きなOSが選べます
( CentOS, Fedora, Scientific Linux, FreeBSD, Ubutu, Debian )

管理人もおすすめのVPSです。
試用期間がありますから、一度、お試しを!!

詳しくは、http://vps.sakura.ad.jp/さくらのVPSのサイトへ へどうぞ!!

カテゴリ


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。
最近、スワップにも対応した Serverman@VPS は、かなりリーズナブルかもです。

  • メモリ1GB~2GBのEntryプラン :月額:490円
  • メモリ2MB~4GBのStandardプラン :月額:980円
  • メモリ4GB~8GBのProプラン :月額:1,980円

新規申し込みで1ヶ月間完全無料となるキャンペーンを実施中です。
Serverman@VPSの特徴は、安さとIPv6対応です。また、初期設定費0円もポイントです。

IPv6でちょっと遊んでみたい方には、おすすめかもしれませんね。最低利用期間もありませんから、気に入らないときは即解約もできます。

Serverman@VPSの詳細については、 http://dream.jp/vps/ Serverman@VPSのサイトへへどうぞ。



KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。


ConoHa VPS は、初期設定費0円最低利用期間無し時間単位で清算可能、 さらに、Web APIを使って自動化を図ることもできる便利なVPSです。

海外サーバー設置も可能で、ローカル接続にも対応と、かなり、機能豊富なサーバーです。

新規ユーザ登録で、クーポンもらえますから、まずは、お試しですね。

ConoHa VPSの詳細については、
http://www.conoha.jp/ へどうぞ。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。


メモリ2GBプラン CPU:3core、Disk:200GB
月額:1,153円から (初期設定:1,680円0円)

さくらのVPSがリニューアルされてもなんのその。
1GBメモリ / 2Core を ¥834 – の格安価格で提供中です!
間違いなくスペックからすると割安感ありです。
年間割引時の途中解約で返金がないのは、 ちょっと残念ですが、それでもこの割安感は魅力です。

まずは、お試しですね。

お名前.com VPS(KVM)の詳細については、
http://www.onamae-server.com/vps/ へどうぞ。(お試し期間が15日あります。)



  • ソーシャルブックマーク

  • はてなブックマークへ追加するはてな登録数
ページトップへ
Time : 0.2559 [s]