サイト内の別ページの特定場所にリンクを貼るには

a nameの説明画像

サイト内の別のページのある特定の箇所にリンクを貼りたいときがあります。

上の図でいうと、「X」のhtmlファイルの文章がいくつかの章に分かれていて、その見出し部分に「W」のあるテキストからリンクを貼るといった場合。

そうした場合には、<a>タグのname属性を使用して、下記のように記述していました。

【リンク先のファイル「x」の記述】

<a name="abc(任意)">飛ばしたい箇所の文字列</a>

【リンク元のファイル「W」の記述】

<a href="w.html#abc">リンクを貼りたい文章</a>

この記述は、html4.01までの記述方法で、その後のxhtml1.1以降は、<a>タグのname属性が廃止され、代わりにid属性を使います。

また、必ずしも<a>タグだけに使う必要性はなく、id属性が使える箇所であれば、どこでも使えます。

例えば、

タグでも構いませんし、見出しであるタグなどでも構わないことになります。

【リンク先のファイル「x」の記述】

<h2 id="abc(任意)">飛ばしたい箇所の文字列</h2>

【リンク元のファイル「W」の記述】

<a href="w.html#abc">リンクを貼りたい文章</a>

id属性は、htmlのマーキングの際にいたる箇所に振っていますので、既存のid属性を使えるので便利ですね。

以上は、ファイル「W」からファイル「Y」の特定箇所というサイト内の別ページへのリンクの記述をみてきました。

しかし、このページ内の特定箇所へリンクするという使い方は、ページの下までスクロールさせた時の「ページのトップへ戻る」などでよく使うことが多いですね。

ページのフッター部分に「ページのトップへ戻る」と記述し、そのリンク先をヘッダー部分に振っているidに飛ばすというやり方です。

【ページヘッダー部分への記述】

<div id="#header"></div>

【ページフッター部分の「ページのトップへ戻る」への記述】

<p><a href="#header">ページのトップへ戻る</a></p>

この場合、他ページへのリンクではないので、上述のように<a href=”#header”>と#以下のみの記述となります。