<A href="#id">同じページ内の特定位置へリンク

<A>タグのname属性、またはid属性では、特定の位置へ移動するリンクを作成することができます。 例えばひとつのページがとても長い場合などに、同じページ内の特定の位置に名前をつけておくことで、そこにリンク(移動)する事ができます。

リンク(移動)したい位置に名前を付けるには、name属性を使用します。 例えばページ内の<h2>へ移動したい場合は<h2><A name="任意の名前">~</A></h2>のように記述します。 そしてそのname属性を使用した場所へリンク(移動)するためには、リンク元のhref属性の値に<A href="#任意の名前">のように、名前の前に「#」を付けて指定します。

通常はこれで名前を付けた場所にページ内リンク(ジャンプ)できるのですが、HTML5ではA要素のname属性は廃止されています。 ですのでid属性を利用した方がいいでしょう。

id属性を使用し、同一ページ内でリンク(移動)する方法は、リンク先のタグに<h3 id="任意の名前">のようにid属性で名前をつけ、この名前を<A href="#任意の名前">のようにリンク元の値に指定します。 このときも「#」は忘れずにつけて下さい。

また「#」の前に別ページのurlを記述すると、別ページの特定の位置へリンクすることなどもできます。

使用した時の例

<a href="#sample">nameの「sample」へ移動します</a>

<h2><a name="sample">HTML5での状況と関連情報</a></h2>  <!--移動先-->

ブラウザ上の表示例

書式(nameの場合)

  • <a href="#任意の名前">~</a> ・・・・・・ リンク元の指定(ここから出発)
  • <a name="任意の名前">~</a> ・・・・・・ リンク先の指定(到着点)
<a href="#sample">id属性の「sample」へ移動します</a>

<h2 id="sample">HTML5での状況と関連情報</h2>  <!--移動先-->

ブラウザ上の表示例

書式(idの場合)

  • <a href="#任意の名前">~</a> ・・・・・・ リンク元の指定(ここから出発)
  • <要素名 id="任意の名前">~</要素名> ・・・・・・ リンク先の指定(到着点)

対応ブラウザなどのデータ

形式 <a href="#任意の名前">~</a> 分類 インライン要素
開始タグ 必須 終了タグ 必須
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

a要素のname属性は、HTML5では廃止。代わりにid属性を利用しましょう。