Web > Resources > ホームページを作る前 > ホームページ作る前の予備知識

Web標準～HTMLとXHTMLの違い～

Web標準って何？
- Web標準に準拠するメリット
HTMLとXHTMLの違いって？
- HTMLの文書構造
- XHTMLの文書構造
Web標準に準拠したサイトを簡単に構築してくれるソフトは？

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標準に準拠するメリット

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

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

HTMLとXHTMLとの違いって？

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

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

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

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

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

たのしい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 4でマイクロソフトは開発終了となり、現在、フリーソフトになっています。Windows 7までサポートしています。Windows 8以降は一部の機能がうまく動作しないという問題がありますが、サイト管理上においては問題ありません。

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

Expression Web 4の使い方については『Expression Webを使ってみよう：Expression Web 4』コーナーを参照してください。

しかしながら、Expression Webが登場してから時代が移り変わり、もう今ではHTML 5に移行しましょう、という流れになりつつあります。しかし、当サイトでは古いバージョンのブラウザーからの閲覧者が多いため、HTML 5は時期尚早と判断しました。開設15周年を機にリニューアルしたDOCTYPEはHTML 4.01 Transitionalに戻しました。

▲Page TOP

Page 1 > > Page 3

INDEX

ホームページを作る前に・・・
- ホームページ作る前の予備知識
  - これだけはおさえておきたい、HTMLの基本
  - Web標準～HTMLとXHTMLの違い～
  - 正しいHTML文書を作るための方法と考え方

▲このページのトップへ

Web標準～HTMLとXHTMLの違い～

Web標準って何？

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

HTMLとXHTMLとの違いって？

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

HTMLの文書構造

XHTMLの文書構造

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

コメント