HTML 入門 - ウェブ開発を学ぶ

HTML 入門
=======

本来、HTML は、要素で構成される言語です。 HTML は、テキストの断片に、文書の中で様々な意味（段落なのか、箇条書きなのか、表の一部なのか）を与え、文書を論理的なセクションに構成し（ヘッダーを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか）、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提条件
----

このモジュールを始めるにあたり、 HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用する (つまり、ただ見てコンテンツを消費する) ための基本的な知識を持っている必要があります。基本的なソフトウェアをインストールするに挙がっている基本的な作業環境を整えておき、ファイルを扱うにあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「ウェブ入門」の一部です。

**メモ:** 独自のファイルを作成する能力のないコンピューター/タブレット/その他の端末で作業している場合は、JSBin や Glitch などのオンラインコーディングプログラムで（ほとんどの）コード例を試してみることができます。

ガイド
---

このモジュールには、以下の記事が含まれています。これらの記事では、 HTML の基本的な理論をすべて説明し、いくつかのスキルを試すための十分な機会を提供しています。

HTML を始めよう

始めに、 HTML の絶対的な基本を網羅します。 — 要素、属性、その他の重要な用語を定義し、それらが言語のどこに当てはまるかを示しています。また、典型的な HTML ページがどのように構成されているか、 HTML 要素がどのように構成されているかを示し、その他の重要な基本的言語機能を説明します。また、 HTML に興味を持ってもらうために、いくつかの HTML で遊んでみましょう。

head とは? HTML のメタデータ

HTML 文書の head は、ページが読み込まれたときにウェブブラウザーに表示されない部分です。ここには、ページのタイトル (`<title>`)、 CSS へのリンク (HTML コンテンツを CSS でスタイル付けしたい場合)、独自のファビコンへのリンク、メタデータ (誰が書いたか、文書を説明する重要なキーワードなど、 HTML に関するデータ) などの情報が含まれています。

HTML テキストの基礎

HTML の主な役割の 1 つは、テキストの意味付け（**セマンティクス** とも呼ばれています）で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。

ハイパーリンクの作成

ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。

高度なテキスト整形

HTML ではテキスト整形用として、HTML テキストの基礎 の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。

文書とウェブサイトの構造

ページの個々の部分（例えば「段落」や「画像」）を定義するのと同様に、ウェブサイトの領域（例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」）も HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。

HTML のデバッグ

HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。

評価課題
----

以下の評価課題で、上記のガイドにある HTML 基礎の理解度を試してみることができます。

手紙のマークアップ

早かれ遅かれ、手紙を書くことを学びます。これはテキストフォーマットの技術をテストするのにも役立ちます！この評価課題では、マークアップすべき手紙が与えられます。

コンテンツのページの構造化

この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツのページの構造化 HTML の能力をテストします。


HTML テーブル - ウェブ開発を学ぶ

HTML テーブル
=========

HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールでは HTML を使ってテーブルデータを構造化するのに必要な知識を一通り案内します。

必要となる知識
-------

このモジュールを学習する前に、HTML の基本について既に理解している必要があります。もしまだ理解が足りていないと感じているならば HTML 入門を参照してください。

**メモ:** もしあなたが自分のファイルを作成することのできないコンピュータ・タブレット端末そのほかのデバイスで作業をしているならば、 インターネット上の JSBin や Thimbleといったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。

ガイド
---

このモジュールは以下の話題を含んでいます。:

HTML テーブルの基本

この記事を読めば、HTML のテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。

HTML テーブルの高度な機能とアクセシビリティ

このモジュールの 2 つ目の記事では、 HTML のもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表の head,body そしてフッターの section にすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。

評価
--

惑星データの構造化

テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたに HTML を用いて表にしてもらいます。


HTML 早見表 - ウェブ開発を学ぶ

HTML 早見表
========

HTML を使用しているとき、HTML タグを正しく使用する方法や適用方法を簡単に覚える方法があるととても便利です。MDN は広範にわたる HTML ドキュメント と深い解説の HTML ハウツーを提供しています。しかし、多くの場合、手っ取り早くヒントを得たいものです。そのため、早見表では、よく使用するコードの断片をすばやく正確に使用することができるようにしています。

**メモ:** HTML タグは、見た目ではなく、意味づけのために使用しなければなりません。 常に CSS を使って指定されたタグの見た目をガラリと変えることが可能なので、HTML を使用する際は、見た目よりも意味を重視するようにしましょう。

インライン要素
-------

「要素」とは、ウェブページを構成する単一の部品です。ある要素は大きく、コンテナーのように小さな要素を格納します。既定では、「インライン要素」はウェブページの中で隣り合って現れます。インライン要素は、ページ内で必要な分だけ幅を取り、文中の単語や本が並んでいるように、横方向に並んでいます。インライン要素はすべて `<body>` 要素の中に所有することができます。

インライン要素: 用途と例| 用途 | 要素 | 例 |
| --- | --- | --- |
| リンク | `<a>` |
```html
<a href="https://example.org">
A link to example.org</a>.
```
 |
| 画像 | `<img>` |
```html
<img src="beast.png" width="50" />
```
 |
| インラインコンテナー | `<span>` |
```html
Used to group elements: for example,
to <span style="color:blue">style
them</span>.
```
 |
| テキストの強調 | `<em>` |
```html
<em>I'm posh</em>.
```
 |
| イタリックテキスト | `<i>` |
```html
Mark a phrase in <i>italics</i>.
```
 |
| 太字テキスト | `<b>` |
```html
Bold <b>a word or phrase</b>.
```
 |
| 重要なテキスト | `<strong>` |
```html
<strong>I'm important!</strong>
```
 |
| テキストの強調表示 | `<mark>` |
```html
<mark>Notice me!</mark>
```
 |
| 取り消し線のテキスト | `<s>` |
```html
<s>I'm irrelevant.</s>
```
 |
| 下付き文字 | `<sub>` |
```html
H<sub>2</sub>O
```
 |
| 小さなテキスト | `<small>` |
```html
Used to represent the <small>small
print </small>of a document.
```
 |
| 連絡先 | `<address>` |
```html
<address>Main street 67</address>
```
 |
| テキスト引用 | `<cite>` |
```html
For more monsters,
see <cite>The Monster Book of Monsters</cite>.
```
 |
| 上付き文字 | `<sup>` |
```html
x<sup>2</sup>
```
 |
| インライン引用 | `<q>` |
```html
<q>Me?</q>, she said.
```
 |
| 改行 | `<br>` |
```html
Line 1<br>Line 2
```
 |
| 改行可能な位置 | `<wbr>` |
```html
<div style="width: 200px">
  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
</div>
```
 |
| 日時 | `<time>` |
```html
Used to format the date. For example:
<time datetime="2020-05-24" pubdate>
published on 23-05-2020</time>.
```
 |
| コード形式 | `<code>` |
```html
This text is in normal format,
but <code>this text is in code
format</code>.
```
 |
| 音声 | `<audio>` |
```html
<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>

```
 |
| 動画 | `<video>` |
```html
<video controls width="250"
 src="https://archive.org/download/ElephantsDream/ed\_hd.ogv" >
  <a href="https://archive.org/download/ElephantsDream/ed\_hd.ogv">Download OGV video</a>
</video>
```
 |

ブロック要素
------

一方で「ブロック要素」は、ウェブページの横幅いっぱいまでを占めます。ブロック要素は、ウェブページの幅いっぱいに配置され、横に並ぶわけではありません。文章の段落や積み木のように積み重ねられます。

**メモ:** この早見表は、固有の構造を表したり、特別な意味づけをするいくつかの要素に限定しているため、`div` 要素は意図的に含まれていません。`div` 要素は何らかの構造を表すものではなく、特別な意味づけを持っているわけでもありません。

| 用途 | 要素 | 例 |
| --- | --- | --- |
| 単純な段落 | `<p>` |
```html
<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
```
 |
| 広い引用 | `<blockquote>` |
```html
They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
```
 |
| 追加情報 | `<details>` |
```html
<details>
  <summary>Html Cheat Sheet</summary>
  <p>Inline elements</p>
  <p>Block elements</p>
</details>
```
 |
| 順序なしリスト | `<ul>` |
```html
<ul>
  <li>I'm an item</li>
  <li>I'm another item</li>
</ul>
```
 |
| 順序付きリスト | `<ol>` |
```html
<ol>
  <li>I'm the first item</li>
  <li>I'm the second item</li>
</ol>
```
 |
| 定義リスト | `<dl>` |
```html
<dl>
  <dt>A Term</dt>
  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>
```
 |
| 水平区切り線 | `<hr>` |
```html
before<hr>after
```
 |
| テキストの見出し | <h1>-<h6> |
```html
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
```
 |


マルチメディアとその埋め込み - ウェブ開発を学ぶ

マルチメディアとその埋め込み
==============

このコースではこれまでたくさんのテキストを見てきましたが、テキストを使用するだけではウェブは実に退屈なものになってしまいます。もっと興味深い内容でウェブを生き生きとさせるために、検討を始めましょう! このモジュールでは、HTML を使用してウェブページにマルチメディアを入れる方法を探ります。画像を入れるさまざまな方法、動画や音声、さらにはウェブページ全体を埋め込む方法などを説明します。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提条件
----

このモジュールを開始する前に、HTML 入門で述べられてきた、HTML の基本についてのある程度の知識が求められます。このモジュール（や似たようなもの）を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください。

**メモ:** 自分自身のファイルを作れないコンピューター/タブレット/その他の端末で作業している場合、JSBin や Glitch のようなオンラインコーティングプログラムにてコードの実例（の大半）を試すことができます。

ガイド
---

このモジュールには以下の記事があり、ウェブページにマルチメディアを埋め込むための基本的な事柄をすべて説明しています。

HTML の画像

考慮すべき他の種類のマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい `<img>` 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 `<figure>` を使ったキャプションによる注釈付け、CSS 背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。

動画と音声のコンテンツ

次に、 HTML の `<video>` 要素と `<audio>` 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイル形式へのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替手段の追加などが含まれています。

<object> から <iframe> まで — その他の埋め込み技術

この時点では、`<iframe>`、`<embed>`、`<object>` 要素のような幅広い種類のコンテンツをウェブページに埋め込むことができる要素をいくつか見ていきたいと考えています。 `<iframe>` は他のウェブページを埋め込むためのもので、他の 2 つは PDF ファイルなどの外部リソースを埋め込むことができるものです。

ウェブにベクターグラフィックを追加する

ベクターグラフィックは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません。縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックの概要と、ポピュラーな SVG フォーマットをウェブページに含める方法を紹介します。

レスポンシブ画像

この記事では、画面の内側や解像度などが大きく異なる機器でもうまく動作する画像、つまりレスポンシブ画像の概念について学び、それを実装するために HTML が提供するツールについて見ていきます。これにより、異なる端末間でのパフォーマンスを向上させることができます。レスポンシブ画像は、今後学んでいただく CSS のトピックであるレスポンシブデザインの一部に過ぎないのです。

評価試験
----

上記のガイドで説明されている HTML の基本について、以下の評価試験を行います。

Mozilla のスプラッシュページ

今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！

関連情報
----

画像の上にヒットマップを追加する

イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。

ウェブリテラシーの基礎 2 (英語)

優れた Mozilla の基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。ウェブページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業（コンテンツは自由に利用可能で、他の人が共有できることを意味します）の基礎を深く理解してください。


一般的な問題解決に HTML を使う - ウェブ開発を学ぶ

一般的な問題解決に HTML を使う
==================

下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。

### 基本構造

HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。

* 基本的な HTML 文書を作成する方法
* Web ページを論理的なセクションに分割する方法
* 見出しと段落の適切な構成を設定する方法
### 基本的なテキストレベルのセマンティクス

HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。

* HTML を使ってリスト項目を作成する方法
* コンテンツを強調する方法
* テキストが重要だと示す方法
* HTML でコンピュータコードを表示する方法
* 画像やグラフィックに注釈を付ける方法
* 略語をマークして理解しやすくする方法
* Web ページに引用を追加する方法
* HTML で用語を定義する方法
### ハイパーリンク

HTML のための主な理由は ハイパーリンク, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:

* ハイパーリンクを作成する方法
* HTML を使って目次を作成する方法
### 画像とマルチメディア

* Web ページに画像を追加する方法
* Web ページにビデオコンテンツを追加する方法
### スクリプトとスタイリング

HTML は文書の構造だけを解決します。表現の問題は CSS を使うか、ページをインタラクティブにしたいならスクリプトを使います。

* Web ページで CSS を使用する方法
* Web ページで JavaScript を使用する方法
### 埋め込みコンテンツ

* Web ページに他の Web ページを埋め込む方法
* Web ページに Flash コンテンツを追加する方法
あまりない、または上級の問題
--------------

基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。

### フォーム

フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。完全な専用ガイドに目を通すことをお勧めします。ここから始めましょう。

* 簡単な Web フォームを作成する方法
* Web フォームを構築化する方法
### 表の情報

表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の 1 つで、習得するのは簡単ではありません。

* データテーブルの作り方
* HTML テーブルをアクセシブルにする方法
### データ表現

* 数値とコード値を HTML で表現する方法 - 上付き文字と下付き文字、およびコンピュータコードの表現を参照してください
* データ属性の使い方
### 上級テキストセマンティクス

* HTML の改行をコントロールする方法
* 変更をマークする方法 (追加および削除されたテキスト) - `<ins>` と `<del>` 要素を参照してください
### 上級の画像やマルチメディア

* レスポンシブ画像を Web ページに追加する方法
* Web ページにベクター画像を追加する方法
* 画像の上にヒットマップを追加する方法
### 国際化

HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。

* 単一の Web ページに複数の言語を追加する方法
* HTML で日時を表示する方法
### パフォーマンス

* 高速ロードの HTML ページを作成する方法 (en-US)


評価: 太陽系の惑星のデータを構造化する - ウェブ開発を学ぶ

評価: 太陽系の惑星のデータを構造化する
====================

* 前のページ
* Overview: Tables

テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。

| 前提知識: | この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。 |
| --- | --- |
| 目標: | HTML の表やそれに付随する機能に関する理解を確認する。 |

はじめに
----

この評価を開始するには、ローカルコンピュータの新しいディレクトリーに、blank-template.html、minimal-table.css、および planets-data.txt のローカルコピーを作成します。

**メモ:** 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に `<script>`/`<style>` 要素をインラインで配置してください。

やることの概要
-------

あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。

完成した表は次のような外観を備えているはずです:

![](/ja/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

また、ここに掲載されている例を見ることもできます (ソースコードを見ないでください — チートしないでください)。

手順
--

次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは `planets-data.txt` ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。

1. `blank-template.html` のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。
2. 提供されたキャプションを自分のテーブルに追加します。
3. すべての列ヘッダーを含む行をテーブルヘッダーに追加します。
4. すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。
5. すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。
6. 行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。
7. すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。
ヒントと TIPS
---------

* ヘッダー行の最初のセルは空白で、2 列にまたがる必要があります。
* 惑星名の行見出し (例: *土星*) の左側にあるグループの行見出し (例: *木星型惑星*) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。
* ヘッダーを行/列に関連付ける 1 つの方法は、他の方法よりもはるかに簡単です。
評価
--

あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！

* 前のページ
* Overview: Tables


HTML の表の基本 - ウェブ開発を学ぶ

HTML の表の基本
==========

* Overview: Tables
* 次のページ

この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。

| 前提条件: | HTML の基本 (HTML 入門を参照)。 |
| --- | --- |
| 目標: | 基本的に HTML 表に親しむこと。 |

テーブルとは何か
--------

テーブルとは、行と列からなる構造化されたデータの集合 (**表形式データ**) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1 日または 1 週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。

![A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.](/ja/docs/Learn/HTML/Tables/Basics/numbers-table.png)

![A swimming timetable showing a sample data table](/ja/docs/Learn/HTML/Tables/Basics/swimming-timetable.png)

1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。

![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](/ja/docs/Learn/HTML/Tables/Basics/1800-census.jpg)

したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。

### テーブルはどのように動作するか

テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62 個の衛星を持つ木星型巨大ガス惑星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。

太陽系の惑星のデータ (惑星の事実は「Nasa の惑星情報シート - メートル法」から引用)|  | 名前 | 質量 (1024kg) | 直径 (km) | 密度 (kg/m3) | 重力 (m/s2) | 一日の長さ (hours) | 太陽からの距離 (106km) | 平均気温 (°C) | 月の数 | 備考 |
| 地球型惑星 | 水星 | 0.330 | 4,879 | 5427 | 3.7 | 4222.6 | 57.9 | 167 | 0 | 太陽に一番近い |
| 金星 | 4.87 | 12,104 | 5243 | 8.9 | 2802.0 | 108.2 | 464 | 0 |  |
| 地球 | 5.97 | 12,756 | 5514 | 9.8 | 24.0 | 149.6 | 15 | 1 | 私たちの世界 |
| 火星 | 0.642 | 6,792 | 3933 | 3.7 | 24.7 | 227.9 | -65 | 2 | 赤い惑星 |
| 木星型惑星 | 巨大ガス惑星 | 木星 | 1898 | 142,984 | 1326 | 23.1 | 9.9 | 778.6 | -110 | 67 | 最大の惑星 |
| 土星 | 568 | 120,536 | 687 | 9.0 | 10.7 | 1433.5 | -140 | 62 |  |
| 巨大氷惑星 | 天王星 | 86.8 | 51,118 | 1271 | 8.7 | 17.2 | 2872.5 | -195 | 27 |  |
| 海王星 | 102 | 49,528 | 1638 | 11.0 | 16.1 | 4495.1 | -200 | 14 |  |
| 矮星 | 冥王星 | 0.0146 | 2,370 | 2095 | 0.7 | 153.3 | 5906.4 | -225 | 5 | 2006年に惑星として分類されなくなりましたが、これは物議を醸しています。 |

正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。

### 表のスタイル付け

GitHub のライブサンプルもご覧ください。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。

幻想にふけってはいけません。テーブルを Web 上で効果的に使うには、CSS でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に表のスタイリングの記事を参照してください。

このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。スタイルシートはここで、そしてスタイルシートを適用する HTML テンプレートも見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。

### HTML の表を使用するべきではない場面

HTML テーブルは表形式のデータに使用する必要があります - そのために設計されているのです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む 1 行、コンテンツ列を含む 1 行、フッターを含む 1 行などです。アクセシビリティ学習モジュールのページレイアウトでより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザー間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。

つまり、CSS レイアウト手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。

1. **レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。** 視覚障害者が使用するスクリーンリーダーは、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。
2. **テーブルはタグスープを生成します。** 前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。
3. **テーブルは自動的には応答しません。** 適切なレイアウトコンテナ (`<header>`、`<section>`、`<article>`、`<div>`など) を使用する場合、その幅はデフォルトで親要素の 100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。
アクティブラーニング: 最初の表の作成
-------------------

テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。

1. まず最初に、ローカルマシンの新しいディレクトリーに、blank-template.html と minimal-table.css のローカルコピーを作成します。
2. すべてのテーブルの内容は、**`<table></table>`** という 2 つのタグで囲まれています。HTML のボディの中にこれらを追加してください。
3. テーブル内の最小のコンテナは、**`<td>`** 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。

```html
<td>Hi, I'm your first cell.</td>
```

4. 4 行のセルが必要な場合は、これらのタグを 3 回コピーする必要があります。テーブルの内容を次のように更新します。

```html
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 `<td>` 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。

この行が大きくなるのを防ぎ、後続のセルを 2 行目に配置するには、**`<tr>`** 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。

1. 以下のように、既に作成した 4 つのセルを `<tr>` タグ内に配置します。

```html
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
```

2. 1 行作成したら、あと 1、2 行作成してみましょう。各行は追加の `<tr>` 要素で囲み、各セルを `<td>` に含める必要があります。

これにより、テーブルは次のようになります。

| Hi, I'm your first cell. | I'm your second cell. | I'm your third cell. | I'm your fourth cell. |
| --- | --- | --- | --- |
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |

**メモ:** GitHub では simple-table.html としても見つけることができます (こちらも参照してください)。

<th> 要素による見出しの追加
----------------

それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：

```html
<table>
  <tr>
    <td> </td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
```

実際にレンダリングされたテーブルは次のとおりです。

|  | Knocky | Flor | Ella | Juan |
| --- | --- | --- | --- | --- |
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone's leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |

ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。

### アクティブラーニング: 表の見出し

このテーブルを改良してみましょう。

1. まず、あなたのローカルマシンの新しいディレクトリーに dogs-table.html と minimal-table.css ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。
2. テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、**`<th>`** 要素を使用します ('th' は 'table header' を表します)。これは `<td>` とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての `<td>` 要素を `<th>` 要素に変更してください。
3. HTML を保存してブラウザーにロードすると、ヘッダーがヘッダーらしく見えます。

**メモ:** 完成した例は GitHub の dogs-table-fixed.html にあります (こちらもご覧ください)。

### なぜ見出しは便利なのか

私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。

**メモ:** テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。

テーブルヘッダには、`scope` 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。

セルを複数の行や列で結合できるようにする
--------------------

セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。

最初のマークアップは次のようになります。

```html
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>
```

しかし、出力結果は私たちが望むものではありません。

| Animals |  |
| --- | --- |
| Hippopotamus |  |
| Horse | Mare |
| Stallion |  |
| Crocodile |  |
| Chicken | Hen |
| Rooster |  |

"Animals"、"Hippopotamus"、および "Crocodile" が 2 列にまたがり、"Horse" と "Chicken" が 2 行にまたがるようにする方法が必要です。幸いなことに、テーブルのヘッダーとセルには `colspan` 属性と `rowspan` 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、`colspan="2"` を指定すると、セルは 2 列にまたがります。

このテーブルを改善するために `colspan` と `rowspan` を使用しましょう。

1. まず、ご使用のローカルマシンの新しいディレクトリーに、animals-table.html ファイルと minimal-table.css ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。
2. 次に、`colspan` を使用して "Animals"、"Hippopotamus"、および "Crocodile" を 2 列にまたがって作成します。
3. 最後に、`rowspan` を使用して "Horse" と "Chicken" を 2 行にまたがるようにします。
4. 改善を確認するには、ブラウザーでコードを保存して開きます。

**メモ:** 完成した例は GitHub の animals-table-fixed.html にあります (こちらもご覧ください)。

列への共通のスタイル付け
------------

 先に進む前に、この記事で最後に紹介する機能があります。
 HTML では、データの列全体のスタイル情報を 1 か所にまとめて定義することができます — **`<col>`** 要素と **`<colgroup>`** 要素です。列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の `<td>` や `<th>` ごとにスタイル情報を指定するか、`:nth-child()` (en-US) などの複雑なセレクタを使用する必要があります。

次の簡単な例を見てください。

```html
<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
```

これにより、次のような出力結果が得られます。

| Data 1 | Data 2 |
| --- | --- |
| Calcutta | Orange |
| Robots | Jazz |

列内の 3 つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは 3 つすべてに `class` を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、`<col>` 要素で情報を 1 回指定できます。`<col>` 要素は、開始 `<table>` タグのすぐ下の `<colgroup>` コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。

```html
<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
```

事実上、2 つの "スタイル列" を定義しています。1 つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の `<col>` 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。

両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ 1 つの `<col>` 要素を含めるだけで済みます。

```html
<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>
```

`colspan` や `rowspan` と同じように、`span` はスタイルを適用したい列の数を指定する単位なしの数値を取ります。

### アクティブラーニング: colgroup と col

今こそ自分でやってみるべき時です。

以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。

以下の手順に従ってテーブルを再作成してください。

1. まず、timetable.html ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリーに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。
2. `<col>` 要素を追加することができる `<table>` タグのすぐ下のテーブルの上部に `<colgroup>` 要素を追加します (以下の残りの手順を参照)。
3. 最初の 2 つの列はスタイルなしのままにする必要があります。
4. 3 列目に背景色を追加します。`style` 属性の値は`background-color:#97DB9A;` です。
5. 4 列目に別の幅を設定します。`style` 属性の値は `width: 42px;` です。
6. 5 列目に背景色を追加します。`style` 属性の値は `background-color: #97DB9A;` です。
7. これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6 番目の列に異なる背景色と境界線を追加します。`style` 属性の値は `background-color:#DCC48E; border:4px solid #C1437A;` です。
8. The last two days are free days, so just set them to no background color but a set width; the value for the `style` attribute is `width: 42px;`
 最後の 2 日間は空き日なので、背景色を設定せずに幅を設定します。`style` 属性の値は `width: 42px;` です。

例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、timetable-fixed.html として GitHub に私たちのバージョンを見つけることができます (それもライブを見てください)。

まとめ
---

HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。

* Overview: Tables
* 次のページ


HTML 表の高度な機能とアクセシビリティ - ウェブ開発を学ぶ

HTML 表の高度な機能とアクセシビリティ
=====================

* 前のページ
* Overview: Tables
* 次のページ

このモジュールの 2 番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。

| 前提知識: | HTML の基礎 (HTML 入門を参照)。 |
| --- | --- |
| 目標: | 表のより高度な機能やアクセシビリティについて学ぶ |

<caption> を用いて表にキャプションを追加する
---------------------------

テーブルにキャプションを付けるには、`<caption>` 要素内に配置し、それを `<table>` 要素内にネストします。これは `<table>` 要素の開始タグすぐ下に置くべきです。

```html
<table>
  <caption>
    ジュラ紀の恐竜
  </caption>

  ...
</table>
```

上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。

キャプションは `<table>` タグのすぐ下に配置します。

**メモ:** `summary` 属性は、`<table>` 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。 ただし、`summary` は HTML5 仕様では推奨されておらず、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに `<caption>` 要素を使用することをお勧めします。

### アクティブラーニング: キャプションの追加

前の記事で最初に出会った例を再考しながら、これを試してみましょう。

1. HTML 表の基本の最後から語学教師の学校の時間割を開くか、または timetable-fixed.html ファイルのローカルコピーを作成してください。
2. 表に適切なキャプションを追加します。
3. コードを保存してブラウザーで開くと、コードがどのように見えるかがわかります。

**メモ:** GitHub で私たちのバージョンを見つけることができます — timetable-caption.html を見てください(ライブもご覧ください)。

<thead>、<tfoot>、<tbody> を用いて構造を追加する
-----------------------------------

表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の 1 つは、`<thead>`、`<tfoot>`、および `<tbody>` を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。

これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。

それらを使用するには、

* `<thead>` 要素は、表のヘッダー部分をラップする必要があります — これは通常、列見出しを含む最初の行になりますが、必ずしもそうとは限りません。 `<col>` 要素や `<colgroup>` 要素を使用している場合、表のヘッダーはそれらのすぐ下にくるはずです。
* `<tfoot>` 要素は、表のフッター部分をラップする必要があります — これは、例えば、前の行の項目が合計された最終行になります。 表のフッターは、期待通りに表の一番下に配置することも、表のヘッダーのすぐ下に配置することもできます(ブラウザーはそれを表の一番下に表示します)。
* `<tbody>` 要素は、表のヘッダーまたはフッターではない表のコンテンツの他の部分をラップする必要があります。 どのように構成することにしたかに応じて、表のヘッダーの下に出現するか、時にはフッターの下に出現することがあります (上記の注を参照)。

**メモ:** `<tbody>` は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。 これを確認するには、`<tbody>` を含まない以前の例の 1 つを開き、ブラウザー開発者ツールの HTML コードを調べます — ブラウザーによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。

### アクティブラーニング: 表構造の追加

これらの新しい要素を実行してみましょう。

1. まず、新しいフォルダに spending-record.html と minimal-table.css のローカルコピーを作成します。
2. ブラウザーでそれを開いてみてください — あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。
3. 明白なヘッダー行を `<thead>` 要素内に、 "SUM" 行を `<tfoot>` 要素内に、そして残りの内容を `<tbody>` 要素内に配置します。
4. 保存して更新すると、`<tfoot>` 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。
5. 次に、`colspan` 属性を追加して "SUM" セルを最初の 4 列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。
6. これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の `<head>` の中には、空の `<style>` 要素があります。 この要素内に、次の CSS コード行を追加します。

```css
tbody {
  font-size: 90%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```

7. 保存して更新し、結果を確認します。 `<tbody>` 要素と `<tfoot>` 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクタ/規則を記述する必要があります。

**メモ:** 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(CSS 入門は始めるのに良い場所です。 スタイリングされた表に関する具体的な記事もあります)。

完成した表は次のようになります。
```

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My spending record</title>
    <style>
 html {
 font-family: sans-serif;
 }

 table {
 border-collapse: collapse;
 border: 2px solid rgb(200, 200, 200);
 letter-spacing: 1px;
 font-size: 0.8rem;
 }

 td,
 th {
 border: 1px solid rgb(190, 190, 190);
 padding: 10px 20px;
 }

 th {
 background-color: rgb(235, 235, 235);
 }

 td {
 text-align: center;
 }

 tr:nth-child(even) td {
 background-color: rgb(250, 250, 250);
 }

 tr:nth-child(odd) td {
 background-color: rgb(245, 245, 245);
 }

 caption {
 padding: 10px;
 }

 tbody {
 font-size: 90%;
 font-style: italic;
 }

 tfoot {
 font-weight: bold;
 }
 </style>
  </head>
  <body>
    <table>
      <caption>
        How I chose to spend my money
      </caption>
      <thead>
        <tr>
          <th>Purchase</th>
          <th>Location</th>
          <th>Date</th>
          <th>Evaluation</th>
          <th>Cost (€)</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">SUM</td>
          <td>118</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Haircut</td>
          <td>Hairdresser</td>
          <td>12/09</td>
          <td>Great idea</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Lasagna</td>
          <td>Restaurant</td>
          <td>12/09</td>
          <td>Regrets</td>
          <td>18</td>
        </tr>
        <tr>
          <td>Shoes</td>
          <td>Shoeshop</td>
          <td>13/09</td>
          <td>Big regrets</td>
          <td>65</td>
        </tr>
        <tr>
          <td>Toothpaste</td>
          <td>Supermarket</td>
          <td>13/09</td>
          <td>Good</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
```

**メモ:** Github では、それを spending-record-finished.html として見つけることもできます(ライブもご覧ください)。

ネストした表
------

`<table>` 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。

次のマークアップは、単純なネストした表を示しています。

```html
<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>
```

その出力は次のようになります。

| title1 | title2 | title3 |
| --- | --- | --- |
|

|  |  |  |
| --- | --- | --- |
| cell1 | cell2 | cell3 |

 | cell2 | cell3 |
| cell4 | cell5 | cell6 |

視覚障碍者向けの表
---------

データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年 8 月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。

Items Sold August 2016|  |  | Clothes | Accessories |
|  |  | Trousers | Skirts | Dresses | Bracelets | Rings |
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 |
| Brussels | 51 | 27 | 38 | 69 | 28 |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 |

しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、Web ページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。

**メモ:** WHO のデータによると、2017 年の視覚障碍者は約 253 百万人です。

記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。

### 列ヘッダーと行ヘッダーを使用する

スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。

前の記事ですでにヘッダーについて説明しました — `<th>` 要素によるヘッダーの追加を参照してください。

### scope 属性

この記事の新しい話題は `scope` 属性です。 これは `<th>` 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。

```html
<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>
```

そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。

```html
<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>
```

スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。

`scope` には、さらに 2 つの可能な値、`colgroup` と `rowgroup` があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(`<th>`)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の 3 つの小見出しを定義する見出しです。 従って、"Clothes" は `scope="colgroup"` の属性を得るべきですが、それ以外は `scope="col"` の属性を得ます。

### id 属性と headers 属性

`scope` 属性を使用する代わりに、`id` 属性と `headers` 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。 使い方は次のとおりです。

1. 各 `<th>` 要素に一意の `id` を追加します。
2. 各 `<td>` 要素に `headers` 属性を追加します。 各 `headers` 属性には、そのセルのヘッダーとして機能する全ての `<th>` 要素の `id` のリストを、スペースで区切って含める必要があります。

これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。 これは、それが属する各列と各行のヘッダーによって定義されます。 スプレッドシートのようなものです。 それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。

支出コストの例に戻ると、前の 2 つのコードは次のように書き直すことができます。

```html
<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="haircut">Haircut</th>
    <td headers="location haircut">Hairdresser</td>
    <td headers="date haircut">12/09</td>
    <td headers="evaluation haircut">Great idea</td>
    <td headers="cost haircut">30</td>
  </tr>

  ...
</tbody>
```

**メモ:** この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 `scope` アプローチは通常ほとんどの表に十分です。

### アクティブラーニング: scope と headers で遊ぶ

1. この最後の演習では、まず items-sold.html と minimal-table.css のローカルコピーを新しいディレクトリーに作成してください。
2. この表をより適切にするために適切な `scope` 属性を追加してみてください。
3. 最後に、最初のファイルの別のコピーを作成して、今度は、`id` 属性と `headers` 属性を使用して表にアクセスしやすくします。

**メモ:** 完成した例と照らし合わせて作業内容を確認できます — items-sold-scope.html(ライブもご覧ください)および items-sold-headers.html(ライブもご覧ください)。

まとめ
---

表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — スタイリングされた表を参照してください。

* 前のページ
* Overview: Tables
* 次のページ


スキルテスト: リンク - ウェブ開発を学ぶ

スキルテスト: リンク
===========

このスキルテストの目的は、あなたが HTML でのハイパーリンクの実装を行う方法を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

このタスクでは、クジラの情報ページのリンクを埋めるのを手伝っていただきます。

* 最初のリンクは、現在のページと同じディレクトリーにある `whales.html` というページにリンクされるようにします。
* また、マウスオーバーしたときに、このページにはシロナガスクジラやマッコウクジラの情報が含まれていることをユーザーに指示するツールチップを付けましょう。
* 2 つ目のリンクは、ユーザーの既定のメールアプリケーションで、受信者を "whales@example.com" に設定してメールを開くためのリンクに変更しましょう。
* メールの件名が「クジラについての質問」と自動的に記入されるように設定すると、ボーナスポイントも得られます。

**メモ:** この例の 2 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、4 つのリンクが適切な場所にリンクするように記入していただきます。

* 最初のリンクは、カレントディレクトリーの中の `blue` というディレクトリーにある `blue-whale.jpg` という画像にリンクするようにしましょう。
* 2 つ目のリンクは、カレントディレクトリーの 1 つ上のディレクトリーである `narwhal` というディレクトリーにある `narwhal.jpg` という画像にリンクするようにしましょう。
* 3 つ目のリンクは、UK の Google 画像検索にリンクしてください。ベース URL は `https://www.google.co.uk` で、画像検索は `imghp` というサブディレクトリーに配置されています。
* 4 つ目のリンクは、現在のページの一番下にある段落にリンクしましょう。これは `bottom` という ID が付いています。

**メモ:** この例で最初の 3 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

以下のリンクは、一角獣に関する情報ページ、対応するメールアドレス、および 4MB の PDF ファクトファイルへのリンクです。この課題では、次のことを行ってください。

* リンクテキストの書き方が悪い既存の段落を選び、良いリンクテキストがあるように書き直しましょう。
* 警告を追加する必要があるリンクには、警告を追加しましょう。

**メモ:** この例における最初と 3 つ目のリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「リンク、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。


HTML を始めよう - ウェブ開発を学ぶ

HTML を始めよう
==========

* Overview: Introduction to HTML
* 次のページ

この記事では HTML の不変的な基礎を扱って、始められるようにします。要素や属性などの重要な用語 (すでに聞き覚えはあるかもしれません)、それらが言語にどう組み込まれているか説明します。また、HTML 要素の構造、典型的な HTML ページの構造を見せて、その他の重要な基礎言語機能について説明します。それでは、 HTML の例とともに見ていきましょう。

|  |  |
| --- | --- |
| 前提条件: |
 基礎的なコンピューターリテラシー、
 基本的なソフトウェアのインストール、
 ファイルの取り扱いに関する基本的な理解。
  |
| 目的: | HTML の基本的な知識を身につけ、いくつかの HTML 要素を書く練習をする。 |

HTML とは？
--------

HTML (ハイパーテキスト・マークアップ・ランゲージ／HyperText Markup Language) は、訪れたウェブサイトの構成をブラウザーに対して伝えるために使うマークアップ言語です。 HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は要素の集まりからなり、コンテンツの一部を要素で囲む（*マークアップ*する）ことで、特定の見せ方・動かし方に変えられます。囲むためのタグは、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。たとえば、次の一行を見てください。
```

My cat is very grumpy
```

この行を独立させたい場合、それを段落要素 (`<p>`) で囲んで段落であることを指定することができます。

```html
<p>My cat is very grumpy</p>
```

**メモ:** HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば `<title>` 要素は `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` などと書くことができて、どれも正しく動作します。しかし、すべての要素を小文字で書くことが、一貫性や信頼性、その他の理由のために最良の習慣です。

HTML 要素の構成
----------

前段で紹介した段落要素についてもう少し詳しく見ていきましょう。

![HTML の要素の構造を示すサンプルコード。 <p> My cat is very grumpy </p>.](/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png)

この要素の主要な部分は次のとおりです。

* **開始タグ (Opening tag):** 要素名（この場合は段落を表す *p*）、囲んでいる開き山括弧と閉じ山括弧で構成されます。これは要素が始まってその効果が開始する位置を宣言します。この場合、段落が始まる位置です。
* **内容 (Content):** これは要素の内容です。この例の場合、段落のテキストです。
* **終了タグ (Closing tag):** 開始タグと同じですが、要素名の前にスラッシュを記載します。これは、要素の終わりを示すものです。終了タグを記載し忘れるのは、初心者にありがちなミスで、おかしな結果を生むことがあります。

要素は開始タグ、内容、終了タグが続いたものです。

### 実習: 最初の HTML 要素を作ってみる

下記の「編集可能なコード」内の行を `<em>` および `</em>` タグで囲むよう編集してください。要素を開始するには、開始タグ `<em>` を行の先頭に付けてください。要素を終了するには、行の最後に終了タグ `</em>` を付けてください。こうすることで、行がイタリック体（斜体）で書式化されるはずです。変更した内容が *Output* 領域に反映されるのを確認してください。

もし入力ミスをしても、*リセット* ボタンを押すことでいつでもリセットできます。本当に行き詰ってしまったら、 *答えを見る* ボタンを押せば答えを見ることができます。
```

<h2>ライブ出力</h2>
<div class="output" style="min-height: 50px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  This is my text.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="リセット" />
  <input id="solution" type="button" value="答えを見る" />
</div>
```

```
html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = "<em>This is my text.</em>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを見る";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "答えを見る") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを見る";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// テキストエリアでのタブキーによるタブ移動を止め、
// 代わりにキャレット位置にタブを書くようにします。
textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// ユーザーがテキストエリアのコードを更新するたびに、保存されている userCode を更新します。

textarea.onkeyup = () => {
  // ユーザーコードが表示されているときのみ状態を保存したい。
  // 答えがユーザーコードのを上書きして保存されることはありません。
  if (solution.value === "答えを見る") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### 要素を入れ子にする

要素の中に要素を入れることができます。これは**入れ子**（ネスト）と呼ばれています。たとえば "My cat is **very** grumpy." と記述したい場合、"very" という語を `<strong>` 要素で囲むことができ、その語がより強く強調表示されることを意味します。

```html
<p>My cat is <strong>very</strong> grumpy.</p>
```

入れ子にする方法には、正しい方法と間違った方法があります。上の例では、最初に `p` 要素を始め、次に `strong` 要素を始めました。適切に入れ子にするには、先に `strong` 要素を閉じてから `p` を閉じなければなりません。

次のものは、間違った入れ子の例です。

```html
<p>My cat is <strong>very grumpy.</p></strong>
```

**タグを開始および終了するには、互いの内側または外側にあるような形にしなければなりません**。上の例のような重ね方では、ブラウザーはあなたの意図を推測しなければなりません。このような推測は、予期しない結果をもたらす可能性があります。

### 空要素

全ての要素が上述の開始タグ、コンテンツ、終了タグのパターンに従っているわけではありません。要素によっては単一のタグのみで構成され、通常、文書内でそれが含まれている場所に何かを挿入したり埋め込んだりするために使用されます。そのような要素は空要素と呼ばれます。例えば、以下の `<img>` 要素はウェブページ上のそれが含まれた場所に 1 つの画像ファイルを埋め込みます。

```html
<img
 src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
 alt="Firefox icon" />
```

これはページに次の画像を出力するはずです。

**メモ:** HTML では、例えば `<img src="images/cat.jpg" alt="cat" />` のように、空要素のタグの末尾に `/` を追加する必要はありません。しかし、これは有効な構文であり、 HTML を有効な XML にしたい場合に使うことがあります。

属性
--

要素は次のように属性 (Attribute) を持つこともできます。

![強調された 'class="editor-note"' 属性を持つ段落タグ](/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png)

属性は実際のコンテンツの中で表示させたくない、要素に関する追加情報を保有します。この例では、**`class`** 属性は、要素をスタイル情報の対象とするために使用される識別名です。

各属性は次の要件を満たす必要があります。

1. 属性名と要素名の間に 1 つの半角スペース（その要素内にすでに 1 つ以上の属性が設定されている場合は、併せて各属性名の間）
2. 属性名とそれに続く等号 (=)
3. 属性値、先頭と末尾を引用符で囲む
### 実習: 要素に属性を追加する

要素のもう一つの例は`<a>`です。これは*anchor*の略です。アンカーは、それが囲んでいるテキストをハイパーリンクにすることができます。アンカーは様々な属性を受け取ることができますが、以下のようなものがあります。

`href`

この属性の値は、リンク先のウェブアドレスを指定します。例えば、`href="https://www.mozilla.org/"` です。

`title`

この属性にはリンクについての追加情報（リンク先のページが何であるかなど）を記載します。例えば、`title="The Mozilla homepage"` のように書きます。この内容は、リンクにマウスカーソルを当てた時にツールチップとして表示されます。

`target`

リンク先の内容を表示する場所（閲覧コンテキスト）を指定します。例えば、 `target="_blank"` と指定すると、リンク先の内容を新しいタブに表示します。現在のタブにリンク先の内容を表示させたい場合は、この属性を省略します。

それでは以下の入力欄を編集して、好きなサイトのリンクを張ってみましょう。

1. `<a>` 要素を追加してください。
2. `href` 属性と `title` 属性を追加してください。
3. 新しいタブでリンク先を開くために `target` 属性を追加してください。

変更した内容が *ライブ出力* 領域に反映されるのを見ることができます。リンクが表示され、マウスを当てると `title` 属性の値が表示され、クリックすると新しいタブを開き、`href` 属性にあるウェブアドレスに移動することが確認できるはずです。要素名と各属性の間にはスペースを記載する必要があることを覚えておいてください。

もし、間違えた場合は、常に *リセット* ボタンを使用してリセットすることができます。実に困ったときは、*答えを見る* ボタンを押して、答えを見ることができます。
```

<h2>ライブ出力</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  <p>A link to my favorite website.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="リセット" />
  <input id="solution" type="button" value="答えを見る" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="\_blank">favorite website</a>.</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを見る";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "答えを見る") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを見る";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "答えを見る") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### 論理属性

沢山の HTML ソースを見ていくうちに、属性値のない属性を見かけることがあるでしょう。これは文法的に許されています。これらは「論理属性」と呼ばれています。論理属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、 `disabled` 属性は `input` 要素に指定することができる論理属性と考えてください。（これを使用して、ユーザーが入力できないようにフォームの入力要素を「無効」にします。無効にされた要素は、通常グレーアウトした外見になります。）

```html
<input type="text" disabled="disabled" />
```

略式で、以下のように書いても受け入れられます。

```html
<!-- disabled 属性を使用すると、エンドユーザーが入力ボックスにテキストを入力できないようにします。 -->
<input type="text" disabled />

<!-- disabled 属性がないため、テキスト入力が許可されます。 -->
<input type="text" />
```

参考までに、上記の例では無効ではないフォームの入力要素も記載しています。上の例の HTML は、このような結果になります。

### 属性値を引用符で囲むことの省略

他にも多くのサイトのコードを見ていると、引用符を使わない属性値など、奇妙なマークアップのスタイルに出会うことがあります。これは特定の状況では許されることですが、他にもマークアップが崩れてしまうことがあります。例えば、先ほどのリンクの例をもう一度見てみると、 `href` 属性だけを使った基本的なバージョンを次のように書くことができます。

```html
<a href=https://www.mozilla.org/>favorite website</a>
```

しかし、例えば次のように半角スペースの入った `title` 属性を追加すると動作がおかしくなります。

```html
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
```

この場合だと「`title` 属性は `The` という属性値を持ち、それとは別に `<a>` 要素が `Mozilla` と `homepage` という論理属性を持つ」というようにブラウザーは誤解します。明らかに、これは意図したものではありません。以下のライブ例でわかるように、エラーや予期せぬ動作を発生させます。リンクの上にマウスを当てて、タイトルテキストを表示してみてください。

安全なコードを書くために、必ず属性値には引用符をつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。

### 二重引用符か単一引用符か

この記事では、属性を囲む引用符としてすべて二重引用符 (`"`) を使用しています。しかし HTML コードによっては単一引用符 (`'`) を見ることがあるかもしれません。これは書き方の問題なので、属性値は二重引用符で囲んでも単一引用符で囲んでも構いません。例えば次の 2 つの行は等価です。

```html
<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>
```

単一引用符と二重引用符を混在させることはできないことに注意してください。この（以下の）例は引用符を混在させたもので、間違った動作をします。

```html
<a href="https://www.example.com'>A link to my example.</a>
```

しかし、一方の型の引用符を使用している場合、属性値の *中* にもう一方の型の引用符を記載することができます。

```html
<a href="https://www.example.com" title="Isn't this fun?">
  A link to my example.
</a>
```

引用符を同じ種類の引用符（単一引用符または二重引用符）の中で使用する場合は、 HTML エンティティを使用する必要があります。例えば、このようにすると壊れてしまいます。

```html
<a href='https://www.example.com' title='Isn't this fun?'>A link to my example.</a>
```

代わりに、このようにしてください。

```html
<a href="https://www.example.com" title="Isn't this fun?">A link to my example.</a>
```

HTML 文書の構成
----------

これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

上記の HTML 文書を例に、順に解説していきます。

1. `<!DOCTYPE html>`: 文書型定義です。 HTML の黎明期（1991 ～ 1992 年ごろ）には、文書型定義は、 HTML ページが良い HTML とみなされるために従わなければならない一連のルールへのリンクとして機能するものでした。文書型定義は、以前は次のような形で使用されていました。

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

最近は、文書型定義は歴史的な遺物であり、他のすべてが正しく動作するために記載する必要があるものです。`<!DOCTYPE html>` は、有効な文書型定義としてカウントされる最も短い文字列です。知っておくことがあることはこれだけです。
2. `<html></html>`: `<html>` 要素。ページ上のすべての内容を囲む要素です。ルート要素と呼ばれることもあります。
3. `<head></head>`: `<head>` 要素。この要素は、 HTML ページに記載する、ページが閲覧者に見せる**コンテンツではないもの**すべてを入れるコンテナーとして機能します。これには、検索結果に現れるキーワードやページの説明文、内容をスタイル設定するための CSS、文字セットの宣言などが記載されます。これについては、次の記事で詳しく説明します。
4. `<meta charset="utf-8">`: `<meta>` この要素は、 `<base>`, `<link>`, `<script>`, `<style>` または `<title>` など、他の HTML メタ関連の要素では表現できないメタデータを表現します。`charset` 属性は、文書の文字セットを UTF-8 に設定します。これは、人間の書いた言語の大半の文字を含むものです。この設定により、ページは、それが含むかもしれないあらゆるテキスト内容を扱うことができます。これを設定しない理由はありませんし、後でいくつかの問題を回避するのに役立ちます。
5. `<title></title>`: `<title>` 要素。ページのタイトルを設定します。このタイトルは、ページが読み込まれたブラウザータブに表示されるタイトルです。また、ページタイトルは、そのページがブックマークされたときの説明にも使用されます。
6. `<body></body>`: `<body>` 要素。テキスト、画像、動画、ゲーム、再生可能な音声トラックなど、ページに表示される**すべての**コンテンツがこの中に記載されます。
### アクティブラーニング: HTML 文書にいくつかの機能を追加

もし HTML 文書を書く練習をローカルコンピューターで試したい場合は、次のようにしてください。

1. 上記の HTML ページのコードサンプル全体を選択して「コピー」します。
2. テキストエディター上で新規ファイルを作成します。
3. 新規テキストファイルの中で「貼り付け」します。
4. `index.html` という名前でファイルを保存します。

**メモ:** 元となる HTML テンプレートは MDN 学習領域 GitHub リポジトリーにも置いてあります。

ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新（または、再読み込み）を行うと編集結果が反映されます。最初はこんな表示です。

![This is my page と書かれたシンプルな HTML ページ](/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started/template-screenshot.png)このアクティブラーニングでは、前述のようにコンピューター上でコードをローカルに編集することもできますし、下のサンプルウィンドウで編集することもできます（編集可能なサンプルウィンドウは、この場合 `<body>` 要素の内容だけを表しています）。以下の作業を実装するために、腕を磨いてください。

* `<body>` 要素の開始タグの直下にページのメインタイトルを書きましょう。このメインタイトルは `<h1>` 開始タグと `</h1>` 終了タグで囲んでください。
* 段落の内容を編集して、自分が興味を持っている話題についてテキストを記入しましょう。
* 重要な言葉は、 `<strong>` 開始タグと `</strong>` 終了タグで囲み、太字で目立たせるようにしましょう。
* この記事の前の方で説明したリンクを段落に追加してみましょう。
* 文書に画像を追加しましょう。この記事の前の方で説明したように、段落の下に配置しましょう。別の画像（コンピューターのローカル、またはウェブのどこか）にリンクすることができれば、ボーナスポイントを獲得できます。

間違えた場合は *リセット* ボタンを押すことで元に戻すことができます。分からない場合は 答えを見る ボタンを押して答えを見てみましょう。
```

<h2>ライブ出力</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  <p>This is my page</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="答えを見る" />
</div>
```

```
html {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who plays in the band <a href="https://en.wikipedia.org/wiki/Rush\_%28band%29" title="Rush Wikipedia article">Rush</a>. My favorite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg" alt="Rush Moving Pictures album cover">';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを見る";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "答えを見る") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを見る";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "答えを見る") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### HTML 内のホワイトスペース

上記の例において、大量の（半角）ホワイトスペース（空白文字）がコード内にあることに気づいたかもしれません。これは無くても構いません。次の 2 つのコードスニペットは等価です。

```html
<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>
```

HTML 要素の内容でどれだけホワイトスペースを使用したとしても（1 つ以上の空白文字だけでなく、改行も含みます）、 HTML パーサーはコードをレンダリングする際に、ホワイトスペースの並びを 1 文字の空白に縮小します。では、なぜこれほど多くのホワイトスペースを使用するのでしょうか。その答えは、読みやすさにあります。

**メモ:** 訳注: 全角空白はホワイトスペースに含まれず、空白の縮小の対象にもなりません。

コードをきれいに整形すると、何をしようとしているのかがわかりやすくなります。この HTML では、入れ子になっている各要素を、中に入っている要素よりも空白 2 文字分多く字下げしています。整形スタイル（それぞれの字下げレベルを空白何文字分にするか、など）はあなた次第ですが、書式化は検討した方がいいでしょう。

実体参照: HTML に特殊文字を含める
--------------------

HTML では、`<`、`>`、`"`、`'`、`&` の各文字が特殊文字として扱われます。これらは HTML の構文の一部です。では、これらの特殊文字をどのようにテキストに記述するのでしょうか？例えば、アンパサンドや小なり記号を使用したい場合、コードとして解釈されないようにするには、次のようにします。

そのためには、文字参照（実体参照、エンティティ、とも）を使用します。これは文字を表す特別なコードで、まさにそのような状況で使用するためのものです。それぞれの文字参照は、アンパサンド (&) で始まり、セミコロン (;) で終わります。

| 実際の文字 | 等価な文字参照 |
| --- | --- |
| < | `<` |
| > | `>` |
| " | `"` |
| ' | `'` |
| & | `&` |

等価な文字参照は、 '<' は未満 (less than)、 '"' は引用 (quotation) という具合に思い出しやすくできています。実体参照についての詳細は、XML と HTML の文字実体参照一覧 （ウィキペディア）を参照してください。

以下の例では、 2 つの段落があります。

```html
<p>HTML では、<p> 要素で段落を定義します。</p>

<p>HTML では、<p> 要素で段落を定義します。</p>
```

上記の例をブラウザーに解釈させたものを下記に出力しています。 1 つ目の段落の出力が間違っていることが分かるかと思います。2 つ目の `<p>` が新しい段落の始まりとして認識されているためです。 2 つ目の段落は、山括弧を文字参照に置き換えているため、正しく表示されます。

**メモ:** 他の記号に実体参照を使用する必要はありません。現代のブラウザーは、HTML の文字エンコーディングが UTF-8 に設定されていれば、実際の記号を正しく扱うことができるからです。

HTML のコメント
----------

HTML には、コードにコメントを書く仕組みがあります。ブラウザーはコメントを無視するので、事実上、ユーザーからはコメントが見えません。コメントのそのため、自分の論理やコーディングを説明するためのメモをコードに記載することができます。これは、コードベースを完全に覚えていないほど長い間離れていた後に、コードベースに戻った場合にとても役に立ちます。同様に、コメントは、さまざまな人が変更や更新を行う際に非常に重要です。

HTML のコメントを書くには、特別なマーカーである `<!--` と `-->` で囲んで下さい。例えば以下のようにします。

```html
<p>コメントの外にいます。</p>

<!-- <p>コメントの中にいます。</p> -->
```

下記を見ると、最初の段落は表示されますが、次の段落は表示されないことが分かります。

まとめ
---

記事の最後までたどり着きました。 HTML の基本を楽しんでいただけたでしょうか。

この時点で、あなたは HTML がどのようなものか、そしてどのように動作するのか、基本的なレベルで理解できたはずです。また、いくつかの要素や属性を書くことができるようになっているはずです。このモジュールの後続の記事では、ここで紹介したトピックのいくつかをさらに詳しく説明し、また、この言語の他の概念も表示する予定です。

**メモ:** HTML を学び始めたら、CSS の基本を学ぶことも検討してみてください。CSS は、ウェブページのスタイル設定に使用される言語です。例えば、フォントや色を変更したり、ページのレイアウトを変更したりすることができます。HTML と CSS がうまく協調しながら動作することがおわかりいただけると思います。

関連情報
----

* CSS を使って HTML 要素に色をつける
* Overview: Introduction to HTML
* 次のページ


ハイパーリンクの作成 - ウェブ開発を学ぶ

ハイパーリンクの作成
==========

* 前のページ
* Overview: Introduction to HTML
* 次のページ

 ハイパーリンクは本当に重要なものです。ウェブをウェブたらしめているものです。
 この記事ではリンクを作るために必要な構文を示し、リンクに関する良き習慣について議論します。

|  |  |
| --- | --- |
| 前提知識: | HTML を始めようにあるような、基本的な HTML を理解していること。
 HTML テキストの基礎にあるような、 HTML のテキストの整形ができること。
  |
| 目的: | ハイパーリンクを効率的に実装する方法、複数のファイルを互いにリンクする方法を学ぶ。 |

ハイパーリンクとは
---------

 ハイパーリンクは、ウェブが提供する最も刺激的な技術革新の一つです。
 ハイパーリンクは、ウェブが始まった当初からある機能であり、ウェブをウェブたらしめているものです。
 ハイパーリンクによって、文書を他の文書やリソースにリンクしたり、文書の特定の部分にリンクしたり、ウェブアドレスでアプリを利用できるようにすることができます。
 ほとんどすべてのウェブコンテンツはリンクに変換することができ、クリックするか他の方法でアクティブにすると、ウェブブラウザーは別のウェブアドレス (URL) に移動します。

**メモ:** URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画や音声ファイルや、その他ウェブに載せられるものを指すことができます。
 ウェブブラウザーがそのファイルを表示または処理する方法を知らない場合、ファイルを開くか（この場合、ファイルを開くまたは処理する役目は端末上の適切なネイティブアプリに委ねられます）、ファイルをダウンロードするか（この場合、後で扱いを試すことができます）を尋ねられます。

例えば、 BBC のホームページには、複数のニュース記事だけでなく、サイトのさまざまなエリア（ナビゲーション機能）、ログイン/登録ページ（ユーザーツール）などを指し示すリンクが多数掲載されています。

![bbc.co.uk のフロントページで、たくさんのニュース項目と、ナビゲーションメニューの機能を表示しています](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/updated-bbc-website.png)

リンクの解剖
------

基本的なリンクは、リンクにしたいテキストやその他のコンテンツを `<a>` 要素の中に囲むことで作成し、`href` （**ハイパーテキスト参照**または**ターゲット**とも）にリンク先にしたいウェブアドレスを入れます。

```html
<p>
  <a href="https://www.mozilla.org/ja/">Mozilla ホームページ</a
 >へのリンクを作成しています。
</p>
```

これは以下のような結果になります。
Mozilla ホームページへのリンクを作成しています。

### ブロックレベルリンク

 前述したように、ブロックレベル要素 を含む、ほぼすべてのコンテンツをリンクにすることが可能です。
 見出しをリンクにしたい場合は、以下のコードのようにアンカー（`<a>`）要素で囲みます。

```html
<a href="https://developer.mozilla.org/ja/">
  <h1>MDN Web Docs</h1>
</a>
<p>2005 年から CSS、HTML、JavaScript などのウェブ技術を文書化しています。</p>
```

 これで見出しがリンクになります。

### 画像リンク

リンクにしたい画像がある場合は、`<a>` 要素により、`<img>` 要素で参照する画像ファイルを囲んでください。
```

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}
```

```html
<a href="https://developer.mozilla.org/ja/">
  <img src="mdn\_logo.svg" alt="MDN Web Docs ホームページ" />
</a>
```

 これにより、MDN ロゴがリンクになります。

**メモ:** ウェブで画像を使用する方法については、今後の記事で詳しくご紹介します。

### title 属性による補足情報の追加

 リンクに追加したいもう一つの属性は `title` です。
 タイトルには、そのページがどのような情報を含んでいるか、あるいはウェブサイトで注意すべきことなど、リンクに関する追加情報が含まれます。

```html
<p>
  <a
 href="https://www.mozilla.org/ja/"
 title="Mozilla の使命と協力方法について調べる最適な場所">
    Mozilla ホームページ</a>へのリンクを作成しています。
</p>
```

これにより、以下のような結果が得られ、リンクの上にマウスを当てると、タイトルがツールチップとして表示されます。

**メモ:** リンクのタイトルはマウスを当てないと表示されないため、キーボード操作やタッチ画面でウェブページを操作している人は、タイトル情報にアクセスしにくいという問題があります。
 タイトルの情報がページのユーザビリティにとって本当に重要であれば、通常のテキストに入れるなどして、すべてのユーザーがアクセスできるように表示する必要があります。

### アクティブラーニング: 独自のサンプルリンクを作成する

ローカルのコードエディターを使用して HTML 文書を作成してください。テンプレートを取得してください。

* HTML の本文の中に、1 つ以上の段落または他の種類の既に知っているコンテンツを追加してみてください。
* コンテンツの一部をリンクにしてください。
* タイトル属性を含めてください。
URL とパスに関する簡単な入門
----------------

リンク先を完全に理解するには、 URL とファイルパスを理解する必要があります。この節では、これを達成するために必要な情報を提供します。

URL (Uniform Resource Locator) は、何かがウェブ上のどこにあるのかを定義するテキストの文字列です。たとえば、 Mozilla の日本語のホームページは `https://www.mozilla.org/ja/` にあります。

URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう（creating-hyperlinks ディレクトリーを参照してください。

![シンプルなディレクトリー構造です。親ディレクトリーは creating-hyperlinks という名前で、 index.html と contacts.html という 2 つのファイルと、 projects と pdfs という 2 つのディレクトリーがあり、それぞれ index.html と project-brief.pdf ファイルが含まれています。](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/simple-directory.png)

このディレクトリー構造の**ルート**は `creating-hyperlinks` と呼ばれます。ウェブサイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、`index.html` ファイルと `contacts.html` があります。実際のウェブサイトでは、`index.html` が私たちのホームページまたはランディングページ（ウェブサイトまたはウェブサイトの特定の部分の入口として機能するウェブページ）になります。

私たちのルートの中にも 2 つのディレクトリー、 `pdfs` と `projects` があります。これらはそれぞれ中に PDF (`project-brief.pdf`) と `index.html` ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの `index.html` ファイルを非常にうまく入れることができることに注意してください。多くのウェブサイトはそうします。2 番目の `index.html` は、おそらくプロジェクト関連の情報のメインランディングページになります。

* **同じディレクトリーの場合**: `index.html` （最上位の `index.html`）内に `contacts.html` を指すハイパーリンクを含める場合は、現在のファイルと同じディレクトリーにあるため、リンクしたいファイルの名前を指定するだけです。そのため使用する URL は `contacts.html` です。

```html
<p>
  Want to contact a specific staff member? Find details on our
  <a href="contacts.html">contacts page</a>.
</p>
```

* **サブディレクトリーへの移動**: `index.html` （最上位の `index.html`）内に `projects/index.html` を指すハイパーリンクを含める場合は、リンクしたいファイルを指定する前に `projects` ディレクトリーに移動する必要があります。これはディレクトリーの名前、スラッシュ、そしてファイルの名前を指定することでできます。そのため使用する URL は `projects/index.html` です。

```html
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
```

* **親ディレクトリーに戻る**: `projects/index.html` の中に `pdfs/project-brief.pdf` を指すハイパーリンクを含めたい場合は、ディレクトリー階層を上がってから `pdfs` ディレクトリーに戻る必要があります。「ディレクトリーを上る」は 2 つのドット — `..` — を使用して表します。そのため使用する URL は `../pdfs/project-brief.pdf` です。

```html
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
```

**メモ:** 例えば `../../../complex/path/to/my/file.html` のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。

### 文書フラグメント

 HTML 文書の上部だけでなく、HTML 文書の特定の部分（**文書フラグメント**と呼ばれる）にリンクすることもできます。
 これを行うには、まずリンク先の要素に `id` 属性を割り当てる必要があります。
 通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。

```html
<h2 id="Mailing\_address">Mailing address</h2>
```

次にその特定の `id` にリンクするには、URL の最後にハッシュ/ポンド記号 (`#`) を付けて書きます。例えば次のようになります。

```html
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing\_address">mailing address</a>.
</p>
```

*同じ文書の別の部分*にリンクするために、文書フラグメント参照を単独で使用することもできます。

```html
<p>
  The <a href="#Mailing\_address">company mailing address</a> can be found at the
  bottom of this page.
</p>
```

### 絶対 URL vs 相対 URL

ウェブ上では、**絶対 URL** と**相対 URL** という 2 つの用語があります。

**絶対 URL**: プロトコルとドメイン名を含む、ウェブ上の絶対位置で定義された位置を指します。
 たとえば、`index.html` ページがウェブサーバーのルート内にある `projects` というディレクトリーにアップロードされており、そのウェブサイトのドメインが `http://www.example.com` である場合、そのページは `http://www.example.com/projects/index.html` （あるいは `http://www.example.com/projects/` だけでも、URL で指定されていない場合、ウェブサーバーは `index.html` のようなランディングページを探して読み込みます）で取得することができます。

絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。

**相対 URL**: リンク元のファイルからの*相対的な*場所を指しています。たとえば、`http://www.example.com/projects/index.html` にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば `project-brief.pdf` — となり、追加情報は不要です。PDF が `projects` 内の `pdfs` という名前のサブディレクトリーにある場合、相対リンクは `pdfs/project-brief.pdf` （同等の絶対 URL は `http://www.example.com/projects/pdfs/project-brief.pdf`）になります。

相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、`index.html` ファイルを `projects` ディレクトリーからウェブサイトのルート（最上位レベル、どのディレクトリーの中でもありません）に移動した場合、`pdfs/project-brief.pdf` 相対 URL リンクの内部は、`http://www.example.com/pdfs/project-brief.pdf` にあるファイルを指し、`http://www.example.com/projects/pdfs/project-brief.pdf` にあるファイルではありません。

もちろん、`index.html` ファイルを移動しても `project-brief.pdf` ファイルと `pdfs` フォルダーの場所が突然変わることはありません。これはリンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。

リンクの良い慣習
--------

リンクを書くときに従うべき良い慣習がいくつかあります。今これらを見てみましょう。

### 明確なリンク語を使う

ページにリンクを張るのは簡単です。それでは十分ではありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば次のようにします。

* スクリーンリーダーのユーザーは、ページ上のリンクからリンクへと飛び回ったり、文脈の外でリンクを読んだりします。
* 検索エンジンはリンクテキストを使用して対象ファイルにインデックスを付けます。したがって、リンクテキストにキーワードを含めて、リンクされているものを効果的に説明することをお勧めします。
* 視覚的な読者はすべての単語を読むのではなくページを読み飛ばします、そして彼らの目はリンクのように目立つページの特徴に引き寄せられるでしょう。彼らは説明的なリンクテキストが役に立つと思うでしょう。

具体的な例を見てみましょう。

**良い** リンクテキスト: Firefox をダウンロード

```html
<p><a href="https://www.mozilla.org/firefox/">Firefox をダウンロード</a></p>
```

**悪い** リンクテキスト: こちらをクリックして Firefox をダウンロード

```html
<p>
  <a href="https://www.mozilla.org/firefox/"> こちらをクリック </a>して Firefox
  をダウンロード
</p>
```

その他のヒントです。

* URL をリンクテキストの一部に入れない。 — URL は醜く見え、スクリーンリーダーが 1 文字ずつ読み上げるとさらに醜く聞こえます。
* リンクテキストに「リンク」または「リンク先」と書かない。 — 単なるノイズになります。スクリーンリーダーはリンクがあることを利用者に伝えます。
 視覚的なユーザーも、リンクは一般的に異なる色と下線でスタイル設定されているため、リンクがあることを認識できます（ユーザーはこの慣習に慣れているため、一般的にこの慣習を崩すべきではありません）。
* リンクのテキストは可能な限り短くする。 — スクリーンリーダーはリンクのテキスト全体を解釈する必要があるため、この方法が有効です。
* 同じテキストのコピーが複数の場所にリンクするようなものを最小化する。
 文脈から外れて「ここをクリック」「ここをクリック」「ここをクリック」と表示されたリンクのリストがあると、スクリーンリーダーにとって問題が発生する可能性があるからです。
### HTML 以外のリソースへのリンク - 明確な道標を示す

（PDF や Word 文書のように）ダウンロードを行ったり、（動画や音声のように）ストリーミングを行ったり、（ポップアップウィンドウを開くなど）予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加してください。

例えば次のようなものがあります。

* 低帯域幅の接続を使用している場合に、リンクをクリックすると、数メガバイトのダウンロードが突然開始される。

ここで、どのようなテキストを使用することができるか、いくつかの例を見てみましょう。

```html
<p>
  <a href="https://www.example.com/large-report.pdf">
    販売レポートをダウンロード (PDF, 10MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="\_blank">
    動画を見る（別なタブで HD 品質のストリーミングが開きます）
  </a>
</p>
```

### ダウンロードへのリンクは download 属性を使う

ブラウザーで開くのではなく、ダウンロードするリソースにリンクしている場合は、 `download` 属性を使用して既定の保存ファイル名を指定できます。これは最新の Windows 版 Firefox のダウンロードリンクの例です。

```html
<a
 href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
 download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>
```

アクティブラーニング: ナビゲーションメニューの作成
--------------------------

この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページのウェブサイトを作成してください。これはウェブサイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。

次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります（完全なファイルリストについては navigation-menu-start ディレクトリーも参照してください）。

* index.html
* projects.html
* pictures.html
* social.html

すべきことを挙げます。

1. リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加してください。
 ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。
2. 各ページ名をそのページへのリンクにしてください。
3. ナビゲーションメニューを各ページにコピーしてください。
4. 各ページで、その同じページへのリンクだけを削除してください。ページに自分自身へのリンクを含めることは混乱を招き、無意味です。
 また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。

完成した例では、次のようになります。

![シンプルな HTML ナビゲーションメニューの例。ホーム、ピクチャー、プロジェクト、ソーシャルの各メニューがあります。](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/navigation-example.png)

**メモ:** 行き詰まったり、正しいかどうかわからない場合は、ナビゲーションメニューのマークアップディレクトリーをチェックして正しい答えを確認できます。

メールのリンク
-------

クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは `<a>` 要素と `mailto:` URL スキームを使って行われます。

最も基本的で一般的に使用されている形式では、`mailto:` リンクは単に意図した受信者のメールアドレスを示します。例えば次のようになります。

```html
<a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a>
```

この結果、次のようなリンクが表示されます。 メールをどこにも送信しません

 実際、メールアドレスはオプションです。省略して `href` が "mailto:" であった場合、ユーザーのメールクライアントによって新しい送信メールのウィンドウが、宛先なしで開かれます。
 これは、ユーザーがクリックして自分が選択したアドレスにメールを送信できる「共有」リンクとして役立つことがよくあります。

### 詳細の指定

メールアドレスに加えて、他の情報を提供することができます。実際、提供する `mailto` URL には標準のメールヘッダーフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、"body" です（これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定するこができます）。各フィールドとその値は、クエリー用語として指定されています。

これは cc、bcc、件名、本文を含む例です。

```html
<a
 href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
```

**メモ:** 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字（タブ、改行、改ページなどの不可視文字）とスペースのパーセントエスケープが含まれています。
 また、疑問符 (`?`) を使用してメイン URL とフィールド値を区別し、アンパサンド (&) を使用して `mailto:` URL 内の各フィールドを区別します。
 これは標準の URL クエリー表記です。 GET メソッドを読んで、どの URL クエリー表記がより一般的に使用されているかを理解してください。

以下は `mailto` の他の URL の例です。

* mailto:
* mailto:nowhere@mozilla.org
* mailto:nowhere@mozilla.org,nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
スキルをテストしましょう
------------

この記事の最後にたどり着きましたが、最も重要な情報を覚えていますか？次に移動する前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります - スキルのテスト: リンク をご覧ください。

まとめ
---

リンクについては、今のところこれで終わりです。このコースの後半で、スタイル設定を始める際にリンクに戻ります。 HTML についての次は、テキストの意味づけに戻り、有用と思われるより高度で珍しい機能を見ていきます - 高度なテキスト整形が次のステップです。

* 前のページ
* Overview: Introduction to HTML
* 次のページ


ヘッド部には何が入る? HTML のメタデータ - ウェブ開発を学ぶ

ヘッド部には何が入る? HTML のメタデータ
=======================

* 前のページ
* Overview: Introduction to HTML
* 次のページ

HTML の文書のヘッド部は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 `<title>` といった情報や CSS へのリンク（HTML を CSS で修飾する場合）、独自のファビコンへのリンク、そしてほかのメタデータ（HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど）の情報を含んでいます。ウェブブラウザーはヘッド部の情報を、 HTML 文書を正しく描画するために使用します。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。

|  |  |
| --- | --- |
| 前提知識: | HTML を始めようで扱っているような、基本的な HTML の知識。 |
| 目的: | HTML のヘッド部について学ぶこと。ヘッド部の目的は何か、そしてヘッド部が含む情報の中で最も重要なのは何か、加えてそれが HTML 文書の中でどれほどの影響を持つか。 |

HTML のヘッド部とは何か？
---------------

前の記事で扱った HTML 文書をもう一度見てみましょう。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

HTML のヘッド部は `<head>` 要素の内容です。 `<body>` 要素の内容（これはブラウザーに読み込まれた時に表示されます）とは違い、ヘッド部の内容はページに表示されません。その代わり、ヘッド部の仕事は文書のメタデータを含んでいます。上記の例では、ヘッド部はとても小さいものです。

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

しかし、より大きなページでは、ヘッド部がかなり大きくなることがあります。好きなウェブサイトで、開発者ツールを使用して、ヘッド部の中身を確認してみてください。ここでの目的は、ヘッド部に記載できるすべてのものの使用方法を紹介することではなく、ヘッド部に記載したい主要な要素の使用方法を教え、ある程度慣れてもらうことです。では、始めましょう。

タイトルをつける
--------

`<title>` 要素についてはすでに見てきました。これは文書にタイトルを追加するのに使います。しかしこれは h1 要素と良く混同されます。こちらは body の中で最上位レベルの見出しを追加するものであり、時々ページタイトルとしても参照されます。しかしこれらは別のものです。

* h1 要素は、ブラウザーで読み込まれるとページに現れます。一般的に、これは 1 ページに 1 回使用し、ページ内容のタイトル（記事のタイトル、またはニュースの見出しなど、使用に適したもの）をマークアップするために使用すべきです。
* `<title>` 要素は（文書のコンテンツではなく） HTML 文書全体のタイトルを表すメタデータです。
### アクティブラーニング: 単純な例を検討する

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

 ![ブラウザーのページタブに 'title' テキスト、文書本体のページ見出しに 'h1' テキストを持つウェブページ。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)
`<h1>` コンテンツが出ている場所と、`<title>` コンテンツが出ている場所がひと目で分かります。
3. また、コードをコードエディターで開き、これらの要素の内容を編集し、ブラウザーでページを更新してみてください。楽しみながらやってみてください。

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

![Firefox でブックマークされているウェブページ。ブックマーク名には、'title' 要素の内容が自動的に付与されています。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

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

メタデータ: `<meta>` 要素
------------------

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

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

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

```html
<meta charset="utf-8" />
```

この要素は文書の文字エンコーディング、つまり文書が使用することを許可されている文字セットを指定します。 `utf-8` は普遍的な文字セットで、あらゆる人間の言語のほとんどすべての文字を含みます。これは、ウェブページがあらゆる言語の表示を扱うことができることを意味しています。したがって、作成するすべてのウェブページでこれを設定するのはよい考えです。例えば、このページは英語と日本語をうまく処理することができます。

![日本語と英語を含むウェブページで、文字コードをユニバーサル (utf-8) に設定した場合。どちらの言語も問題なく表示されます。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)文字エンコーディングを、例えば `ISO-8859-1` （ラテン文字のアルファベットの文字セット）に指定すると、ページの表示はメチャクチャな見た目になります。

![英語と日本語を含むウェブページで、文字コードを latin に設定した場合。日本語の文字が正しく表示されません。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

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

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

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

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

### 作成者と説明の追加

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

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

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

```html
<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 websites and applications." />
```

作者 (author) を明示することは多くの点で有益です。内容に関して質問がある場合、誰がそのページを書いたのかを把握することができ、連絡を取りたい場合に便利だからです。コンテンツ管理システムの中には、ページの作者情報を自動的に抽出して、そのために利用できるようにする機能があるものもあります。

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

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

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

1. Mozilla Developer Network のフロントページに移動します。
2. ページのソースを見ます（ページで右クリックし、コンテキストメニューから [ページソースを表示] を選択）。
3. description の meta タグを見てみます。このようなものです（変わっているかもしれませんが）。

```html
<meta
 name="description"
 content="The MDN Web Docs site
 provides information about Open Web technologies
 including HTML, CSS, and APIs for both websites and
 progressive web apps." />
```

4. ここでお好きな検索エンジンで "MDN Web Docs" を検索します（ここでは Google を使っています）。 description の `<meta>` と `<title>` 要素のコンテンツが検索結果で使われています。確かに値打ちがあります。

 ![Yahoo での "Mozilla Developer Network" の検索結果](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/mdn-search-result.png)

**メモ:** Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう。これはサイトリンクと呼ばれ、Google ウェブマスターツール で設定されます。これは Google 検索エンジンでサイトの検索結果を改善する方法です。

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

### メタデータの他の種類

ウェブを旅していると、他にもさまざまな型のメタデータを見つけることができます。ウェブサイト上で目にする機能の多くは、独占的に作成されたもので、特定のサイト（SNS サイトなど）が使用する特定の情報の断片を提供してもらうために設計されたものです。

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

```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />
```

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

![MDN ホームページの Open Graph プロトコルデータを facebook で表示し、画像、タイトル、説明文を表示しています。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)

Twitter も同様に、 Twitter Cards という独自のメタデータを持っており、サイトの URL が twitter.com で表示されたときに同様の効果を実現しています。例えばこのようになります。

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

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

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

地味なファビコンは、何年も前から存在しています。 16 ピクセルの正方形のアイコンを複数の場所で使用する、この種のアイコンの最初のものです。ブラウザーによっては、開いているページを含むブラウザーのタブや、ブックマークパネルのブックマークされたページの横にファビコンが表示されることがあります。

ページにファビコンを追加するには次のようにします。

1. サイトのインデックスページと同じディレクトリーに、 `.ico` 形式で保存します（多くのブラウザーは `.gif` や `.png` のような、より一般的な形式のファビコンにも対応しています）。
2. HTML の `<head>` ブロックに次の行を入れて参照します。

```html
<link rel="icon" href="favicon.ico" type="image/x-icon" />
```

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

![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

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

```html
<!-- 第 3 世代の iPad の高解像度レティナ画面 -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- iPhone の高解像度レティナ画面 -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- 第 1、2 世代の iPad -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- レティナではない iPhone、iPod Touch、Android 2.1 以降の端末 -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- 基本的なファビコン -->
<link
 rel="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 文書のヘッド部の中に置きます。二つの属性をとり、 rel="stylesheet" はこれが文書のスタイルシートであることを示し、 href はスタイルシートファイルへのパスを表します。

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

* `<script>` 要素もヘッド部に入れるべきであり、読み込みたいJavaScriptのパスを含む `src` 属性と、基本的にページが HTML の解析を完了した後にJavaScriptを読み込むようにブラウザーに指示する `defer` を記載する必要があります。これは、JavaScriptを実行する前に HTML がすべて読み込まれていることを確認し、 JavaScript がまだページ上に存在しない HTML 要素にアクセスしようとした結果、エラーが発生しないようにするために有用なものです。ページでの JavaScript の読み込みを処理する方法は実際にはいくつかありますが、現代のブラウザーではこれが最も信頼できる方法です（他にも、スクリプトの読み込み方針を参照してください）。

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

**メモ:** `<script>` 要素は空要素のように見えるかもしれませんが、そうではありませんので、終了タグが必要です。また、外部のスクリプトファイルを読み込むのではなく、 `<script>` 要素の中にスクリプトを置くこともできます。
### アクティブラーニング: ページに CSS と JavaScript を追加する

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

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

![CSS と JavaScript が適用されたページの例です。 CSS はページを緑色にし、 JavaScript はページに動的なリストを追加しています。](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

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

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

文書の主要な言語の設定
-----------

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

```html
<html lang="en-US">
  …
</html>
```

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

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

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

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

まとめ
---

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

* 前のページ
* Overview: Introduction to HTML
* 次のページ


スキルテスト: 高度な HTML テキスト - ウェブ開発を学ぶ

スキルテスト: 高度な HTML テキスト
=====================

このスキルテストの目的は、あなたが高度な意味的特徴をマークアップする有名ではない HTML 要素を使用する方法を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、指定された動物とその定義を、説明リストに変換していただきます。

完成例はこのようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、与えられた HTML に以下のような意味づけを追加していただきます。

* 2 つ目の段落をブロックレベルの引用にし、その引用がアクセシビリティから引用されたものであることを意味づけしましょう。
* "HTML" と "CSS" を頭字語として意味づけし、その展開形をツールチップとして提供しましょう。
* 化学式や日付に正しい意味づけを行い、正しく表示させるように、添字や上付き文字を使用しましょう。
* 機械読み取り可能な日付とテキストの日付を意味づけしましょう。

完成例はこのようになります。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「高度な HTML テキスト、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。


手紙のマークアップ - ウェブ開発を学ぶ

手紙のマークアップ
=========

* 前のページ
* Overview: Introduction to HTML
* 次のページ

私たちはみんな遅かれ早かれ手紙を書くことを学びます。テキストの書式設定のスキルを試すのも便利な例です。この課題では手紙をマークアップして、ハイパーリンクや HTML の `<head>` 要素の適切な使用と同様に、 HTML テキスト整形のスキルをテストしてみます。

|  |  |
| --- | --- |
| 前提条件: |
 この評価課題をやってみる前に、
 HTML を始めよう、
 ヘッド部には何が入る? HTML のメタデータ、
 HTML テキストの基礎、
 ハイパーリンクの作成、
 高度なテキスト整形を既に終えているのが望ましい。
  |
| Objective: | 基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML の <head> に関する知識をテストします。 |

開始地点
----

この課題を開始するには、マークアップする必要がある生のテキストと、HTML に含める必要がある CSS を入手します。テキストエディターを使用して新しい `.html` ファイルを作成し、作業を行います（または、 CodePen, jsFiddle, or Glitch などのサイトを使用して課題を行います）。

**メモ:** もし行き詰まったら、私たちに助けを求めてください。このページの下にある評価またはさらなるヘルプの節をご覧ください。

簡単なプロジェクト
---------

このプロジェクトでは、あなたのタスクは、大学のイントラネットでホストする必要がある手紙をマークアップすることです。この手紙は、大学への申請に関して、研究員から博士課程の学生候補に返信するものです。

### ブロック/構造的な意味づけ

* 文書全体を文書型定義、`<html>`、`<head>`、`<body>` 要素を含む適切な構造で構成する必要があります。
* 一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップしてください。最上位の見出し（"Re:" の行）が 1 つと、第 2 レベルの見出しが 3 つあります。
* 学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップしてください。
* 2 つの住所は `<address>` 要素に入れてください。住所のそれぞれの行は個別の行にしますが、新しい段落にはしないでください。
### インラインの意味づけ

* 送信者と受信者の名前（および "Tel" と "Email"）は、とても重要なものとしてマークアップしてください。
* 文書内の 4 つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。
* 手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。
* 文字の本文中の 5 つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。
* 6 つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。
* テキストの中で少なくとも 2 つの適切な単語に強い重要性と強調を設定するようにしてください。
* ハイパーリンクを追加する場所は 2 か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には `http://example.com` を使用してください。
* 大学のモットーのクォートと引用は適切な要素でマークアップするべきです。
### 文書のヘッド部

* 適切なメタタグを使用して、文書の文字コードを utf-8 として指定する必要があります。
* 手紙の作者は適切なメタタグで指定してください。
* 提供された CSS は適切なタグの中に置いてください。
ヒントとコツ
------

* HTML を検証するために W3C HTML validator を使用してください。検証すればボーナスポイントを得られるでしょう。
* この課題をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
例
-

次のスクリーンショットは、マークアップ後の文字の表示例を示しています。

![例](/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter/letter-update.png)

評価またはさらなるヘルプ
------------

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方。

1. 作品をオンラインの共有可能なエディター、例えば CodePen, jsFiddle, or Glitch に置いてください。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「手紙のマークアップのための評価希望」のようなわかりやすいタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
* 前のページ
* Overview: Introduction to HTML
* 次のページ


コンテンツのページの構造化 - ウェブ開発を学ぶ

コンテンツのページの構造化
=============

* 前のページ
* Overview: Introduction to HTML

CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。

|  |  |
| --- | --- |
| 前提条件: |
 この評価課題を実施する前に、コースの他の部分を履修しておく必要があります。
 コースの残りの部分、
 特に、文書とウェブサイトの構造に重点を置いて学習してください。
  |
| 目的: | ウェブページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。 |

開始地点
----

この評価を開始するには、すべての開始資産を含む zip ファイルを入手してください。

zip ファイルには以下のものが含まれています。

* 構造的マークアップを追加する必要がある HTML
* マークアップをスタイルするための CSS
* ページで使用されている画像

例はローカルコンピュータで作成するか、あるいは CodePen, jsFiddle, Glitch などのサイトを使用して作業してください。

**メモ:** もし行き詰まったら、私たちに助けを求めてください。このページの下にある評価またはさらなるヘルプの節をご覧ください。

プロジェクト概要
--------

このプロジェクトでは、あなたの仕事はバードウォッチングのウェブサイトのホームページのコンテンツを取り、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは次のようなものです。

* ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダー。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら 2 つの項目の下に表示されます。
* ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの 2 つの列を含むメインコンテンツ領域。
* 著作権情報とクレジットを含むフッター。

以下に適したラッパーを追加する必要があります。

* ヘッダー
* ナビゲーションメニュー
* メインコンテンツ
* ウェルカムテキスト
* 画像サイドバー
* フッター

また、する必要があることは次のものです。

* 開始時に提供された既存の CSS のすぐ下に別の `<link>` 要素を追加して、提供された CSS をページに適用します。
ヒント
---

* W3C Nu HTML Checker を使用して HTML、CSS、 SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。
* この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
* 提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。
* 行き詰まって、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。
例
-

次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。

![評価のための完成例。「バードウォッチング」という見出し、鳥の写真、ウェルカムメッセージを記載した、バードウォッチングに関するシンプルなウェブページ。](/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content/example-page.png)

評価またはさらなるヘルプ
------------

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方。

1. 作品をオンラインの共有可能なエディター、例えば CodePen, jsFiddle, or Glitch に置いてください。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「手紙のマークアップのための評価希望」のようなわかりやすいタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
* 前のページ
* Overview: Introduction to HTML