1ページ内の記述が多くて縦に長いので、ページ内にジャンプしてユーザービリティをよくしたいことってありますよね。

そのやりかたと注意したいことについてお伝えします。

ページ内ジャンプするhtmlの書き方

用語集のページを想定して説明します。

用語集ページの先頭には「目次」として用語がリストアップされています。そのリストアップされた用語毎に、ページ内下部にあるその用語の説明文にページ内ジャンプするというものです。

目次の用語リストからページ内ジャンプさせるリンク元での記述は、通常のリンクの書き方でhref属性にid属性を指定します。

例）<a href="#domain">独自ドメインの意味はこちら</a>

その用語の説明が記述してある文章の見出し部分にジャンプさせるリンク先での記述は、id属性を設定します。

例）<h3 id="domain">独自ドメインとは</h3>

※リンク先のタグは以前のHTMLバージョンでは<a>タグのみでしたが、最新のバージョンHTML5では、他にも<h1~>や<p><div>などでも利用できるようになりました。

異なるページ内へのジャンプするには

ジャンプさせるリンク元での記述は、ページURL＋id属性を指定します。

例）<a href="terminology.html#domain">独自ドメインとは</a>

以前のhtmlバージョンでの書き方とは異る

htmlというホームページを書くための言語の最新バージョンはHTML5です。

ページ内ジャンプについての書き方が以前のバージョンと異なっていますのでご注意ください。

以前のバージョンのhtmlでは、リンク先に<a>タグでname属性を設定し、リンク元ではそのname属性を指定するという書き方をしていました。

<a href="#domain">独自ドメインの意味はこちら</a>

<a name="domain" >独自ドメインとは</a>

ユーザーを惑わせないように配慮

ページ内ジャンプを設定するときに気をつけておきたいのがユーザーを惑わせないようにするということです。

ユーザーにとってはそのページ内ジャンプ用のリンクが、「ページ内ジャンプ」なのか通常の「別ページへのリンク」なのかはわからないなか、

リンクをクリックしたはずなのに別ページの「トップ」に飛んだつもりだったのに、なぜかどこかのページの「途中」にいると惑わせてしまう可能性もあります。

そのようなことがないように例えば、その用語の説明文の最後に「用語の目次に戻る」アンカーテキストでリンクをはっておくと良いかもしれません。

また別ページの途中にジャンプするようにしたときは、「ページタイトル＋ジャンプ先の見出し」といったアンカーテキストにするとリンク先にジャンプする前に自分がどこにいくのか理解したうえで移動できるので不要な混乱をさけれてユーザービリティよいかたちにできると思います。

参考になれば幸いです。