サイト内の別のページのある特定の箇所にリンクを貼りたいときがあります。
上の図でいうと、「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”>と#以下のみの記述となります。