HTML 概論

Web ブラウザで Web ページを閲覧するとき、最もシンプルなレベルで、単語を見るでしょう。これらの単語はたいてい、異なるフォントサイズや色といったいくつかのスタイル特性を有しています。またほとんどの場合、ページには画像があります。時には、情報を入力あるいは検索するため、あるいはページの表示を好みのようにカスタマイズするためのフォームがあります。しばしば、ページにはアニメーションをするコンテンツや、他のページに変わっても同じように残り続けるコンテンツが含まれています。

Webページには、CSS、JavaScript、Flash、AJAX、JSONのようなWebにおける技術が使われています。しかし、それらの技術や、Webページの文字・画像・リンクなどは、HTML （HyperText Markup Language）を使って表示されています。 HTML なくして、 Web ページは存在しません。

この記事では HTML の概論を提供します。もし、 Web ブラウザは裏で何を行っているんだろう、と思ったことがあるのであれば、この記事はHTMLの学習のスタート地点になります。

HTML の沿革

1980 年代後半、Tim Berners-Lee は、 CERN （the European Organization for Nuclear Research、欧州原子核研究機構）で物理学者として勤務していました。彼は、インターネットを通じて、科学者が文書を共有する方法を考案します。彼の考案の以前に、インターネット経由で交流する方法は電子メールや FTP （File Transfer Protocol）、Usenet ベースの掲示板のような技術を使った、プレーンテキストに制限されていました。この HTML の考案では、中央のサーバーに保存し、ブラウザを経由してローカルのワークステーションに転送して表示させることのできるコンテンツのモデルを利用しました。それによって、コンテンツへのアクセスが単純化され、高度なテキストフォーマットや画像の表示のような「リッチな」コンテンツを表示させることができるようになりました。

HTML とは

HTML はXMLなどと同じくマークアップ言語です。 HTML は Web ブラウザに、コンテンツをどのように表示させるかを伝えます。 HTML は文字、画像、音声、動画などの「コンテンツ」のみを扱う言語で、装飾やアニメーションなどの処理は基本的には行いません。 HTML は、コンテンツの種類を識別するために、あらかじめ定義された要素を使用します。要素はコンテンツを含むまたは表す「タグ」を 1 つ以上含みます。タグは大なり小なりで囲われ、コンテンツの終わりを示す「終了」タグにはスラッシュが前に置かれます。

例えば、段落の要素は開始タグ「」と終了タグ「」から成り立っています。以下の例は HTML の段落の要素の中に含まれている 1 つの段落を示します。

<p>私は朝、パンを食べました。</p>

このコンテンツを Web ブラウザで表示すると、以下のようになります。

私は朝、パンを食べました。

ブラウザは、タグの中のコンテンツをどのように表示するかという標識として、タグを使用します。

コンテンツを含む要素は通常、他の要素を含むことができます。例えば、斜体の要素「」は、段落の要素の中に埋め込まれることがあります。

<p>私は朝、<i>パン</i>を食べました。</p>

表示されると、以下のようになります。

私は朝、パンを食べました。

いくつかの要素は他の要素を含みません。例えば、画像タグ「<img>」は単純に、コンテンツ（画像）のファイル名を属性として記述します。

<img src="inuno_shasin.jpg">

しばしば、タグの終わりを示すために最後の山括弧の前にスラッシュが置かれることがあります。これは HTML では任意ですが、 HTML 要素を XML のスキーマで実装する XHTML では必須です。

この記事の続きでは、この節で案内されている概念についてより詳細に述べます。しかしながら、実際の HTML を見たいのであれば、 HTML のマークアップの書き方を教えてくれる、対話的なオンラインエディターの Mozilla Thimble を確認して下さい。また、使用可能な要素の一覧やその使い方の説明として HTML 要素リファレンスを見て下さい。

要素 - 基礎構築ブロック

HTML は要素のセットから成り立っています。要素はそのコンテンツにセマンティックな意味を定義します。要素はそのタグ自身を含め、 2 つの対応する要素のタグの間にあらゆるものを含みます。例えば、 要素は段落を示し、 <img> 要素は画像を示します。完全な一覧として HTML 要素リファレンスを見て下さい。

いくつかの要素は、「これは画像です」、「これは見出しです」、あるいは「これは順序付きリストです」といったようにとても明確な意味を持っています。その他は「これはページ上の節です」あるいは「これはテキストの一部です」のようにあまりはっきりしていません。さらにその他は、「これは表示されるべきではないページのための識別情報です」といった技術的な理由で使われます。それでも、何だかんだですべての HTML 要素はセマンティックな意義を持っています。

ほとんどの要素は他の要素を含むことがあり、階層構造を形成します。とてもシンプルで、しかし完全な Web ページに以下のようなものがあります。

<html>
  <body>
    <p>私は朝、パンを食べました。</p>
  </body>
</html>

ご覧のように、 <html> 要素は後続の文章を囲っており、 <body> 要素はページのコンテンツを囲っています。この構造はしばしば、幹（<html>）とその枝（この場合、 <body> と 要素）で木としてとらえられます。技術的には、この階層構造を DOM - Document Object Model と呼んでいます。

HTML 文書はプレーンテキストで書かれます。内容をプレーンテキストとして保存することのできる、どのテキストエディタでも書くことができます。ただし、ほとんどの HTML 著者は文法をハイライトしたり DOM を表示したりする専門のエディタを使うことを好みます。タグ名は大文字または小文字のどちらかで書くこともできます。しかしながら、HTML 標準を整備する世界的な団体である W3C は、小文字を使うことを推奨しています。また、 HTML のための XML のスキーマである XHTML では、小文字であることが必要です。

HTML は小なり記号（「<」）で始まり、大なり記号（「>」）で終わるものすべてに特別な意味を加えます。このようなマークアップをタグと呼びます。シンプルな例が以下です。

<p>これは段落内のテキストです。</p>

この例では開始タグと終了タグがあります。終了タグは開始タグと同じようですが、小なり記号の後に続いてスラッシュを含んでいます。 HTML のほとんどの要素は開始タグと終了タグの両方を使って書かれます。開始タグと終了タグは適切に入れ子にされるべきで、終了タグは開始タグの逆の順番で書かれるべきです。適切な入れ子は、妥当なコードを書くために従わなければならないルールの 1 つです。

これは妥当なコードの一例です。

<em>I <strong>really</strong> mean that</em>.

これは妥当ではないコードの一例です。

妥当ではない: <em>I <strong>really</em> mean that</strong>.

妥当な例では、入れ子となった要素の終了タグは、入れ子にしている要素の終了タグの前に置かれていることに注意して下さい。

HTML5 のパースルールが採用されるまで、ブラウザは妥当ではないコードに直面したとき、妥当ではないコードを同じ方法で解釈せず、異なる結果を生んでいました。ブラウザは Web 制作者に寛大でしたが、しかし不幸にもすべてが同じ方法ではなく、妥当ではない HTML の場合にはほとんど予想できない結果をもたらしました。これらの日々は、今の標準の、妥当ではないコードのパースルールを実装している Internet Explorer 10、Firefox 4、Opera 11.60、Chrome 18 あるいは Safari 5 のようなブラウザの最新の進化によって終わりを迎えます。妥当ではないコードはすべてのモダンブラウザで同じ DOM 木になります。

いくつかの要素はテキストコンテンツや他の要素を一切含みません。これらは空要素であり、終了タグを必要としません。以下に例を示します。

<img src="smileyface.jpg">

多くの人は空要素を、後続するスラッシュを使ってマークアップします（XHTML では必須）。

<img src="smileyface.jpg" />

HTML では、このスラッシュには技術的に何の機能もなく、純粋な形式的選択としての使用です。

属性

開始タグは、前述の例のように追加情報を持つことがあります。この情報のことを属性といいます。属性は大抵、 2 つのパーツから成ります。

属性名
属性値

いくつかの属性は 1 つの値のみを取り得ます。それらは論理型属性で、属性名のみ記述する、あるいは属性値を空にすることで短縮されることがあります。したがって、以下の3つの例はいずれも同じ意味です。

<input required="required">

<input required="">

<input required>

1 つの単語または数から成る属性値はそのとおり書かれても構いませんが、 2 つまたはそれ以上の文字列がある場合は直ちに、値は引用符の中に書かれなければなりません。単引用符（'）と二重引用符（"）の両方が許されています。多くの開発者は、コードが視覚的にあまり不明瞭にならないようにし、ミスを避けるため、常に引用符を使うようにしています。以下の例ではこのミスをしています。

<p class=foo bar> （注意、これは恐らくあなたがそうと思うものを意味するものではありません。）

この例では、「foo bar」が値になると思われるかもしれませんが、引用符が無いため、コードは以下のように書かれたものと解釈されます。

<p class="foo" bar="">

名前指定文字参照

名前指定文字参照（しばしば、何気なく実体と呼ばれます）は、 HTML の中で特別な意味を持つ文字を出力するために使われます。例えば、 HTML は小なり記号と大なり記号をタグの区切り子として解釈します。もし大なり記号をテキストの中で表示したいとき、名前指定文字参照を使うことができます。以下に、知っておかなければならない 4 つの名前指定文字参照を示します。

> 大なり記号を意味する（>）
< 小なり記号を意味する（<）
& アンパサンドを意味する（&）
" 二重引用符を意味する（"）

もっと多くの実体がありますが、これらの 4 つは HTML の中で特別な意味を持つ文字であるため、最も重要です。

文書型とコメント

タグやテキストコンテンツ、実体に加えて、 HTML 文書は最初の行に文書型宣言を含まなければなりません。最新の HTML ではこのような文書型宣言が書かれます。

<!DOCTYPE html>

文書型については長く複雑な歴史がありますが、今、皆が知る必要があるのは、 W3C 標準による HTML と CSS のコードを解釈することや、 1990 年代からの Internet Explorer のふりをしないようにすること（互換モードを見て下さい）を、この文書型がブラウザに指示するということです。

HTML には、ブラウザにページが描画されるときに表示されない、コメントを埋め込む機構があります。これは節のマークアップの説明、あるいはページで作業をするかもしれない他人にメモを残すこと、自分自身に注意を残すことのために便利です。 HTML のコメントは、以下のような記号で囲われます。

<!-- これはコメントです。 -->

完全で、しかし小さな文書

ここまでのことをまとめて、 1 つのとても小さな HTML 文書の例を示します。このコードはテキストエディターにコピーして、 myfirstdoc.html という名前で保存しブラウザで読み込んでみて下さい。文字エンコードは必ず、 UTF-8 を使って保存するようにして下さい。この文書は装飾を使っておらずとても地味に見えますが、これはスモールスタートに過ぎません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>ちっちゃな文書</title>
</head>
<body>
  <h1>私の文書の主題</h1>
  <!-- "h" + "1"（数字の１） であり、"h" + "l"（小文字のＬ）ではないことに注意して下さい。 -->
  <p>お母さん、見て！ 今僕は、<abbr title="Hyper Text Markup Language">HTML</abbr> を書いているんだよ。</p>
</body>
</html>