HTMLのヘッドには何が入るの？

code, pre { background-color: #eee; } pre { border-left: 6px solid #00458b; font-size: 1rem; line-height: 1.4; margin: 0 0 24px; max-width: 100%; overflow: auto; padding: 24px; width: 100%; }

HTML の head は <head> 要素のコンテンツです — <body> 要素のコンテンツ (これはブラウザーに読み込まれた時に表示されます) とは違っていて、head のコンテンツはページに表示されません。その代わり、head の仕事は文書の メタデータ を含んでいます。上記の例では、head はとても小さいです。

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

しかし、大きなページでは、 head にたくさんの項目があることもあります — お気に入りのウェブサイトに移動して、ウェブ開発ツール (en-US)を使って head コンテンツを確認してみます。ここでの狙いは head に置くことのできるすべての使い方を示すことではなく、むしろ head に入れたくなるのが最も明らかなものの使い方を教えて、なじんでもらうことです。始めましょう。

タイトルをつける

<title> 要素についてはすでに見てきました — これは文書にタイトルを追加するのに使います。しかしこれは <h1> 要素 (これは body コンテンツの最上位レベルの見出し(head)を追加します — 時々ページタイトルとしても参照されます) と混同されます。しかしこれらは別のものです!

  • <h1> 要素はブラウザーに読み込まれた時にページに現れます — 一般的にページごとに 1 回使われて、ページコンテンツのタイトルをマークアップします (ストーリーのタイトルや、ニュースのヘッドラインや、使い方にふさわしいなんでも)。
  • <title> 要素は (文書のコンテンツではなく) 全体の HTML 文書のタイトルを表すメタデータです。

アクティブラーニング: 単純な例を検討する

  1. このアクティブラーニングを始めるのに、我々の GitHub リポジトリに移動して title-example.html page のコピーをダウンロードして頂きたいです。これは次のいずれかでできます
    1. ページのコードをコピー&ペーストして、コードエディターの新規ファイルに入れて、ふさわしい場所に保存します
    2. ページの "Raw" を押すと、新しいタブに生のコードが出ます。次に、ブラウザーメニューから ファイル > 名前を付けて保存... を選んで、ファイルの保存場所を選びます
  2. ファイルをブラウザーで開きます。このようなものが見えるでしょう:

    <h1> コンテンツが出ている場所と、<title> コンテンツが出ている場所がひと目で分かります!

  3. 自分のコードエディターで開いて、この要素を編集して、ブラウザーで再読み込みしてもよいです。楽しんでみてください。

<title> 要素はいろいろな方法で使われます。例えば、ページのブックマーク (ブックマーク > このページをブックマーク または Firefox の URL バーのスターアイコンにて) してみると、提案されたブックマーク名として <title> コンテンツが記入されています。

<title> の内容は後述するように、コンテンツは検索結果にも使われます。

メタデータ: <meta>要素

メタデータはデータを説明するデータで、 HTML には文書にメタデータを追加する「公式な」方法があります — <meta> 要素です。もちろん、この記事で話しているその他のものもメタデータと考えられます。ページの <head> に入る <meta> 要素にはさまざまな種類がありますが、この段階では、ややこしすぎるため、すべては説明しません。その代わり、よく見かけるいくつかのものを説明し、理解を与えます。

HTML文書の文字コードを指定する

上で見てきた例では、この行が含まれていました。

<meta charset="utf-8">

この要素は単に文書のキャラクターエンコーディングを指定しています — それは文書が使うことが許されるキャラクターセットです。utf-8 はあらゆる言語からとてもたくさんの文字を含む汎用的なキャラクターセットです。つまりウェブページがあらゆる言語の表示を取り扱えるのです; このため、作成するすべてのウェブページにこれをセットするのが良いです！例えば、ページで英語と日本語を正しく扱うことができます:

文字エンコーディングを、例えば ISO-8859-1 (ラテン文字のアルファベットの文字セット) に指定すると、ページの表示はメチャクチャな見た目になります。

メモ: ブラウザーによっては (例 Chrome) 自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに utf-8 エンコーディングを設定すべきです。

アクティブラーニング: 文字エンコーディングで実験する

これを試すには、<title> についての前の節で得たシンプルな HTML テンプレート (title-example.html page) をもう一度見てみて、 meta charset の値を ISO-8859-1 に変えて、日本語を追加してみます。私達の使ったコードは次のものです:

<p>Japanese example: ご飯が熱い。</p>

作成者と説明を追加する

多くの <meta> 要素は name と content 属性が含まれます:

  • name は meta 要素の種類を指定します。含まれる情報の種類です。
  • content は実際のメタコンテンツを指定します。

ページに入れるのが便利な 2 つのメタ要素は、ページの著者(author)を定義するものと、ページの説明(description)を与えるものです。例を見てみます:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

著者 (author) の指定はいくつかの点で役立ちます。コンテンツに関する質問があって問い合わせしたい場合、誰がそのページを書いたのかに答えられます。 CMS (コンテンツ管理システム) によっては自動的にページの作者の情報を抽出して、このような目的で利用するための機能があります。

ページの内容に関連したキーワードを含む説明 (description) を指定すると、検索エンジンで行われる関連検索で、ページをより上位にできる可能性があるため役立ちます (この行為に対する用語は Search Engine Optimization (検索エンジン最適化) または SEOといいます)。

アクティブラーニング:検索エンジンにおける description の扱い

description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。

  1. Mozilla Developer Network のフロントページに移動します。
  2. ページのソースを見ます (ページ上で右クリックまたは Ctrl を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。
  3. description の meta タグを見てみます。それはこのようなものです。 
    <meta name="description" content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps.">
  4. ここでお好きな検索エンジンで "MDN Web Docs" を検索します (ここでは Google を使っています) 。 description の <meta> と <title> 要素のコンテンツが検索結果で使われています — 確かに値打ちがあります。

メモ: Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう— これはサイトリンクと呼ばれ、Google's webmaster tools で設定されます — これは Google 検索エンジンでサイトの検索結果を良くする方法です。

注: 多くの <meta> 機能はもう使われていません。例えば、 keyword の <meta> 要素 (<meta name=keywords content=fill, in, your, keywords, here>) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。

メタデータの他の種類

ウェブを旅するにつれ、他の種類のメタデータも見つかるでしょう。ウェブサイトで見る多くの機能はプロプライエタリな作成物で、使うことのできる特定の情報をあるサイト (例えば SNS) に与えます。

例えば、 Open Graph Data は Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

この効果として、 facebook で MDN Web Docs にリンクしたとき、リンクに画像と説明が表示されます。ユーザーにとってより便利になります。

Twitter も同様のプロプラエタリなメタデータを持ちます。 URL が twitter.com で表示される時に同様な効果となります。例えば。

<meta name="twitter:title" content="Mozilla Developer Network">

サイトに自分の好きなアイコンをつける

もっとサイトデザインを豊かにするために、メタデータにカスタムアイコンを追加して、特定のコンテキストで表示されるようにすることができます。このうち最もよく使われるものが ファビコン (ブラウザーの「お気に入り」や「ブックマーク」の一覧を指すために使われる "favorites icon" の略) です。

つつましいファビコンは何年も使われてきています。16ピクセル四方のアイコンが最初の種類であり、様々な場所で使われました。各ページを開いているブラウザータブの中や、ブックマークパネル内のブックマークページの隣でファビコン表示が見られるでしょう。

ページにファビコンを追加するには:

  1. サイトの index ページと同じディレクトリに、 .ico 形式で保存します (大半のブラウザーは .gif や .png のような、より一般的な形式のファビコンにも対応していますが、 ICO 形式を使えば Internet Explorer 6 以降の古いブラウザでも動作することが保証されます)。
  2. HTML の <head> ブロックに下記の行を入れて参照します。 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

ブックマークパネルでファビコンが表示される例です。

最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。

こうした種類のアイコンをいますぐすべて実装することに心配しすぎないでください — これはかなり高度な機能で、このコースが進んでも分からないはずです。ここでの主な目的は、他のウェブサイトのソースコードを見た時に出くわした場合にこれらが何か知ることです。

メモ: もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 Content-Security-Policy ヘッダーの img-src ディレクティブがアクセスを妨害していないかを確認してください。

HTML に CSS と JavaScript を追加する

最近のほとんどすべてのウェブサイトでは、格好よく見せるために CSS や動画や地図、ゲームなどといったインタラクティブな機能を追加するために JavaScript を用いています。これらは最も一般的に用いられ、それぞれ <link> 要素、 <script> 要素で表します。

  • <link> 要素は必ず HTML 文書の head の中に置きます。二つの属性をとり、 rel="stylesheet" はこれが文書のスタイルシートであることを示し、 href はスタイルシートファイルへのパスを表します。

    <link rel="stylesheet" href="my-css-file.css">

  • <script> 要素は head におく必要はありません。実際、文書の最後の body の後 (</body> タグを閉じる前) に置かれることが多いです。これはブラウザーは全ての HTML の内容をすべて読み込んだ後 JavaScript を適用しようとすることをはっきりさせるためです (もし、 JavaScript がまだ存在しない要素にアクセスしようとしたらブラウザはエラーを返します。)。

    <script src="my-js-file.js"></script>

    メモ: <script> 要素は空要素のように見えるかもしれませんが、そうではありませんので、終了タグが必要です。また、外部のスクリプトファイルを読み込むのではなく、 <script> 要素の中にスクリプトを置くこともできます。

アクティブラーニング: ページに CSS と JavaScript を追加する

  1. アクティブラーニングを始めるにあたって、私たちの meta-example.html, script.js ,style.css をコピーしてローカルの同じフォルダに保存してください。ファイル名と拡張子が変わっていないことを確認してください。
  2. HTML ファイルをブラウザとテキストエディタで開いてください。
  3. 先に述べた情報に従って、 <link> 要素と <script> 要素を HTML に書き加えてください。すると CSS と JavaScript が HTML に適用されます。

以上を正しく行い、 HTML を保存してブラウザを更新したら、変化がみられるでしょう。

  • JavaScript が空のリストをページに追加しました。リスト内のどこかをクリックすると、ダイアログボックスが現れてリストの新しい要素となるテキストを入力するように求められます。 OK ボタンを押すと。リストに新しい要素が加わります。リストに既にある要素をクリックすると、ダイアログボックスが現れ要素の名前を変えることができます。
  • CSS によって背景は緑になり文字が大きくなっています。 JavaScript によってページに加えられたいくつかのコンテンツもスタイルが適用されます (黒い境界線の付いた赤いバーは、 JS が生成したリストに CSS が追加したスタイルです)。

メモ: この演習で行きづまって CSS/JS が適用できなくなってしまった場合は、 css-and-js.html サンプルページをチェックしてみてください。

文書の主要な言語の設定

最後に、ページの言語を設定することができること (そしてそうすべきこと) に言及する価値があるでしょう。これは、 lang 属性を開始 HTML タグに追加することで実現することができます (meta-example.html に表示され、以下に表示されています)。

<html lang="en-US">

これは様々なところで役に立ちます。言語が設定されていれば、 検索エンジンによるHTML 文書のタグ付けがより効果的になりますし (たとえば、言語固有の結果を正しく表示できるようになるなど)、読み上げソフトを使用している視覚障碍者にとっても有用です ("six" はフランス語と英語の両方に存在しますが、発音が異なります)。

文書のサブセクションを異なる言語として認識されるように設定することもできます。たとえば、次のようにすると日本語のセクションを日本語として認識されるように設定できます。

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

これらのコードは ISO 639-1 規格で定義されています。それらについての詳細は、 HTML と XML の言語タグにあります。

まとめ

これで HTML head の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次回の記事では、HTML テキストの基礎について説明します。

レッスン