リンク先にジャンプするのはブラウザが行っていることであって、この現象はリンクする行為と直接関係がありません。
問題点を指摘されるリンクの用い方というのは、必ずと言っていい程この基本を蔑ろにしたものとなっています。従って、極めてシンプルなこのリンクの本質を知っておけば：
といった事態を自然に防ぐことができる筈です。
簡単な例を挙げます。「ココをクリック」の「ココ」という文字列をアンカーにする行為は、しばしば批判されます。しかし「なぜ間違っているのか」については個々の具体的な問題としてしか説明されません。これでは、いつまで経ってもこれと類似した間違った方法でリンクしてしまう方が後を絶たないわけです。
この「ココをクリック」の問題点は実はたった一つです。もといそう考えるべきです。
この例では、「ココ」という文字列と、終点となるリソースが関係付けられていることになります。つまり、これをやってしまった制作者は、終点リソース（例えば http://www.google.com/ 等）と、「ココ」という文字列を関係付けたことになってしまっています。しかし、制作者にそのような意図は無い筈です。
要するにこれが問題点です：
何故このようなことをしてしまうのでしょうか。リンクを次のように考えてみると納得できます。
これが、数々の間違いの元凶となる考え方です。「ココ」をクリックさせて「ジャンプ」させる為に、この制作者は「ココ」という文字列をアンカーにしたのです。これは極めて自然な行為であり、疑いなど抱く筈がありません。
このように覚えて下さい。
リンクしたいリソース（例えば http://www.google.com/）と一体何を関係付けたいのか、この一点をきちんと意識しておくことで、大抵のミスは防ぐことができます。
ハイパーリンクにおいては、ある文字列とリソースの関係を明示することしかできません。http://www.google.comと最も関係の深い文字列は「Google」ではありませんか? ですから：
と、このように両者（「Google」と「http://www.google.com」）をリンクさせるのが自然です。「ココ」と http://www.google.com に、一体全体どういう関係があります? とても不自然で奇妙に思えませんか? そう思えたなら、もう大丈夫です。印刷されても、アンカーリストを抽出されても、マウスを操作できない閲覧者が利用しても、音声ブラウザで利用されても、何れにしても体裁が保たれた、立派な「ハイパーテキスト」を作れるようになる筈です。
「リンク先に何があるのか」をできるだけ明確に分かるようにする。
今日、とても面白い話を見つけました。
→「今日、とても面白い話（最先端ロボット技術）を見つけました。」等とすべき。
「とても面白い話」を既に知っている人ならクリックはしないで済むことでしょう。リンク先の文書がなんであるかを説明するのに、抽象的な言葉、形容詞などでは不十分です。なるべくならば、その文書のタイトルを使います。タイトルが存在しないなら、最も重要度の高いキーワード、見出しなどを選択すべきです。
次善策として、「最先端ロボット技術」のようなハイパーリンクの説明を、（）内ではなく、A要素のtitle属性に記述するのも手です。
詳細な情報は、こちらをクリックしてください。
→「この件に関する詳細情報です。」等とすべき（「この件」には要約を記述します）。
「戻る」
非常に良く見かけるこの「戻る」リンクには、大きく分類して2つの欠点があります。
ハイパーリンクリストなどに再利用した際に使いづらくなること、そして、閲覧者が情報を判断する術を制限してしまうことは当然起り得る障害ですが、その他、他所のサイトの文書にリンクする場合に注意したいのがデッドリンクです。きっちり管理できるなら良いかも知れませんが、量が多いとこれは難しい問題となります。しかし適切な語句でリンクしておけば、語句を検索してデッドリンクとなった文書を探し出すことも可能になります。また、他所のサイトの文書を参照する際には、きちんとした説明をつけないと失礼です。
「ページトップへ」「ページ最上部へ」「Page top」「Back to top」。このような文字列を、ページのトップに位置する要素へのアンカーにするのは、「リンク」＝「ジャンプ」と考えている証拠です。害といった害はありませんが、不自然な行為です。
http://foo.com/bar.html#top というURLを持ったリソースは、#topというid属性をもった要素です。この要素と「ページトップへ」という文字列にどういう関係があるのでしょうか。「へ」って何ですか? また、突然このようなアンカーが出現する文脈上の必然性も謎です。この不自然な行為は、例えば印刷した時に意味が失われます。確かに大した問題ではありませんが、実際に起る問題の多寡を「問題」にしているのではありません。不自然な行為自体を問題にしているのです。
ちなみに、ページの最上部にスクロールするというのは、何をどう考えてもブラウザが提供すべき機能です。少なくとも、文書とは独立した「機能」として、外部ファイルとして分離されたJavaScriptか何かで提供するのが自然です。
HTMLは「動作」しません。
ハイパーリンクの文字列は、リンク先の文書の説明です。少なくとも閲覧者はそこから情報を読み取ろうとします。しかし、ページレイアウトが重要な問題である場合、どうしてもハイパーリンクの文字数に自ら制限をかけてしまうことになります。例えば「戻る」「次へ」「前へ」「HOME」「TOP」その他のナビゲーション用のハイパーリンクです。これらの短い単語の問題点は、ページ作者によって意味が微妙に異なることです。例えば「TOP」。これは、ページの最上部にジャンプするという意味で使っている人もいれば、コンテンツのトップ（目次）を開くという意味で使っている人もいます。これはしばしば混乱の元になります。
こういった短い単語を使わざるを得ない場合、補助的な解決策がいくつかあります。
<a href="#" title="コンテンツの目次に戻ります">TOP</a>この方法によって、ハイパーリンクの補助的な説明を加えることが出来ます。title属性を解釈するブラウザ等は、この属性値をポップアップ表示してくれたりします。しかし、一番良いのは、title属性を用いなくてもリンク先の文書の概要がわかるようにすることであることを忘れないようにしたいものです。
title属性を用いた時に一部のブラウザなどで期待されるポップアップ表示を、DHTMLを用いることで意図的に実現することが出来ます。これは、title属性を用いた際の補助的なものだと考えてください。DHTMLの技術を利用できないブラウザなどでは意味を持ちません。（参考：HotWired Japan : Webmonkey : dynamic_html）
しかしこれは、HTMLソースが汚くなるのでオススメしません。「HTMLソースが汚くなる」ということは、フレキシビリティが損なわれることを意味します。いわゆる一般的なDynamicHTMLは、HTML文書にプレゼンテーション要素を紛れ込ませる形で成り立っているものが非常に多いのです。
長くなったので別項にて（補足 - Document Object Modelを用いる方法 -）
文字の代わりに、家の形をしたアイコン、矢印のアイコンなど直感的な画像を使う方法もあります。alt属性に代わりとなるテキストを記述しておきます。
スタイルシート（CSS）で、冗長と思われる部分を非表示にしてしまいます。
例えば、8月分のウェブ日記へのリンクは：
<a href="weblog200208.html">ウェブ日記 2002-08</a>このようにし、そのリンク単体でもリンク先が分かるようにした方がベターです。しかしこの「ウェブ日記」という文字列が、デザイン上冗長、あるいは文脈上自明である場合には省略したいことも多いことでしょう。その場合、「ウェブ日記」をclass属性付きのspan要素などでマークアップし、CSSで非表示にすれば、リンクの価値は変わらず、かつ、文脈やデザインを妨げません。
.prefix{ display : none }<a href="weblog200208.html">
<span class="prefix">ウェブ日記</span>
2002-08
</a>ハイパーリンクは、しばしば文章の流れを妨げる原因になります。例を挙げます。
これらは、それぞれの用語を解説するページへのハイパーリンクになっています。こういったことができるのが、ハイパーリンクの良い点なのであって、ページ作成者は既にウェブ上にある資源を有効に活用することが出来るわけですが重要度が低い場合には、かえって文章の流れを妨げることになり、閲覧者は本文に集中できなくなるかも知れません。
この場合、いわゆる「別窓」で開かせる（target="_blank"）という方法が取られる場合が非常に多いですが、これは閲覧者の操作系に著しく干渉することになり、好ましくありません。
という２つの理由からも、「別窓」がよろしくないことは明らかです。すべきことでもないのに、製作者が手間をかけるのは馬鹿馬鹿しいことです。
では他にどういった解決策があるでしょうか。残念ながら、この例のように他者の情報源に頼る限り、特に有効な方法はありませんが、このような外部へのリンクは、スタイルシートを用いて色分けなどすると、親切かも知れません。
印刷されたHTML文書はハイパーリンクが機能しませんので、アンカーの直後に終点リソースのURIを表示させると親切です。
@media print{
a:after{ content: " (" attr(href) ")" }
}link要素で外部スタイルシートを参照している場合、次の条件を満たしていなければなりません。
こういった「改善されるが何も損失がない」配慮をする際には、ブラウザの対応状況などは一々考えないようにしましょう。
ただ、リンクのURIを表示させるというのは、本来印刷用のソフトがやるべき仕事であって、この配慮ははっきりいって冗長です。href属性にURIをきちんと示しているわけですから、それを応用できないUser Agentがお馬鹿なのです。
類似リソース、というかネタ仕入れ元：Print-friendly links (英語)
title属性によるポップアップはタイムラグがあることが多く（IE等）、アンカーをポイントした瞬間にポップアップさせたい場合、通常次のような記述を余儀なくされます。
イベントハンドラ、onmouseoverを使って、bar()関数を呼び出す方法です。しかし、これはJavaScript依存の悪しき方法であります。補足的な説明にはtitle属性を使うのがHTML的に自然な方法であり、onmouseover等を一々記述しなくても、同様の効果を得られるのが、Document Object Model（以下、DOM）です。
つまり、製作者は、自然なHTMLを書くだけで、便利な機能はすべてDOMが引き受けてくれる、という形が理想なのです。外部CSSを利用する利益をご存知の方は、この理想が良く理解されることでしょう。
では実際、この例に全く手を加えず、どうやってポップアップさせるのか、という問題を、DOMで解決してみます。うちは、サンプルスクリプトを配布する性質のサイトではありませんので、一つの例として参考にしてください。サンプル：メンテナンスフリーのポップアップ
サンプルはご覧になりましたでしょうか。利点と欠点をまとめます。
利点の前者は、製作者の負担が変らないことを意味しますので、私は特に重要だと考えます。
NetscapeCommunicator4.xなどは、DOMをサポートしていません。このようなブラウザを視野に入れた場合、ポップアップを実現するのに毎回、特別な配慮が必要となり、制作意欲を減退させる要因となりかねません。
標準規格DOMを無視したUserAgentは、ユーザーに配慮するウェブ製作者の敵であります。
……なわけないですね。
いくらWAIだの何だのといっても、上っ面の説明しかないものはあまり参考にならないです。個人製作者が「有りうる個々の事例」を全部覚えるなんて出来っこありません。そうではなくて、原理的にどうして宜しくないアンカーなのかということを説明する文章というのは中々見つからないものでして。
この記事では共通すべきユーザーインターフェイスの仕事をウェブページ製作者が横取りするのは賢くないというシンプルなお話を読むことが出来ます。