この翻訳は不完全です。英語から この記事を翻訳 してください。

HTML の文書の head 部分は、ページが読み込まれても Web ブラウザーには表示されない部分です。 この部分には 、例えば、<title>といった情報や CSSへのリンク (もし HTML を CSS で修飾したいならば)、カスタムの favicon へのリンク、そしてほかのメタデータ(HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど)の情報を含んでいます。 この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。

前提知識: 基本的な HTML の知識。 Getting started with HTML で扱うようなもの。
学習の目的: HTML の head について学ぶこと。head の目的は何か、そして head が含む情報の中で最も重要なのは何か、加えてそれが HTML ドキュメントの中でどれほどの影響を持つか。

HTML の head とは何か?

前の記事で扱った HTML ドキュメントをもう一度見てみましょう:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

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

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

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

タイトルをつける

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

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

手を動かして学ぼう: 単純な例を検討する

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

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.<h1> コンテンツが出ている場所と、<title> コンテンツが出ている場所が全く明らかです!

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

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

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

<title> コンテンツは検索結果にも使われ、それは以下で見ていきます。

メタデータ: <meta>要素

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

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

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

<meta charset="utf-8">

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

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,キャラクターエンコーディングを例えば ISO-8859-1 (ラテン語のアルファベット) に指定すると、ページレンダリングはメチャクチャな見た目になります:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

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

手を動かして学ぼう: 文字コードで実験する

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

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

作成者と説明を追加する

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

  • name はメタ要素の種類を指定します; 含まれる情報の種類です。
  • 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 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.">
  4. ここでお好きな検索エンジンで "MDN Web Docs" を検索します (ここでは Yahoo を使っています) 。description の <meta><title> 要素のコンテンツが検索結果で使われています — 確かに値打ちがあります!

    A Yahoo search result for "Mozilla Developer Network"

: 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.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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 にリンクしたとき、リンクに画像と説明が表示されます: ユーザーにとって豊かな体験です。

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter も同様なプロプラエタリなメタデータを持ちます。URL が twitter.com で表示される時に同様な効果となります。例えば:

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

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

もっとサイトデザインを豊かにするには、メタデータの中でカスタムアイコンを追加できまて、これはあるコンテキストの中で表示されるでしょう。

つつましい faviconは、何年も使われてきていますが、この種類のアイコンの最初のものであり、16 x 16 pixel のアイコンはいろいろなところで使われました。各ページを開いているブラウザータブの中や、ブックマークパネル内のブックマークページの隣で favicons 表示が見られるでしょう。

ページに favicon を追加するには:

  1. サイトの index ページと同じディレクトリーに、.ico フォーマットで保存します (大半のブラウザーは .gif.png フォーマットのようなより一般的な favicons をサポートしますが、ICO フォーマットを使えば Internet Explorer 6 まで戻って動作するのが保証されます)
  2. HTML <head> にこれを参照する次の行を追加します:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

ここにブックマークパネル内の favicon の例があります:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

最近ではその他多くのアイコンタイプも考慮します。例えば、 MDN Web Docs ホームページのソースコードに次の行があります:

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

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

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

HTML に CSS と Javascript を追加する

Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> element and the <script> element, respectively.

  • The <link> element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:

    <link rel="stylesheet" href="my-css-file.css">
  • The <script> element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing </body> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)

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

    : The <script> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

手を動かして学ぼう: ページに CSS と Javascript を追加する

  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
  2. Open the HTML file in both your browser, and your text editor.
  3. By following the information given above, add <link> and <script> elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
  • The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)

: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

HTML文書が主にどの言語で記述されているか指定する

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

<html lang="en-US">

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, 例えば、), and it is useful to people with visual impairments using screen readers (例えば、 the word "six" exists in both French and English, but is pronounced differently.)

You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

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

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

まとめ

That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.

 

このモジュールでは

 

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, karaage-kun
 最終更新者: Uemmra3,