XHTMLとHTMLの違いについて

質問

XHTMLのHTMLの違いについて教えてください。
勉強するものの、これといった違いが判らずにこまってます。
（今のところ、HTMLとは記述方式が違うんだよ～とか、XMLの宣言が必要なんだよ～、ということはわかったのですが）

（参考したＵＲＬ）
http://www.atmarkit.co.jp/fxml/askxmlexpert/022xhtml/22xhtml.html

HTMLとXHTMLの違いとして以下の点が挙げられていることがわかりました。
-----------------------------------------------------------------
１．文書は整形式でなければならない
２．要素名及び属性名は小文字でなければならない
３．非空要素には終了タグが必要である
４．属性値は常に引用符で括られなければならない
５．属性の省略化はしてはならない
６．meta、hr、br、img などは、空要素として書く
７．属性値内での改行を含む複数の空白は１つと見なす
８．スクリプトおよびスタイル要素の定義が異なる
９．要素の入れ子などSGMLの排除機能を再現できない
１０．‘id’および‘name’属性をもつ要素は、‘id’属性を使用する
-----------------------------------------------------------------

とあるのですが、違う部分っていうのは「こういった定義部分だけ」であって、動作として大きな違い「ここが違うんだ」といった部分はないのでしょうか？
「書式が厳密になっています。」言葉から、XHTMLは「HTMLをより厳密に書くもの」ということなのでしょうか？

また、１０番目の、
「‘id’および‘name’属性をもつ要素は、‘id’属性を使用する 」について、イメージできなかったのですが、一体何のことを言っているのでしょうか？

例えば、JavaScriptを使用して、要素を操作する場合は、
getElementById("ID名")にて、操作を行うべきである、と言っているのでしょうか？

回答No.6

tenderfeel · ベストアンサー

>「テーブルを全体で囲む」というのが「どのように囲まれているのか？」というのがわからず頭を悩ましてます。

このサイトがテーブルレイアウトでの作成手順を公開しているので参考になるかもしれません。
http://www.dreamweaver-guide.com/layout/table/

テーブルをレイアウトに使った場合、body内全てがtableの中に入れられている状況になりますが、
厳密に言えば、文書構造無視してコンテンツをデザイン通り配置するためだけにテーブルを使った時点で、「テーブルレイアウト」になると思います。

お礼

ありがとうございます。
テーブルレイアウトがどのようなものかわかりました。

＞文書構造無視してコンテンツをデザイン通り配置するためだけにテーブルを使った時点で、「テーブルレイアウト」になると思います。

だから、
テーブルレイアウト：ＵＦＪカード　は、
スタイルシートをオフにしても、レイアウトが崩れなかったのですね。

（XHTMLで記述されたYahooはスタイルが崩れたのに対して、
　UFJカードはレイアウトが余り崩れませんでした）

回答No.5

tenderfeel

＞こういった普通のレイアウトがありますが、
＞このテーブルレイアウトが、文法的に間違いになる、ということでしょうか？

「テーブルレイアウト」というのは、テーブルを全体で囲んでコンテンツを配置するもので、普通にデータを表示しているテーブルとは違います。
テーブルレイアウト：ＵＦＪカード（http://ufjcard.com/）
ＸＨＴＭＬ：Yahoo（http://www.yahoo.co.jp/index.html）
ソースを見たりCSSをオフにして両者を比べれば一列に並ぶという現象も分かると思います。

＞「pagename.html#hoge」と書けば「hogeというIDが、pagename.html、にリンクする機能を持つ」ということでしょうか？

これはXHTMLに限ったことではないのですが、要は「ターゲットアンカーを作るのにわざわざリンクタグを使う必要は無い」という意味です。

<a href="index.html">普通のリンク</a>
<a href="index.html#main">アンカーへのリンク</a>

<div id="main>サンプルソースです</div>

#mainの#はIDを意味します。

お礼

テーブルを全体で囲むというところなのですが

---------------------------------
全体
　-----------------------------
　テーブル
　-----------------------------

---------------------------------

イメージとしてはこういうことでしょうか？
「テーブルを全体で囲む」というのが「どのように囲まれているのか？」というのがわからず頭を悩ましてます。

スタイルシートをoffにして判った点としては

▼テーブルレイアウト：ＵＦＪカード
　・一部１列になってしまったところがある
　・そのほかについては最初のレイアウトと余りかわらない

▼yahoo! JAPAN（全部が１列に並んだ）
　・全てのカテゴリーの項目が上から順に並んでいた

＞ターゲットアンカーを作るのにわざわざリンクタグを使う必要は無い
<A Href="#アンカー名">～</A>
という風に新たに「ターゲットアンカー用のリンクタグを作らずとも」
<a href="index.html#main">アンカーへのリンク</a>という形で「idをしているすることで、そのidの場所にリンクしてくれる」ということなのですね。

参考URL
　http://heo.jp/tag/href/framenamelink.html

回答No.4

tenderfeel

目に見える最大の違いは
１．文書は整形式でなければならない
という部分じゃないかと。
「XHTMLは、開始タグと終了タグがきちんとバランスし、要素が正しいツリーを形成する整形式であることが一番の基本です。」
つまりHTMLでメジャーだったテーブルレイアウトは文法的に間違いになるわけです。
XHTMLはCSSを切ると上から下にコンテンツが１列に並びます。

動作としての差はあんまりないですが、作成する段階はかなり違いが出てきます。

たとえば、非推奨や廃止される要素・属性が多々あるので、
テーブルレイアウト前提で作成されたオーサリングソフトの機能や
DIVレイヤー絶対配置（ビルダーのどこでも配置モード）機能などがXHTMLだと逆に不便になります。
初心者向けソフトの多くがXHTMLに対応していないか、対応していても不備が多いので、
HTMLからXHTMLに変更したいという場合に足を引っ張られることになります。

＞‘id’および‘name’属性をもつ要素は、‘id’属性を使用する
ターゲットアンカーのことですね。
XHTMLでは<a name="hoge"></a> としていたものを<a id="hoge"></a>とするのですが、
わざわざa要素を作らなくても、IDが付いているのなら
pagename.html#hogeと書けば移動させることが可能です。

お礼

ありがとうございます。

「１．文書は整形式でなければならない 」という点について
HTMLとXHTMLで明確に変わっているところなのですね。

「つまりHTMLでメジャーだったテーブルレイアウトは文法的に間違いになるわけです。」という点についてちょっとわからなかったのですが

【テーブルレイアウト】
<table>
<tr>
<td>テーブルレイアウト</td>
</tr>
</table>

こういった普通のレイアウトがありますが、
このテーブルレイアウトが、文法的に間違いになる、ということでしょうか？

＞DIVレイヤー絶対配置（ビルダーのどこでも配置モード）機能などがXHTMLだと逆に不便になります。
ブルダーは使った事がないのですが、
XHTMLだとそこが不便になるのですね（驚）

＞XHTMLでは<a name="hoge"></a> としていたものを<a id="hoge"></a>とするのですが、

という後の下りの、
「わざわざa要素を作らなくても、IDが付いているのなら　pagename.html#hoge」と書けば移動させることが可能、という部分がわからなかったのですが、これはどういうことでしょうか？

「pagename.html#hoge」と書けば「hogeというIDが、pagename.html、にリンクする機能を持つ」ということでしょうか？

回答No.3

noname#119508

<img src=aaa.gif>
は
<img src="aaa.gif" />
。
必要なのは、
「"」または「'」は必須です
最後に「 /」も必須です。（img要素などの空要素のみ）
つまり、<meta />、<br />、<hr />などになります。

<dl compact>
は
<dl compact="compact">と書かないといけません。
（compact要素については現在非推薦または廃止要素なので、使わないでください）

<IFRAME SRC="aaa.html">aaa.html</IFRAME>
は
<iframe src="aaa.html">aaa.html</iframe>
と書かないといけません。

XHTMLのファイル
<?xml version="1.0" encoding="Shift_JIS"?>
<!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=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<h1>aaa</h1><br />
<img src="aaa.gif" />
</body>
</html>

HTMLのファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<h1>aaa</h1><br>
<img src="aaa.gif">
</body>
</html>

お礼

ありがとうございます。

記述面ではそのようなところが違ってくるのですね。

記述としての違いについて、
教えていただきましてありがとうございます。

回答No.2

Werner

今のところWebページを作成するに当たっては、HTMLとXHTMLの機能的な違いはあまり無いです。
一応、XHTMLだとSVGみたいな他のXML文書が埋め込めたりするのですが、
ブラウザの対応の問題からかあまり使われてないようです。
（あとは、XHTML1.1以降だとフレームなどの非推奨な要素が
より冷遇されているのは機能的な違いかもしれませんが。）

他に、XHTMLはXMLだからXMLパーサーを通せるとかはありますが
Webページ作成するだけならあまり関係なさそうですね。

> 「name」も「id」も両方が使用されている、なんてことは、あってはならないでしょうか？
XHTML1.0は互換性のためにid属性とname属性の併記が許されます。
XHTML1.1ではmame属性が廃止されているのでid属性しか使えません。

お礼

どうもありがとうございます。
機能的違いというのはあまり無いのですね。

私はてっきり「XHTMLならではのこれができるんだ！」みたいなのがあると思っていたのです。

XHTML1.1はname属性が廃止されているのですね。

うーん・・・　name属性があると何か不具合があるのでしょうか？
（稚拙な考えですが、id＝１つしかないもの（固有のもの）で、名前も固有のもの（と断定して言いのかはわからないですが）、であるため「どちらも固有のものを指すのであれば、使用頻度が低いほうを削除してしまおう」という内容なのかなと考えたのですが。）

回答No.1

notnot

＞動作として大きな違い「ここが違うんだ」といった部分はないのでしょうか？

「HTMLでできないｘｘｘが、XHTMLだとできる」と言うことはないです。

＞「‘id’および‘name’属性をもつ要素は、‘id’属性を使用する 」

<form method="POST" action="cgi-bin/xxx.cgi" name="f1">
とは書かずに、
<form method="POST" action="cgi-bin/xxx.cgi" id="f1">
と書く。

お礼

ありがとうございます。

＞「HTMLでできないｘｘｘが、XHTMLだとできる」と言うことはないです。

その逆も然りということですよね。

＞ <form method="POST" action="cgi-bin/xxx.cgi" name="f1">
＞ とは書かずに、
＞ <form method="POST" action="cgi-bin/xxx.cgi" id="f1">
＞ と書く。

例外として気になっていることがあるのですが、
「idとnameの両方が振られているサイト」をみたことがあるのですが、
<form method="POST" action="cgi-bin/xxx.cgi" id="f1" name="f1">という風に「name」も「id」も両方が使用されている、なんてことは、あってはならないでしょうか？