ウェブページとは

開くページはどれも、もとはただのテキストファイルです。ほとんどどのページでも、右クリックして「ページのソースを表示」を選べば、サーバーが送ってきたHTMLを読むことができます。

ページはテキストファイル

ブラウザーにアドレスを入力すると、ブラウザーはサーバーにファイルを求め、ただのテキストを受けとります。そのテキストはHTML（HyperText Markup Language）で書かれています。ブラウザーはそれを上から下へ読み、どこが見出し、段落、リンク、画像なのかを判断して、目に見えるページを描きます。ほとんどどのサイトでも確かめられます。ページを右クリックして「ページのソースを表示」を選びましょう。色やレイアウトの裏には、読むことのできる長いテキストファイルがあります。

HTMLはマークアップ言語で、プログラミング言語ではありません。くり返しもなく、計算もしません。その仕事は内容にラベルをつけることです。この行は大見出し、この三行はリスト、この語句は別のページへのリンク、というように。HTMLには、ふつうほかに二つの言語がついてきます。CSSは見た目（色、フォント、余白、レイアウト）を決め、JavaScriptはクリックや入力にページを反応させます。このコースでは一つ目の層を扱います。二つ目はCSSのコースで扱います。

どのページにも共通する骨組み

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

一行目の <!DOCTYPE html> は、初期のウェブの名残です。今の役目は、1990年代のブラウザーのバグをまねる古い互換モードではなく、標準モードを使うようブラウザーに伝えることだけなので、必ず残しておきましょう。次に、文書全体を包む <html> 要素がきます。その lang 属性はページの言語を表します。スクリーンリーダーは正しい発音を選ぶのにこれを使い、翻訳ツールは何を翻訳しているのかを知るのにこれを使います。

<html> の中には二つの部分があります。<head> には、ページそのものには描かれない、ページについての情報が入ります。<meta charset="utf-8"> は、ファイルが使う文字コードを示します。UTF-8は日本語や韓国語を含むあらゆる文字体系の文字を保存できるので、文字化けしません。<title> はブラウザーのタブ、ブックマーク、検索結果に表示される名前で、ページを開いたときにスクリーンリーダーが最初に読み上げるものです。<body> には、画面に表示されるものすべてが入ります。

テキストから木構造へ

ブラウザーはHTMLを一本の長い文字列のままにはしておきません。DOM（Document Object Model）とよばれるオブジェクトの木構造に解析します。各要素はノードになり、ある要素の中に書かれた要素はその子になります。下の図では、title は head の子で、h1 と p は body の子です。CSSのセレクターもJavaScriptもこの木構造に対してはたらくので、入れ子をきちんと書くことが大切なのです。

ブラウザーは寛容です。終了タグを書き忘れても、パーサーはHTMLの標準に書かれた修復のきまりに従って木構造をつくりますが、修復された木構造があなたの意図したものとはかぎりません。構造を正しく書く習慣をつけておけば、後で首をかしげながらデバッグする時間をずいぶん減らせます。

きまりをつくるのはだれか

ティム・バーナーズ＝リーは、CERNで働いていた1989年三月にWorld Wide Webの最初の提案書を書き、1990年の終わりには最初のウェブサーバーとブラウザーがそこで動いていました。それ以来、HTMLは大きく成長しました。今はブラウザーの開発元がつくったグループWHATWGが管理する「HTML Living Standard」で定められています。2019年、W3CとWHATWGはこの一つの版で協力することに合意しました。Living（生きている）とは、文書に版番号がなく、たえず更新されるという意味です。本でまだ見かけるHTML5という名前は、ゆるい呼び名にすぎません。

下のエディターは小さなブラウザーのようにはたらきます。左に入力すると、少しして右に結果が表示されます。「再生」を押すとすぐに描き直します。できたと思ったら「答え合わせ」を押しましょう。ページがHTMLをいくつかテストし、まだ合格していないものを教えてくれます。「最初から」を押すと、はじめのコードにもどります。