HTML

出典: フリー教科書『ウィキブックス（Wikibooks）』
移動: 案内、 検索

メインページ > 工学 > 情報技術 > プログラミング > HTML

目次[編集]

進捗状況の凡例
00%.svg 数行の文章か目次があります。
25%.svg:本文が少しあります。
50%.svg:本文が半分ほどあります。
75%.svg: 間もなく完成します。
100 percents.svg: 一応完成しています。

はじめに[編集]

HTML（HyperText Markup Language・ハイパーテキストマークアップランゲージ）は、ウェブページを作成する為のマークアップ言語だ。分らなければ今の時点では大雑把に「ホームページを作るための書き方」と考えて良い。

現在、その後継であるXHTMLやXMLへの移行が始まりつつあるものの、大半のウェブページはHTMLで書かれており、WWWの主役はあいかわらずHTMLなのである。HTMLは自分で要素を覚えて書かなくても「ウェブオーサリングツール」や「ウェブページ作成ソフト」と呼ばれるソフトウェアを使えば、ワープロのようにページを作成することもできる。しかし、その場合でもソフトウェアが人間に代わって自動的（機械的）にHTMLを出力しているに過ぎない。

HTMLはタグという文字列が書かれたテキストファイルである。従って、テキスト文書が書ける環境（例えばWindowsのメモ帳）があれば作れる。

一方、Internet ExplorerやMozilla、Opera、Safari等のウェブブラウザでウェブページを表示すると、様々な色や太字など多くの物理的効果・装飾があるのがわかる。これらの装飾はいずれもHTMLの要素をウェブブラウザが解釈し、レンダリングされた結果だ。

残念ながらかつて（今もその影響が尾を引いているが）はHTMLの解釈が一つに定められているわけではなかった。ウェブブラウザメーカーはW3Cと言う団体が作った仕様書を好き勝手に解釈した挙句、相手よりも優位に立つために仕様書には存在しない要素や属性まで勝手に開発したりした。

そのためウェブブラウザによって表示結果が異なったり、さらにはそのために同じ内容であるのにもかかわらず、特定のウェブブラウザ向けにHTMLを用意しなければならなかったりした。

またCSSは残念なことに現在の最新のウェブブラウザもそのすべてをサポートしているわけではない。 したがってウェブブラウザによって表示結果が異なる。一つのHTMLについて、違うウェブブラウザでどう表示されるかを確認したり、場合によっては特定のウェブブラウザに対する対策を必要としたりする。

最近はW3Cの仕様書に沿い、さらにCSSを利用して文章とデザインを分離することが推奨されている。 なぜならばハンディキャップを持つものも含めて、すべての利用者に平等に情報を提供でき、さらに現在存在するウェブブラウザが進化した後でも利用可能な文章にすることが可能だからだ。

HTML入門[編集]

要素とタグ[編集]

このページではHTMLの最終版となった、HTML4.01に沿って解説していきたい。

HTMLは、要素ごとにタグを用いてその文書構造を示すように記述する。

要素は基本的に開始タグ、内容、終了タグの3つから成り立つ。一部の要素には終了タグを使わないものもある。開始タグは必ず < で始まり、 > で終わる。また終了タグは必ず </ で始まり、 > で終わる。開始タグと終了タグをあわせて、タグと呼ぶ。またタグは大文字小文字を意識しない。ただし全角・半角は区別され、半角で記載しないとタグとみなされない。また、開始タグで大文字を使えば終了タグでも大文字を使うのが慣例である。

以下では簡単な例を用いて、紹介することにしよう。最初の一行の意味は後述するので、今は「おまじない」と考えて欲しい。

記述例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> 簡単な例 </title>
</head>
<body>
 
<p>この文書は非常に簡単な例だ！</p>
 
</body>
</html>

表示例

この文書は非常に簡単な例だ！

2行目の <html> は < で始まり、> で終わるので「開始タグ」である。最終行の </html> は </ で始まり、 > で終わるので「終了タグ」である。<html> という開始タグと </html> という終了タグで、一つの対をなしており、その間に挟まれたものは内容というものになる。これをもって以下ではHTML要素と呼ぶ。3行目の <head> と5行目の </head> も同じ関係であり、以下head要素と呼ぶ。他のタグに関しても同じである。

HTML文章の非常に簡単でなおかつ、重要な点をこの例は示している。

  • html文章は必ず1つだけのHTML要素を持つ。
  • html要素には、必ずhead要素とbody要素（またはフレーム）を一つずつだけ持つ。
  • head要素の中には、必ず1つだけのtitle要素がある。

この例文をウェブブラウザで見ると次のような事が分かる。

  • title要素の内容がタイトルバーなどに表示されているはずである。
  • body要素の中の文章が表示されたはずである。

下は、Windowsにおいて、Lynxを用いて表示した場合の表示例である。

  • Lynxによる表示例

要素と属性[編集]

例えば「文字を赤くする要素」と「文字を青くする要素」にそれぞれ違う要素名をつけるとすると、緑は？ピンクは？薄い赤は？という感じで要素の種類が一気に膨れあがってしまう。そこで「文字の装飾を変える」というようにまとめられないだろうかということで、要素の種類が膨大にならないように、似たような機能については同じ要素名で対応している。 では、「赤くする」「青くする」というのはどのように指定すればいいのだろうか。指定するためには要素に属性を与えることで細かな指定ができるようになっている。

属性は開始タグの要素名と > の間に次のような形で記述する。

<要素名 属性名="属性値">

属性名は属性の種類を与え、属性値は指定する値を与える。 属性値に半角の英数字などを除く値を与える場合にはクォーテーション、またはダブルクォーテーションで囲う必要がある。 属性名は大文字小文字を問わないが、属性値は大文字小文字を区別するものがある。 二つ以上の属性を与える場合には、スペースで間を空けて、続けて記述する。（以下の例の大きく青くなっているケースを見よ）

以下に例を掲載する。 記述例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 属性の簡単な例 </title>
</head>
<body>
<p><font color="red">この文章は赤い</font></p>
<p>この文章は<font color="#FF8888">薄い赤</font>と<font color="#88ff88">薄い緑</font></p>
<p><font color="blue" size="+1">この文章は大きく青い</font></p>
</body>
</html>

表示例

この文章は赤い

この文章は薄い赤と薄い緑

この文章は大きく青い

なおfont要素は、最新のHTMLでは「非推奨要素」となっており、フォントに関する指定には、できる限りスタイルシートを使用するようになっているが、属性の簡単な紹介のために記載している。

このページ「HTML」は、書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にノートへどうぞ。
"http://ja.wikibooks.org/w/index.php?title=HTML&oldid=70159" より作成