ページが縦に長くなる場合は同じページ内の特定の部分へのリンクを設定しよう！（a要素、href属性、name属性）

使用タグ <a href="#リンク先">～</a> <a name="任意の名前">～</a>

HTML一覧タグ辞典 … <a> タグ

<a>タグに name 属性を使えば、リンク先を同じページ内の特定の部分へジャンプするための名前を指定できます。同じページ内の特定の部分へジャンプするためには、a 要素の href 属性の属性値に name 属性で指定した任意の名前（参照名）の前に「#」」を付けます。
また、a 要素の name 属性は別のページ内の特定の部分へのリンクを設定する場合にも使います。（次のページの別のページの「別のページの特定の部分へのリンク設定」で説明しています）

name="任意の名前" の「任意の名前（参照名）」に使える文字や記号

参照名には、アルファベットで始まる半角英数字を指定することができます。また、参照名に使用できる記号は、ハイフン「 - 」、アンダーバー「 _ 」、コロン「 : 」、ピリオド「 . 」の４つです。これを踏まえた上で、好きな名前を指定しましょう！

参照先の記述

<a name="sample"></a>と、任意の名前（参照名）を「sample」に設定した場合、リンク元の a 要素の href 属性では、<a href="sample"></a>と指定すればよさそうですが、任意の名前の前には「#」をつけます。したがって、<a href="#sample"></a>と入力します。

使用例

まずはページ内のリンクを指定する前の記述例、表示例をご覧ください。

記述例
<html> <head> <title>一人暮らしの前向き料理</title> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> <strong>ワンポイント</strong>を紹介します！</p> <p>おいしい<em>チャーハン</em>の作り方</p> <p>→手順→材料と分量</p> <img src="sample.jpg" alt="チャーハン"> <h2>手順</h2> <ul> <li>強火でフライパンを少し暖めます。</li> <li>大さじ一杯の油を入れ、ひき肉を炒めます。</li> <li>塩コショウでひき肉に下味をつけます。</li> <li>ごはんを入れ、フライパンに入れましょう。</li> <li>etc…</li> </ul> <h2>材料と分量</h2> <ul> <li>卵・・・１個</li> <li>ハム・・・50g</li> <li>玉ねぎ・・・４分の１個</li> <li>塩コショウ・・・少々</li> <li>etc…</li> </ul> </body> </html>

[ブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 →手順→材料と分量手順強火でフライパンを少し暖めます。大さじ一杯の油を入れ、ひき肉を炒めます。塩コショウでひき肉に下味をつけます。ごはんを入れ、フライパンに入れましょう。 etc… 材料と分量卵・・・１個ハム・・・50g 玉ねぎ・・・４分の１個塩コショウ・・・少々 etc…

では、「記述例」を元にして、 <a name="任意の名前">～</a>を使い、リンク先を同じページ内の特定の部分へジャンプするための任意の名前を指定し、その後に<a href="#リンク先">～</a>を使い任意の名前を指定した場所にジャンプするためのリンクを設定します。
ここでは、リンク先を h2 要素（見出し）の「手順」と「材料と分量」に指定し、リンク設定を「<p>→手順→材料と分量</p>」の「手順」と「材料と分量」にします。

まずは、h2 要素（見出し）の「手順」と「材料と分量」に a 要素に name 要素を使い、リンク先に設定したい場所に任意の名前を記述します。

名前を設定する場所（ここでは h2 要素の文字列「手順」と「材料と分量」）に開始タグの<a>を入力します。
※赤文字で記述しています
終了タグの</a>入力します
※赤文字で記述しています
name 属性を使い参照名を指定します
「手順」に「tejun」、「材料と分量」に「zairyou」という参照名を指定します
※青文字で記述しています

記述例
<html> <head> <title>一人暮らしの前向き料理</title> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> <strong>ワンポイント</strong>を紹介します！</p> <p>おいしい<em>チャーハン</em>の作り方</p> <p>→手順→材料と分量</p> <img src="sample.jpg" alt="チャーハン"> <h2><a name="tejun">手順</a></h2> <ul> <li>強火でフライパンを少し暖めます。</li> <li>大さじ一杯の油を入れ、ひき肉を炒めます。</li> <li>塩コショウでひき肉に下味をつけます。</li> <li>ごはんを入れ、フライパンに入れましょう。</li> <li>etc…</li> </ul> <h2><a name="zairyou">材料と分量</a></h2> <ul> <li>卵・・・１個</li> <li>ハム・・・50g</li> <li>玉ねぎ・・・４分の１個</li> <li>塩コショウ・・・少々</li> <li>etc…</li> </ul> </body> </html> </html>

次に、a 要素に href 属性を入力し、値のリンク先に name 属性で設定した任意の名前を指定しましょう。
※a 要素の href 属性で参照名を指定するには、参照名の前に「#」を入力します。

「<p>→手順→材料と分量</p>」の「手順」と「材料と分量」にそれぞれ a 要素の開始タグ、終了タグを入力しましょう
※赤文字で記述しています
a 要素の href 属性の値に、a 要素の name 要素で指定した参照名の前に「#」を付けて記述しましょう
※青文字で記述しています

記述例
<html> <head> <title>一人暮らしの前向き料理</title> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> <strong>ワンポイント</strong>を紹介します！</p> <p>おいしい<em>チャーハン</em>の作り方</p> <p>→<a href="#tejun">手順</a>→<a> href="#zairyou">材料と分量</a></p> <img src="sample.jpg" alt="チャーハン"> <h2><a name="tejun">手順</a></h2> <ul> <li>強火でフライパンを少し暖めます。</li> <li>大さじ一杯の油を入れ、ひき肉を炒めます。</li> <li>塩コショウでひき肉に下味をつけます。</li> <li>ごはんを入れ、フライパンに入れましょう。</li> <li>etc…</li> </ul> <h2><a name="zairyou">材料と分量</a></h2> <ul> <li>卵・・・１個</li> <li>ハム・・・50g</li> <li>玉ねぎ・・・４分の１個</li> <li>塩コショウ・・・少々</li> <li>etc…</li> </ul> </body> </html> </html>

使用例の表示

[a 要素の name 属性、a 要素の href 属性適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 →手順→材料と分量手順強火でフライパンを少し暖めます。大さじ一杯の油を入れ、ひき肉を炒めます。塩コショウでひき肉に下味をつけます。ごはんを入れ、フライパンに入れましょう。 etc… 材料と分量卵・・・１個ハム・・・50g 玉ねぎ・・・４分の１個塩コショウ・・・少々 etc…