www.wanichan.com
ワニchanのうぇぶわーるど～Expression Web & FrontPage 総合情報＆Tips～

Web標準～HTMLとXHTMLの違い～

最終更新日：2007/06/11 11:04:10
はてなブックマーク | Yahoo!ブックマーク Yahoo!ブックマークでこのサイトを登録している人数 人が登録

Page 1 > Page 2 > Page 3

Web標準って何？

Web標準とは、国際的な標準化団体（W3C）によって策定された、Web技術仕様に関する規格です。

世の中には、世界標準規格というものがありますよね？
例えば無線LANだって世界標準規格になってます。
無線LAN内蔵のノートパソコンを海外に持って行くと、現地で無線LANが使えたりします。
つまり、世界中どこでも使えるってわけです。
もし電池がなくなっても、海外で単3電池とか売ってます。アルカリとかマンガン電池もあります。
電池もちゃんと世界標準規格に準拠して作られてるんですね♪

・・・で、Webの世界にも標準規格で、というのが、Web標準、というわけです。

従来、インターネット上のWebページは、文書構造と書式（スタイル）が全部一つのファイルに組み込まれていました。
文字の大きさとか文字修飾（太字に変えたりアンダーラインを引いたり）、見た目のレイアウトとか書式スタイルも全部HTML文書の中に組み込まれていたわけです。

私はかつてWordとかFrontPage Expressなどを使ってホムペ(笑)を作っていたわけですが、それぞれのファイルに文字色やら文字の大きさやら背景色やら背景画像やらが、そのWebページに直接設定されていたため、リニューアルのとき大変でした。

そこで、この問題を解決するために、Web標準化にしましょう、というわけです。
そもそも文書にスタイルやレイアウトの情報なんて要らないし、
文書の論理構造（見出しや本文等で生成されるコンテンツ）を記述するという本来のHTMLの目的に反してましたから、ね。

文書の論理構造、つまり、肝心な情報を伝えるのに余計なレイアウトとかスタイルは
スタイルの情報を持つスタイルシートに隔離してしまおう、というものです。
文書の論理構造だけをHTMLに、その他のスタイルとかレイアウトはCSS（スタイルシート）にして別管理しよう、それがすなわち、Web標準に準拠したサイト、ということになります。

当初、Web標準にしよう！という運動が始まった頃は、たしか、HTMLとCSSでサイト管理しましょう、という感じだったと思います。
（実際に、私が数年前に購入して手元にあるWeb標準に関する書籍はHTML+CSSになってます）

しかし、今のWeb標準は、XHTML+CSSという構造になっています。

なお、スタイルシートについての概要は、私のサイトにちょこっと載ってます。
スタイルシートについて をみてください！
また、Web Design FAQ にも、CSSに関するセクションがあります！

ついでに、それぞれの用語解説についての資料は、以下のサイトをみてくださいね！

Web標準に準拠するメリット

Web標準に準拠したサイトを構築すると、以下のさまざまなメリットが生まれます。

どのブラウザでもちゃんと見れる♪
ブラウザはInternet Explorerだけではありません。
OperaだったりNetscapeだったりFirefoxだったり、MacだったらSafariもあったりします。
Web標準に準拠すれば、これらの異なるブラウザでもレイアウトとかが崩れず、
ちゃんと見れるようになります。
また、テキストブラウザでもコンテンツを楽しむことができます。
ホームページの更新作業が楽チン♪
Web標準に準拠したサイトは、
文書構造と書式設定（スタイルシート）をそれぞれファイルを別にして管理します。
もし、スタイルを変更したい場合は、
そのスタイルシートのファイルをいじれば一発ですべてのWebページデザインが早変わりするので、更新作業がはかどっちゃいます♪
ページの表示スピードが速くなる♪
デザイン部分はすべてスタイルシート（CSS: Cascading Style Sheet）ファイルにまとめます。
そうすることによって、Internet Explorerなどのブラウザに一度そのCSSファイルがキャッシュ（一時ファイルに保管）されるので、別のページに飛ぶときでも、そのページの表示スピードが速くなります。
アクセスしやすいサイトになる♪
Web標準に準拠したホームページを作ると、健康な人だけじゃなくて、視覚障害者の方とか身体障害者な方とか、おじいちゃん、おばあちゃんとかにとっても利用しやすく優しいものになります。
Google検索で上位に表示される♪
Googleなどの検索エンジンサイトで、検索結果でページを上位に表示されるようになります。
みんな最近、Googleで情報検索したりしますよね？
検索したら自分のサイトが上位に表示されると、みんなそのサイトに飛ぶので、アクセスアップ間違いなしです！

▲Page TOP

HTMLとXHTMLとの違いって？

現在、HTMLじゃなくてXHTMLになってきていますが、XHTMLはHTMLとはちょっと違います。
とにかく、文書構造の違いをおさえといてくださいです。
あくまでもこれは概要レベルなので、もっと知りたい方はそれぞれ専門書を買って学習してくださいね！

まず、HTMLとは何かというと、Hypertext Markup Language の略です。
ハイパーテキスト（リンク）をマークアップする言語ですよ、ということです。
画像とか他のページとかサイトへのリンクだったり、とにかくホームページにはリンクが必要不可欠です。

一方XHTMLとは、Extensive Hypertext Markup Language の略です。
最初のXは、2文字目のxじゃないの？と思うかもしれないけど、Ex を発音するとXになるんで、Xになったのではないかと思います。
XMLデータに対応したもの、といったらいいのかな？

それぞれの定義については、以下を参照してくださいです。

初心者向けのXML/XHTMLについての解説サイトはこちら!

▲Page TOP

HTMLの文書構造

HTMLは基本的に開始タグと終了タグがありますよね？
<HTML>からはじまり、</HTML>で終わる、みたいな。
そのタグの中に囲まれたものは、HTMLドキュメント、ということです。

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

<head>
<title>このページのタイトル</title>
<meta name="keywords" content="キーワード１,キーワード2,キーワード3">
<meta name="description" content="このページの説明文を入れちゃいます♪">
</head>

<body>

<h1>見出し1</h1>
<p>ここに、章のリード文をいれちゃいます♪</p>
<h2>見出し2</h2>
<p>ここにセクションの説明文を入れます♪</p>
<h3>見出し3</h3>
<p>ここに本文をいれたりなんかして♪HTMLってこんな感じなんですよーだ(笑)<br>
画像を挿入すると、<img src="picture.jpg" alt="この画像の代替テキスト" width="150" height="100">という感じになります♪</p>

</body>

</html>

HTMLの中には<HEAD>タグがあり、</HEAD>タグまでの範囲に囲まれた部分はヘッダー情報として、
そのあとに続く<BODY>タグと</BODY>タグの間には、実際にブラウザで表示する本文、ということになります。

しかし中には、<META>タグとか、画像を呼び出す<IMG>タグは、そのもので指定が可能なので、終了タグは不要です。

▲Page TOP

XHTMLの文書構造

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>このページのタイトル</title>
<meta name="keywords" content="キーワード１,キーワード2,キーワード3" />
<meta name="description" content="このページの説明文を入れちゃいます♪" />
</head>

<body>

<h1>見出し1</h1>
<p>ここに、章のリード文をいれちゃいます♪</p>
<h2>見出し2</h2>
<p>ここにセクションの説明文を入れます♪</p>
<h3>見出し3</h3>
<p>ここに本文をいれたりなんかして♪HTMLってこんな感じなんですよーだ(笑)<br />
画像を挿入すると、<img src="picture.jpg" alt="この画像の代替テキスト" width="150" height="100" />という感じになります♪</p>

</body>

</html>

XTHMLの場合は、とにかく終了タグがないとダメ！という規則になってるので、そもそも終了タグがないタグは、そのタグ内に、「これで終わりだ！」と無理やり終了させるように />で終わらせます。

▲Page TOP

Web標準に準拠したサイトを簡単に構築してくれるソフトは？

Web標準に準拠したサイトを簡単に構築してくれるソフトとして、マイクロソフトの新しいWeb構築ツール、Microsoft Expression Webがあります。

Expression Webを使う前に、多少のHTMLとかXHTMLについて理解しておいた方がいいかもです。

今回、私は和書では初のExpression Webの解説書を執筆しましたです。
おかげさまで、Amazonサイトで発売初日に売切れてしまうほど注文が殺到してるみたいです♪

Expression Web 標準ガイドブック書名： Expression Web 標準ガイドブック
価格： 2,415円（税込）
出版社： 毎日コミュニケーションズ
発売日： 2007年5月19日
対象レベル： 初級～中級　単行本： B5カラー変形版　232ページ
ISBN978-4-8399-2393-8

本の紹介：
Expression Webの概要や特長、基本的な操作方法のほか、CSSの作成・管理方法、Web標準に準拠したWebサイトの作成、その他便利な機能を図を多用して解説。

一応、この本は、FrontPageユーザー、Dreamweaverなどの他社製品ソフトユーザーを対象としたExpression Webへの導入解説書、もしくは、もっとExpression Webを使いこなしたい方のための機能リファレンスという位置づけで、超初心者向けじゃないかもです。。

でも、できる限り、超初心者の方もバックアップしますよー♪
今度は、超初心者向けの解説書を出したいところですね(笑)

▲Page TOP

Page 1 > Page 2 > Page 3

INDEX

HOME