HTML

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動
Wikipedia
 ウィキペディアにHTMLの記事があります。
メインページ > 情報技術 > プログラミング > HTML

目次[編集]

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

基礎[編集]

応用[編集]

HTMLと共に用いられる技術[編集]

はじめに[編集]

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

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

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

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

残念ながらかつて（2005年現在もその影響が尾を引いているが）はHTMLの解釈が一つに定められているわけではなかった。ウェブブラウザメーカーはW3Cという団体が作った仕様書を各々解釈した結果、相手よりも優位に立つために仕様書には存在しない要素や属性まで実装したりした。

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

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

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

HTML入門[編集]

要素とタグ[編集]

このページでは2005年時点で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要素は、HTML4.01では「非推奨要素」となっており、HTML5では廃止されている。フォントに関する指定には、できる限りスタイルシートを使用するようになっている。


スタイルシートによる置き換えの例
<html lang="ja">
<head>
    <title> 属性の簡単な例 </title>
</head>

<style type="text/css">
    .sel1{ color: red;}
    .sel2{ color: #FF8888;}
    .sel3{ color: #88ff88;}
    .sel4{  color: blue; font-size: x-large}
</style>

<body>
    <p class="sel1">この文章は赤い</p>
    <p>この文章は<span class="sel2">薄い赤</span>と<span class="sel3">薄い緑</span></p>
    <p><span class="sel4">この文章は大きく青い</span></p>
</body>
</html>

スタイルシートを使った書き方ではセレクタを仲介して、書式を定義する。コード例では sel1 や sel2 などが、それぞれセレクタである。

.sel1 のようにドット記号を冒頭につけることで、それがクラスであると認識させています。 ドット記号は、英語のピリオド記号を半角英数で入力した場合と同じ記号です。（日本語キーボードなら、右下のようにある平仮名『る』のあるキーに、ドット記号があります。）

セレクタは一度定義してしまえば使いまわしが利くので、文章量が大きいコンテンツでは効率的であろう。

タグ <style type="text/css"> </style> 内部でスタイルを定義していく。

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