正しいアンカーリンクの使い方を知り、見出しタグを利用した目次を作る

2017年7月7日2018年9月21日HTMLアンカーリンク,使い方,目次,見出しタグ

ブログや記事系コンテンツを多く掲載しているサイトの場合、ユーザビリティーを高めるためにも目次を使っている例が多いです。

その際は見出しタグを利用して目次を生成するケースが多いと思いますが、目次のリンク先に設定するのがページ内リンク「アンカーリンク」です。

今回は、アンカーリンクの使い方をまとめることで、正しくページ内リンクを貼るための実装を覚えましょう。

アンカーリンク先にid属性かname属性を置き、アンカーリンク元では「#id」へリンクする

アンカーリンクの使い方は、非常に簡単です。

<h2 id="anchor1">アンカーリンク元１</h2>
<h2 name="anchor2">アンカーリンク元２</h2>

<a href="#anchor1">アンカーリンク先１はこちら</a>
<a href="#anchor2">アンカーリンク先２はこちら</a>

上記のように、id属性かname属性を付与したhtmlタグへ、#を付けたhref属性で指定すればページ内リンクになります。

id属性は１ページ１つしか同一のものは使えない

気をつけて欲しいのが、id属性は同一のものを同じページのソースコード内に１つしか使えないということです。

これはHTML5,CSS3のルールであるため、反することはできません。

別ページへアンカーリンクを飛ばしたい場合は「リンク先URL#属性名」で指定すればOK

ページ内でのリンクに限らず、別ページの意図した部分にリンクしたい場合、「/html/index.html#anchor」みたいに指定すれば大丈夫です。

SEO的に何か問題あるということも無いので、リンクして大丈夫なので安心して使って大丈夫です。