ＨＴＭＬの概要
ＨＴＭＬ（HyperText Markup Language）は、Ｗｅｂページを記述するためのマークアップ言語です。
ＨＴＭＬで記述されたＨＴＭＬ文書は、Ｗｅｂブラウザで解釈され、ディスプレイにＷｅｂページが表示されます。
- ＨＴＭＬの文法などはＷ３Ｃ（World Wide Web Consortium）により標準仕様が定められています。
最新版はＨＴＭＬ５ですが、逐次機能追加や変更が行われています。 - 多くのＷｅｂブラウザがあります。基本的にはＷ３Ｃ仕様に準拠していますが、最新仕様への対応が遅れたり、仕様に明記されていない部分や解釈の違いがあったりして、Ｗｅｂブラウザにより表示デザインが異なる場合もあります。
- ＨＴＭＬは、タグ（<～>の形式）によって文書の論理構造を表現します。そのタグの意味は定められており、独自のタグの設定はできません（仕様以外のタグを記述しても無視されます）。
- タグを文字の大小や字下げなどの体裁を整えるために利用することもできますが、そのような用途に使うべきではないとされ、旧版にあった体裁指定用のタグは、現在では非推奨とされています。
体裁指定にはＣＳＳを用いるべきだとされています。 - ＨＴＭＬ文書の識別子は .html または .htm ですが、通常のテキストデータのファイルです。テキストデータの本文中にタグを挿入してＨＴＭＬファイルにします。
- 文字コードは多くの体系がサポートされ指定できますが、UTF-8 が広く使われるようになりました。
- ＨＴＭＬには画像を組み入れるタグ（imgタグ）があります。その部分に指定した画像ファイルが自動的に表示されます。
- ＨＴＭＬにはリンク機能（a タグ）があり、アンカーによって示された文字や画像をマウスでクリックして、異なったページへ移動させることができます。
- 一般公開するＷｅｂページ（ＨＴＭＬファイルとそれに関係するＣＳＳファイルや画像ファイルなど）は、作成者のＷｅｂサーバに保存されています。Ｗｅｂページを閲覧するには、ＷｅｂページからＵＲＬを入力するか、現在のＷｅｂページのリンク個所をクリックします。それにより、Ｗｅｂサーバから、必要なファイル群がＷｅｂブラウザにダウンロードされます。そして、Ｗｅｂブラウザにより解析され、Ｗｅｂページに表示されます。
- ＷｅｂブラウザとＷｅｂサーバ間の通信には、ＨＴＴＰという通信プロトコルが使われます。個人情報などの漏洩を防ぐために、暗号化・認証を行うＨＴＴＰＳもあります。
- ＨＴＭＬだけで多様な機能をカバーすることはできません。特にＷｅｂページ内でデータを入力したりクリックしたりして画面の一部を変更する動的なページにするのは困難です。そのような機能をもたせるにはJavascriptのようなスクリプト言語で記述したプログラムをＨＴＭＬ文書内に組込みます。あるいは、多数のプログラムを登録したライブラリファイル（ｊｓファイル）と関係付けます。
ＨＴＭＬの表記例
ＨＴＭＬは、主にＷｅｂページ用ハイパーテキストを記述するマークアップ言語です。ＷｅｂブラウザはＨＴＭＬ文書を解読してＷｅｂページを表示します。
下のＨＴＭＬ文書は右図の表示になります。
１ <!DOCTYPE html">
２ <html lang="ja">
３ <head>
４ <meta charset="UTF-8">
５ <title>ＨＴＴＰとＷｅｂサーバ</title>
６ </head>
７ <body>
８ <h1>ＨＴＴＰとＷｅｂサーバ</h1>
９ <h2>学習のポイント</h2>
１０ <p>この章では～</p>
１１ <a href="setsumei.html">詳細説明</a>
１２ </body>
１３ </html>
- １の<!DOCTYPE html>は，この文書がＨＴＭＬ５に従って記述されている（そのＤＴＤに従っている）ことを示します。
- ２～１３がＨＴＭＬの文書です。ＨＴＭＬ文書の全体が<html>～</html>で囲まれています。そして，< >と</ >が対になり，構造化されています。これをタグといいます。
- ２の「lang="ja"」は本文書が日本語文字コードであること，そして４の「charset="UTF-8"」はそのコードがUTF-8であることを示しています（シフトＪＩＳコードで作成するならば「charset="Shift_JIS"」とします）。この指定と実際の文書が一致していないと，いわゆる文字化けの原因になります。
- ＨＴＭＬ文書は，２～６のｈｅａｄ部と，７～１２のｂｏｄｙ部に分かれます。
- ｈｅａｄ部は，この文書のタイトル（５）や（ここでは示していませんが）参照すべきＣＳＳ，作成者など，文書に関する諸情報を記述します。タイトルは，ブラウザの最上段のタイトル欄に表示されます。
- ｂｏｄｙ部はいわゆる本文であり，ここに記述した内容がＷｅｂブラウザで表示されます。
- ８や９のタグ<h1>や<h2>は見出し，１０の<p>はパラグラフというように，文書の構造を示します。
- １１はリンクです。画面に表示される詳細説明の個所をクリックすると，別文書 setsumei.html が表示されます（ここでの画面は単なる画像ですので、前のリンクをクリックしてください）。このような機能を持つのがハイパーテキストです。
ＨＴＭＬ５
ＨＴＭＬの最新版はＨＴＭＬ５です。その新仕様のうち、いくつかを列挙します。
- section、header、footer などのタグにより、文書の構造をより明確にできるようになりました。
- videoやaudioタグにより、Flashなどのプラグインを用いずに、動画再生などができるようになりました。
- 画像を表示するには、他のソフトで作成した画像ファイルを取り込んでいましたが、Canvasというタグを用いることにより、JavaScriptにより記述することができます。例えば、定期的に変化するデータをデータファイルの内容を変えるだけで、最新のグラフにすることができるようになりました。
- データを入力するフォームの機能が強化されました。入力フィールドに自動的にフォーカスする属性や入力データを自動的にチェックする属性など、従来はJavaScriptを用いて処理していた機能がＨＴＭＬで記述できるようになりました。
ＣＳＳ（Cascading Style Sheet：スタイルシート）
とかくＨＴＭＬとは，文字の大きさ，色，位置などを指定してＷｅｂページの見栄えをよくするものだと思われがちです。確かに，ＨＴＭＬの発展過程では，デザインを指定するためのタグが追加されてきました。しかし，ＨＴＭＬの目的はあくまでも文書の構造を明確にすることであり，表示体裁を目的としたものではありません。
ＨＴＭＬを本来の目的に合致させるために，ＨＴＭＬ４.０以降では，表示体裁のためのタグを「非推薦属性」としています。
そして、表示体裁に関することはＣＳＳで定義することにしました。
例えば，次のようになります。
ＣＳＳの例
ＨＴＭＬ
ＣＳＳの指定がないとき
ＣＳＳの指定をしたとき
ＣＳＳ
ＣＳＳの利点
- 文書構造の明確化
凝った体裁のＷｅｂページをＨＴＭＬのタグだけで作成しようとすると、文書内容や意味にそぐわないタグが複雑にからみあい、ソースリストを見ても文書構造が分からなくなります。ＣＳＳを用いることにより、体裁関係タグをＨＴＭＬファイルから一掃できるので、文書構造が明確になります。 - 多様な体裁
ＣＳＳでは、凝った体裁も簡単に記述できます。例えばボックスの角を丸くしたり、文字や画像を回転させたりできます。 - 統一感のあるＷｅｂページ
ＣＳＳをファイルにしておき、各ＨＴＭＬファイルでそれを参照することができます。すなわち、ＣＳＳファイルを変更するだけで、多数のＨＴＭＬファイルを修正することなく、一斉にデザインを改訂することができます。
多数のＷｅｂページが一つのシリーズになっているとき、ページごとに体裁が異なるのは見苦しいものです。ＣＳＳを使うことにより、統一感のあるＷｅｂページになります。
Ｗｅｂページ作成支援ツール
ＨＴＭＬはテキストデータですので、標準的なテキストエディタを用いて作成できますが、タグの名称を忘れるとか、タグの開始と終了の対応を間違うなどの面倒もあります。そのため初心者だけでなく、熟練者でも支援ツールを利用することが多いのです。
- ソースリスト表示
ほとんどのＷｅｂブラウザは、ソースリスト表示機能をもっており、タグ対応を色で識別できるようになっています。文法エラーを検出する機能をもつものもあります。 - ＨＴＭＬ専用エディタ
例えば、<h1> と入力すると自動的に </h1> も付加するなど単純なものから、ＨＴＭＬとＣＳＳを同時に編集できたり、エディタとＷｅｂブラウザを同期させる機能をもつものまで多様なエディタがあります。 - ホームページビルダ
テンプレートが用意してあり、それに記入していくだけでＷｅｂページが完成します。ブログ作成ではプロバイダがツールを提供してくれるのが一般的ですが、Ｗｅｂページ用にも多様な無料ソフトがあります。 - ＣＭＳ（Content Management System）
ホームページビルダ機能をもつだけでなく、Ｗｅｂサイトの素材データとデザインやルールなどを一元管理するシステムです。→参照：ＣＭＳ