1.1 はじめに

どんなシンプルなWebサイトも、どれほど複雑なWebサイトであっても、舞台裏を支えているのはHTMLです。本チュートリアルでは、シンプルかつ「本物の」プロ仕様Webサイトを実際に作ってデプロイしながら、あらゆるWebサイトでコンテンツの編成やオンライン表示の舞台裏を支えている構造を学びます。

HTMLは、世界最初⁵の「Web開発者」であるTim Berners-Lee（図 1.3）⁶によって1993年に導入されて以来、技術標準として絶え間なく進化を繰り返してきました。長い間「HTMLに何があるか」「HTMLに何がないか」という仕様をW3C（World Wide Web Consortium）と呼ばれる団体が管理していましたが、2021年1月にはW3CのHTML5は廃止され、WHATWGのHTML Living Standard⁷が正式にW3Cで勧告として発表されました。詳しくは『どうしてHTML5が廃止されたのか』をご覧ください。

Webブラウザを作っている企業は、規定の仕様を参照して、「テキストをボールド（太字）にする」指定や「文字色を変える」指定、あるいは「両方同時に行う」指定などが正しい形式でブラウザに渡されたときに期待どおりに振る舞うよう、ブラウザを実装します。

図 1.3: 元祖Web開発者Tim Berners-Leeのご尊顔

心配しないで欲しいのですが、HTMLのバージョンが変わるごとに何が変わったのかを細かく調べる必要はありません。ブラウザの機能を拡張して最新技術を取り入れるために、機能の「変更」ではなく単に新機能を定期的に「追加」していることを知っておけば十分です。機能変更より機能追加の方がずっとやりやすいのです。現に、HTMLでよく用いられるさまざまな「要素（element）」は、本チュートリアルで全般的に用いている要素も含め、これまで当初の仕様からほとんど変更されていません。

ただし、そうした要素が何の心配もなく常に安全に使えるとは限りません。というのも、HTMLの仕様は「コミッティー（committee: 委員会）」によって組み立てられた、絶え間なく進化を繰り返す異形のクリーチャーでもあるからです（図 1.4）⁸。具体的ないくつかの事例については「1.2」で解説します。

図 1.4: 「ラクダとは、コミッティーが設計したウマである」

1.2 HTML タグ

HTMLは「HyperText Markup Language」という名前が表すとおり、「マークアップ言語」の一種です。マークアップ言語は、プログラミング言語では「ありません」のでご注意ください。

Webサイトの作者は、HTMLを用いて「コンテンツをどう表示すべきか」を編成および定義できます。具体的には、テキストを太字やイタリックにするなどの「書式（formatting）」を指定したり、「見出し（heading）」「リスト（list）」「テーブル（table: 表）」「画像」「リンク」をコンテンツに追加したりできるということです。

HTMLファイルは、普通のテキストドキュメントに著者がさまざまな注釈を注意深く追加したもの、と考えるとよいでしょう。こうした注釈には「この部分を強調表示（highlight）したい」「ここに画像を置きたい」「ここで追加情報の置き場所を読者に見せたい」といったものがあります。

HTMLのH、つまり「ハイパーテキスト（Hypertext）」とは、Web上のドキュメントから別のドキュメントへ（直線的でない方法で）表示を移動するリンク方法のことです。たとえば、Wikipediaで「HTML」の記事を読んでいると、CSSのような関連トピックへのリンクが強調表示されているとします。このリンクをクリックすると、表示はただちにその別記事に移動します。また、Wikipediaの特定のページにリンクする代わりに、WikipediaのWebサイトそのものにリンクすることもできます。なお、ドキュメントの外部リンクをクリックすると、ブラウザ上でそのページが新しいタブとして表示されることがありますが、これを行う方法については「3.3」で学びます。

ハイパーテキストは、従来のリンクなしドキュメントと比べて技術的に大きな進歩です。探したいものを見つけるのに、紙のようにページをめくったり、Webページを延々下にスクロールしたりせずに済むのです。今やドキュメント間をリンクする機能は「あるのが当たり前」ですが、HTMLの仕様が作成された当時は、技術史にその名を残すに値する大発明だったのです。

HTMLのソースコードは「プレーンテキスト（plain text: 素のテキスト）」形式で書かれます。『テキストエディタ編』で解説したように、プレーンテキスト形式はテキストエディタで編集するのにうってつけです。

ワープロソフトやリッチテキスト形式（RTF）などのWYSIWIG⁹アプローチは、人間がドキュメントにGUI¹⁰やメニューで直接書式を設定できる点は便利ですが、書式をコンピュータで手軽に自動変更するといった柔軟な処理には不向きです。

HTMLではその代わりに特殊な「タグ（tag）」を用いて書式を指定します（図 1.5）¹¹。先ほど説明した「テキストへの注釈」とは、タグのことなのです。

図 1.5: HTMLタグはどこでも使える

後ほど説明しますが、HTMLでサポートされているタグにはさまざまな種類があります。しかし基本的なタグは、以下のように「開始タグ」「文字列」「終了タグ」の形式になります。なお、文字列（string）とは「文字（character）の集まり（sequence）」のことです。

<strong>make them strong</strong>

この典型的なタグの構成を、図 1.6で詳しく説明します。この図には、「タグの名前」（ここではstrong）、「山かっこ（angle brackets）」記号（<と>）、そして「スラッシュ（forward slash）」記号（/）があります。

図 1.6: HTMLの典型的なタグのつくり

HTMLタグは、エンドユーザー（つまりWebサイトを見ている人）のWebブラウザ画面には表示されませんが、舞台裏でブラウザに対して「コンテンツにどう書式を設定するか」「ページ上でどのように表示すべきか」を指示します。strongタグのシンプルな例をリスト 1.1に示します。

これは文字列です。文字列の中には、重要な部分もあれば重要でない部分もありますが、読者が重要な部分に注目してくれるように
したいと思います。そこで、文字列の一部を<strong>強調表示に変更</strong>して、文字列の他の部分より浮き立つようにした
いと思います。

strongタグは、ほとんどのブラウザでボールド（太字）のテキストとしてレンダリング（表示）されます。つまりリスト 1.1は典型的なブラウザ上で以下のような感じで表示されます¹²。

これは文字列です。文字列の中には、重要な部分もあれば重要でない部分もありますが、読者が重要な部分に注目してくれるようにしたいと思います。そこで、文字列の一部を強調表示に変更して、文字列の他の部分より浮き立つようにしたいと思います。

ところで、HTMLではstrongタグの他にボールド用のbタグも「一応」サポートされています。しかし近年のHTMLでは、このbタグやiタグのような「ナマの書式を指定するタグ名」を仕様でこれ以上増やさないようにしており、その代わりに「意味」（堅苦しく言うとsemantics: セマンティクス）を中心に据えたタグ名、いわゆる「セマンティックタグ（semantic tag）」を使うようになっています（コラム 1.2）。たとえば、セマンティックタグであるstrongタグは「そのタグで囲まれたテキストを何らかの形で強調せよ」という指示であり、具体的な強調の方法はブラウザに任されています。

ここまで、HTMLの中核となる概念について解説しました。すなわち「HTMLは、タグで囲まれたコンテンツでできている」「タグはコンテンツを組み立てたり、表示の変更を指定したりするのに使う」ということです。

しかし、神ならぬ悪魔もまた「細部に宿る」ということわざもあります。HTML全体の詳細は果てしがありません。

<p>
  William Shakespeareの『<em>ソネット</em>』には154篇の詩が含まれており、1篇の詩は14行で構成されている
  （14行の冒頭は3つの<a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E8%A1%8C%E9%80%A3">四行
  連句</a>、それに続いて<a href="https://ja.wikipedia.org/wiki/%E4%BA%8C%E8%A1%8C%E9%80%A3">二
  行連句</a>が配置される）。<strong>ソネット18番</strong>はおそらくその中でも最も知られている詩で、出だしは
  以下のとおりである。
</p>
<blockquote>
  <p>
    貴女を夏のある一日と比べてもよいだろうか？<br>
    夏の日よりも貴女はずっと愛くるしく嫋やかなり<br>
    夏の荒々しい風は小さきつぼみを無情に揺さぶり<br>
    それでいて夏の日々はあまりに短い
  </p>
</blockquote>

1.3 プロジェクトを開始する

マークアップとタグの基本的な構造を学び終えたので、いよいよHTML学習用の「サンプルWebサイト」を立ち上げる準備が整いました。このサンプルWebサイトは、「本チュートリアル」「サイトの会社情報」「HTML自体」に関するささやかな情報を提供する模擬的な情報Webサイトで、モックと呼ばれます。このWebサイトに、homeページと2つの補足用ページを開発しながら、さまざまなHTMLタグの使いこなし方を学ぶと同時に、一般公開Webサイトの作り方についても説明します。つまり、あなたの学習の成果がインターネット上で誰でも見れるようになります。今はサンプルの情報をそのまま使いますが、最終的にはこのWebサイトに「あなたの情報」を掲載します。

最初は『Git/GitHub編』のときと同じ手順に沿って進めるので、本セクションはGit操作のおさらいも兼ねています。（Gitの使いこなしに不安があれば今のうちに『Git/GitHub編』を読んでおきましょう。）本セクションを終えると、同チュートリアルと同じくGitHub Pagesで実際に動くWebサイトにサンプルHTMLサイトをデプロイできるようになります（コラム 1.3）。

それでは、サンプルWebサイトで使うディレクトリと最初のGitリポジトリを作りましょう。最初に「ターミナル」アプリでウィンドウをひとつ開いて¹⁴、sample_websiteというディレクトリを作成します¹⁵。

$ mkdir -p repos/sample_website

次は、cdコマンドでディレクトリの中に移動し、touchコマンドでサイトのメインページ用ファイルを作成します。ファイル名はindex.htmlにすべきです¹⁶。

$ cd repos/sample_website
$ touch index.html

続いて、Gitリポジトリを作成（初期化）します。

$ git init
$ git add -A
$ git commit -m "Initialize repository"

先ほどtouchコマンドでファイルを作っておいたのには理由があります。ファイルが何も入っていない空のディレクトリは、そのままではGitでコミットできないので、何か適当なファイルを作って入れておく必要があったのです¹⁷。

作成するファイル名をindex.htmlにすべきと書いたのにも理由があります。いわゆる「homeページ」に使うデフォルトのファイル名にはindex.htmlを使うことになっています。あるWebサイトのドメイン名のみをブラウザのアドレスバーに入力して開くと、このindex.htmlファイルの内容が自動的にデフォルトとして表示されます。言い方を変えると、たとえばexample.comをブラウザで表示すると、そのWebサイトのサーバーは自動的にexample.com/index.htmlを表示します¹⁸。

日本ではWebサイトを指すときに未だに「ホームページ」という言葉が使われることがありますが、この用い方は正確ではありません。本来のhomeページとは、「そのWebサイトを開くと最初に表示される、出発点としての（特定の）ページ」「その中で他のページに移動しても、最終的にそこに戻る（特定の）ページ」を指すものであり、Webサイト全体を指すものではありません。¹⁹。本チュートリアルでは、意味の不正確な俗称の「ホームページ」と区別するため「homeページ」と表記しています。

「Webサイトのデフォルトであるhomeページのファイル名はindex.htmlにする」というのは、厳密には絶対的な決まりではなくWeb開発の慣習（convention）に過ぎず、実際にはWebサーバーの設定でいくらでも他のファイル名に変えられます。そもそもなぜhome.htmlにしなかったのかという素朴な疑問もあるかもしれませんが、この慣習はほぼ完全に定着しているので、事実上絶対に近いと考えてよいでしょう²⁰。今後自分でWebサイトを構築するときも、他の開発者が混乱しないよう、この慣習に従っておくことをおすすめします。

example.comというドメイン名は、先ほども述べたようにサンプル用の標準ダミードメインとして予約されています。今後Webサイトを自分で作るときも、何らかのダミードメインをHTMLで書く必要が生じたらこのexample.comを使うよう習慣づけておくことをおすすめします。なぜなら、このダミーサイトは今後変更される心配がなく、安心してダミーに使えるからです。逆に、たとえばusousousouso800.comのような「たぶん存在しないであろうドメイン名」をその場で適当にでっちあげて入力するのは避けましょう。将来誰かが本当にそのドメインを作ってしまうかもしれません。同じ理由で、ダミーのメールアドレスが必要になったときも、このexample.comを使うようにしましょう²¹。

さて、Gitリポジトリを初期化したので、リポジトリをGitHubにpushする準備が整いました（リポジトリは空っぽ同然ですが）。『Git/GitHub編』で解説したように、github.comをブラウザで開いてログインし、そこでsample_websiteというリポジトリを新規作成し（図 1.7）、「A sample website for Learn Enough HTML to Be Dangerous」という説明文（description）をそこに入力します（図 1.8）²²。

図 1.7: GitHubの「new repository」メニュー

図 1.8: GitHubで新しいリポジトリを作成する画面

リモートリポジトリができたら、そのリモートリポジトリのURLを、手元のローカルリポジトリの「リモートオリジン（remote origin: リモートの取得元を指す）」にメインのURLとして設定します。リモートリポジトリのURLは図 1.9に示した場所にあります。なお、同じGitHubセットアップページの「…or push an existing repository from the command line」セクションに表示されているコマンドをコピーして使っても構いません。

$ git remote add origin <リモートリポジトリのURL>
$ git push -u origin main

このとき、パスワードの入力を求められます。このパスワードはGitHubのパスワードではなく、個人用のアクセストークンにする必要があります。詳しくはGit/GitHub編「2.2 リモートリポジトリ」をご覧ください。

図 1.9: リモートリポジトリのURLの場所

この時点で、『Git/GitHub編』の「4.4 とっておきのボーナス」で解説したときと同じように、mainブランチをWebサイトとして公開する準備をします（図 1.10、図 1.11、図 1.12）。

図 1.10: GitHubリポジトリの「Settings」

図 1.11: mainブランチをWebサイトとして公開する

図 1.12: 新しいGitHub Pagesの設定を保存する

たったこれだけの手順で、サンプルWebサイトがGitHub Pages上で動くようになりました！サンプルWebサイトのURLは、github.ioドメインであなたのユーザー名とリポジトリ名を元に自動的に与えられます（リスト 1.3）。

https://<ユーザー名>.github.io/<リポジトリ名>

たとえばLearn EnoughのサンプルWebサイト（英語版）は、以下のURLで今も動いています。

https://learnenough.github.io/sample_website_reference_implementation

皆さんが作ったサイトのURLをブラウザで開くと、ドメイン名が正しく解決され、index.htmlファイルの内容が自動的にブラウザに表示されるはずです。ただし現時点ではコンテンツが空なので、ブラウザ表示も空っぽです（図 1.13）。このままでは悲しすぎますが、この後「1.4」で変更を加え、さらに第2章で急加速する予定ですのでご安心ください。

図 1.13: 動くようになったWebサイトのさみしい画面

1.4 最初に学ぶタグ

1.3でGitリポジトリを初期化するために、空のindex.htmlファイルを作りましたが、このサンプルWebサイトには最終的にさらにファイルを追加することになります。本セクションでは、手始めに1つのタグの中にコンテンツを追加することにします。その後コミットしてデプロイすれば、Webサイトで見れるようになります。単純なことに見えるかもしれませんが、これは大きな進歩であり、この先を学ぶうえで欠かせない基礎となります。

空のindexページができたので、自分の好きなエディタでこのindex.htmlを開きましょう。本チュートリアルではVSCodeをエディタとして使います。「File > Open」メニューを使えばディレクトリを開くこともできますが、『テキストエディタ編』で解説したように、クールにキメるなら次のようにコマンドラインを用いてHTMLプロジェクトディレクトリ全体を一発で開くのが普通です（図 1.14）²³。

$ code .

なおエディタがSublime Textの場合は「subl .」でできます。このドット「.」はカレントディレクトリを指すと『コマンドライン編』で学んだことを思い出しましょう。

図 1.14: クールにキメるならHTMLプロジェクトディレクトリをコマンドラインで一発オープンだよね

ファイルがまだ1つしかない状態であっても²⁴、このようにプロジェクト全体をコマンドラインで開く習慣を身につけておくのはよいことです。こうしておけば、同じプロジェクトにある複数のファイルを同時に開くのも簡単になります。今後3.1でページを追加するときにもこの技を使う予定です。

とりあえず今はindexファイルにコンテンツを追加できる状態になっています。そのコンテンツとは「Hello, world!」というフレーズをpタグで囲んだものです（リスト 1.4）。なお、pは「パラグラフ（paragraph: 段落）」のことです。pタグで囲むときは、strongタグのときとまったく同様に、開始タグ<p>と終了タグ</p>で囲む必要があります（図 1.6）。

<p>Hello, world!</p>

エディタに表示されるHTMLソースコードは、図 1.15のように自動的にハイライトされます²⁵。この「シンタックスハイライト（syntax highlighting）」機能は、人間がソースコードを読みやすくするためのもので、コンピュータのためではありません。シンタックスハイライトは、index.htmlファイル自体には何の影響も与えませんが、エディタ上でタグとコンテンツを色分けして人間が楽に区別できるようにしています。本チュートリアルのコード例がシンタックスハイライトで色分けされているのもそのためです。

図 1.15: 「Hello, world!」をテキストエディタで表示した様子

index.htmlにコンテンツを追加したので、ブラウザで結果を確認しましょう。macOSの場合は、以下のようにコマンドラインでopenコマンドを実行します。

$ open index.html    # macOSでのみ有効

Linuxシステムの多くは、xdg-openという似たコマンドが使えます。

$ xdg-open index.html    # Linuxでのみ有効

sample_websiteディレクトリをGUIのファイルブラウザ（macOSならFinder、Windowsならエクスプローラ）で開いてファイルをダブルクリックする方法は、ほとんどのOSで共通に使えます（図 1.16）。

図 1.16: index.htmlファイルをダブルクリックするとデフォルトのブラウザで開かれる

どの方法を使ったとしても、最終的にindex.htmlファイルがデフォルトのブラウザで開かれて、図 1.17のように表示されるはずです。

図 1.17: indexページをローカルのブラウザで開いた様子

図 1.17のURLは、インターネット上ではなく自分の手元にある「ローカル」ファイルを指していることにご注意ください。

file:///Users/mhartl/repos/sample_website/index.html

このindexページはローカルシステム上にあり、実際のWebサイトにはまだデプロイされていません。

以下のように変更をローカルのGitリポジトリにコミットし、GitHub Pagesにpushすればデプロイされます。

$ git commit -am "Add a short paragraph"
$ git push

先ほどのサンプルWebサイトのGitHub Pages URL（リスト 1.3）を表示しているページをブラウザ上で更新すると、図 1.18のようになるはずです。デプロイ直後はGitHubPagesがサイトをロードするまでしばらく待つこともありますが、以後は爆速でレスポンスを返します。

図 1.18: 実際のWebサイトに表示されるindexページ

実際のWebサイトの表示はローカルの表示（図 1.17）と完全に同じですが、ブラウザのアドレスバーをよく見ると、URLがgithub.ioになっていることがわかります。つまり実際に動いている本物のWebなのです。

おめでとうございます！production（本番）Webサイトの公開に成功しました。

1.5 HTMLの基本的なスケルトン

現代のWebブラウザは高度なフォールトトレランス機能²⁷を備えているので、リスト 1.4のように素朴でいい加減なコードもレンダリングできますが、それに頼るのは危険です。『Git/GitHub編』でも解説したように、あるタグを追加しておかないと、トレードマーク記号「™ 」がブラウザ上で正しくレンダリングされなくなってしまいます。HTMLページが完全に検証（バリデーション）されていないと、まさにこうした問題が起きます。このような問題を避けるため、ここからは常に検証済みHTMLをサンプルWebページで使うことにします。検証済みHTMLを使うことで、ブラウザの種類が異なっていてもページが正しく表示されるようになります。

図 1.19: 文字化けしたaboutページ（『Git/GitHub編』より）

典型的なHTML構造（スケルトン）は、htmlタグを1つ持ち、その中に2つの要素（head要素を1つとbody要素を1つ）を持ちます。後者の2つの要素のタグは、以下のようにhtmlタグの中でネスト（nest: 入れ子）しています。

<html><head></head><body></body></html>

このままでは読みづらいので、スペースと改行を追加して、HTMLの構造がひと目で分かるようにするのが通例です。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

HTMLではスペース文字を余分に追加しても無視されるので、このように整形してもブラウザ上の表示は変わりません。そしてこの方がドキュメントのソースコードを理解しやすくなります（コラム 1.4）。

  <p>Hello, world!</p>

  <p>Hello,
               world!

               </p>

HTMLの中で<head>と</head>で囲まれているセクションは、「メタデータ（metadata）」を定義するヘッダーコンテナです。なおメタデータとは「データに関するデータ」のことです。

この<head>セクションはブラウザ上では表示されませんが、ブラウザに対してさまざまな指定を行えます。たとえば、コンテンツを正しく表示するのに必要なCSSファイルやJavaScriptファイルの置き場所などの情報を、ブラウザ上に表示せずに指定できます。なお、HTMLヘッダーに追加できる項目について詳しくは『CSS & Design編』で学びます。

<body>と</body>に囲まれたコンテンツは、ブラウザに表示されます。どんなWebサイトでも、コンテンツは必ずHTMLのbodyタグの内側に置かれています。

このHTMLスケルトンを完成させるには、あと2つの要素が必要です（リスト 1.5）。最初に、ブラウザに「document type」を知らせる要素が必要です。これは省略できません。次に、head要素の内側に、空ではないtitle要素を定義する必要もあります。これは一応省略可能ではありますが、省略しないことが強く推奨されています。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
  </body>
</html>

上のDOCTYPEだけは他のタグと書式がかなり異なっていますが、これは「そういうものだ」と考えましょう。これが一体何なのかは気にする必要はありません³⁰。もうひとつのtitleタグは、図 1.6で見たstrongタグや、1.4で見たpタグと同様、開始タグと終了タグがあります。

W3CのHTML validatorというサイトでリスト 1.5のHTMLを検証（バリデーション）してみると、HTML5であると判定されます（図 1.20）。

なお、titleの中身が空なのは違反ですが、bodyの中身は空でも問題ありません。

もうひとつ注目いただきたいのは、このページに関する「エラー」は何も表示されませんが、「lang属性（attribute）がない」という「警告（warning）」が1件表示されるという点です。この警告は後ほど3.3.1で修正する予定です。

図 1.20: リスト 1.5のHTMLは有効だが何か足りない

『Git/GitHub編』の図 1.19でもうひとつ学んだのは、コンテンツをどの「文字セット（character）」で表示するかをブラウザに伝える必要があるということです。Unicodeを文字セットに指定すると、「™」「©」などの記号や「voilà」などのアクセント文字やさまざまな言語特有の文字（漢字やひらがなも含む）などの膨大な文字セットが使えます。これを行うには、リスト 1.6のようにheadにmetaタグを追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

現代のWebサイトはほぼ間違いなく文字セットをUnicodeにしていますので、新規案件でUnicode以外の文字セットを使うことはまずないでしょう（コラム 1.5）。

なおmetaタグは「空要素（empty element）」と呼ばれる特殊なタグなので、閉じタグが存在しません。そのため、空要素は「自己終了タグ（self-closing tag）」とも呼ばれます。

以上でHTMLのスケルトンが完成しました（図 1.21）³¹。リスト 1.7を参考のために再掲載します。

図 1.21: 完全なHTMLスケルトン

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>ページタイトル</title>
5     <meta charset="utf-8">
6   </head>
7   <body>
8   </body>
9 </html>

HTMLスケルトンは大事なので、要素を1行ずつおさらいしておきましょう。

1. doctype宣言
2. html開始タグ
3. head開始タグ
4. titleタグ（開始タグと終了タグでページタイトルを挟む）
5. 文字セットを定義するmetaタグ
6. head終了タグ
7. body開始タグ
8. body終了タグ
9. html終了タグ

先ほどのリスト 1.4のパラグラフを、リスト 1.7のスケルトンに当てはめれば、サンプルWebサイトで使う最初の正しいHTMLページができあがります（リスト 1.8）。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

リスト 1.4から引用したパラグラフは、HTML標準の必須条件に基づいてリスト 1.8ではbodyタグの内側に置かれていることにご注意ください。

ブラウザ画面を更新すると、リスト 1.8の結果は実質的に図 1.18のときと同じになります。ページ本文における唯一の違いは、図 1.22のようにパラグラフの周りの余白がわずかに増えていることです。

図 1.22: 正しい「Hello, world!」ページ

ところで、ページタイトルの表示方法はブラウザごとに多少違いがあります。図 1.23のようにデフォルトのタブにタイトルを表示するブラウザもあれば、図 1.24のように2つ目のタブを追加するまでタイトルをタブに表示しないブラウザもあります。このページタイトルはブラウザによっては表示されないことがありますが、それでもHTML標準において必須とされているので、省略すべきではありません。

またページタイトルは、文章読み上げ機能（screen reader）や、検索エンジンのクローラー³²にとっても重要な情報源でもあるので、その意味でも省略すべきではありません。

図 1.23: Chromeブラウザのページタイトル

図 1.24: Safariブラウザのページタイトル

以上で、変更内容をコミットしてGitHub Pagesに結果をpushする準備が整いました。

$ git commit -am "Convert index page to fully valid HTML"
$ git push

結果は図 1.25のようになります。

図 1.25: productionにデプロイされた正しい「Hello, world!」ページ

1.5.1 演習問題

1. リスト 1.6のHTMLが正しいことをHTML validatorで確認してください。
2. index.htmlの</title>タグをリスト 1.9のとおりに削除すると、図 1.26のように表示がおかしくなる（タイトルが消える）ことを確認してください。これは閉じタグの重要性を示しています。これをHTML validatorでチェックするとバリデーションが失敗する（エラーが表示される）ことを確認してください。
3. index.htmlの中身をリスト 1.10で置き換え、住所に含まれるホワイトスペース（スペースや改行文字などを合わせた呼び方）がブラウザで表示されない（無視される）ことを確認してください。
4. 住所の各行末尾の改行位置に<br>タグ（break: 改行）タグを追加して、ブラウザ上の住所も改行されるようにしてください（図 1.27）

リスト 1.9: 閉じタグが1つ足りないindexページ index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

図 1.26: 何かおかしい...タグを閉じないと！

リスト 1.10: 住所が整形されていない状態

<!DOCTYPE html>
<html>
  <head>
    <title>私は誰？</title>
    <meta charset="utf-8">
  </head>
  <body>
    名無しさん
    東京都千代田区1-1-1
  </body>
</html>

図 1.27: 住所が正しく改行されるようになった様子