<A href="url#id">他のページの特定位置にリンク

<A>タグのname属性とid属性を利用する事で、特定の位置へ移動するリンクが作成できます。 例えばページ内の特定の位置に名前をつけておくと、他のページから名前をつけたその位置にリンク(ジャンプ)する事もできます。 リンクの対象位置に名前を付けるには、name属性を使います。

例えば<h3>の位置に名前を付けるなら、<h3><a name="名前">~</a></h3>のように記述します。 こうする事で、他のページからその名前をつけた位置へリンク(ジャンプ)する事ができます。 そして、その位置へリンクするためには、リンク元のhref属性に「URL + # + 名前」というように記述します。

また通常であれば、これで他のページから特定の位置へリンクできるようになるのですが、HTML5ではname属性は廃止されています。 ですので同じ効果があるid属性を利用した方がいいでしょう。

id属性を使用して他のページから特定の位置へリンク(ジャンプ)する方法は、リンクしたい位置にあるタグに<h4 id="名前">のようにid属性で名前をつけます。 そしてリンク元のhref属性に<a href="url#名前">というようにid属性で指定した名前の前に「移動先(リンク先)のURL」と「#」を付けます。

これで別のページからid属性で名前を付けた位置へリンク(ジャンプ)できるようになります。 またURLを記述しなかった場合は、ページ内での移動(リンク)となります。

なおname属性やid属性に指定できる名前には規則があり、HTMLの場合は、アルファベット(A,a…)で開始し、アルファベット、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(;)、数字(0,1…)のみで記述する必要があります(大文字小文字は区別される)。

※XHTMLの場合はアンダースコア(_)で開始する事もできるようです。

使用した時の例

<a href="..a-name#sample">別ページの「sample」の位置へリンク</a>

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

ブラウザ上の表示例

書式

  • <a href="URL#任意の名前">~</a> ・・・・・・ リンク元の指定(ココから出発)
  • <a name="任意の名前">~</a> ・・・・・・ リンク先の指定(別ページ到着点)
<a href="..a-name#sample">別ページの「sample」の位置へリンク</a>

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

ブラウザ上の表示例

書式

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

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

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

HTML5での状況と関連情報

HTML5では、name属性は廃止。同様のリンクができるid属性を利用しましょう。