正しいアンカーリンクの使い方を知り、見出しタグを利用した目次を作る
ブログや記事系コンテンツを多く掲載しているサイトの場合、ユーザビリティーを高めるためにも目次を使っている例が多いです。
その際は見出しタグを利用して目次を生成するケースが多いと思いますが、目次のリンク先に設定するのがページ内リンク「アンカーリンク」です。
今回は、アンカーリンクの使い方をまとめることで、正しくページ内リンクを貼るための実装を覚えましょう。
アンカーリンク先にid属性かname属性を置き、アンカーリンク元では「#id」へリンクする
アンカーリンクの使い方は、非常に簡単です。
<h2 id="anchor1">アンカーリンク元1</h2> <h2 name="anchor2">アンカーリンク元2</h2> <a href="#anchor1">アンカーリンク先1はこちら</a> <a href="#anchor2">アンカーリンク先2はこちら</a>
上記のように、id属性かname属性を付与したhtmlタグへ、#を付けたhref属性で指定すればページ内リンクになります。
id属性は1ページ1つしか同一のものは使えない
気をつけて欲しいのが、id属性は同一のものを同じページのソースコード内に1つしか使えないということです。
これはHTML5,CSS3のルールであるため、反することはできません。
別ページへアンカーリンクを飛ばしたい場合は「リンク先URL#属性名」で指定すればOK
ページ内でのリンクに限らず、別ページの意図した部分にリンクしたい場合、「/html/index.html#anchor」みたいに指定すれば大丈夫です。
SEO的に何か問題あるということも無いので、リンクして大丈夫なので安心して使って大丈夫です。