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

HTMLアンカーリンク, 使い方, 目次, 見出しタグ

スポンサーリンク

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

スポンサーリンク