18: HTML links - let's build a web!

OperaWSC HTML

http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/

What are links?

他のリソース（他の HTML documents、テキストファイル、PDFなど）を指すもの。ブラウザが自動的に追いかける link elements によるリンクと、ユーザーが選択して追うことのできるリンクがある。anchor というのもあって、a element で追加できる。

The anatomy of an anchor link

あらゆるインライン要素は a element に包むことで anchor にできる。

<p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>

ユーザがこのリンクを activate（クリック、とか）すると、現在のページを離れて YDN へ行く。
anchor のいくつかの attribute

href
指し示すリソース（他のファイルや anchor id）
id
その anchor が指し示される場合の id
title
指し示すリソースの追加的な情報

Link or target? The id and href attributes

a element はどの attribute が設定されているかで、役割を変える。よく使うのが href attribute で、これはその anchor が指し示すリソースを指定する。この attribute に指定できる値は

  • 相対 URL、あるいは"/" で始まるそのサーバー内の絶対 URL。"../help/help.html", "/help/help.html" など。
  • 他のサーバー上の URL。"http://wait-till-i.com", "ftp://ftp.opera.com/" など。
  • "#" の後に id。"#menu" など。これは同じ document 内の id を指す。
  • URL と #id の合わせ技。URLの後に #id を加えることで、他の document の特定の部分を指し示すことができる。"http://developer.yahoo.com/yui/#cheetsheets" など。

これらはどれもどこかを指し示すリンクにする。

id attribute を指定するとアンカー（他のリンクが指し示すもの）にする。混乱しそうだが、こう覚えよう: id attribute でアンカーを作り、document の特定の部分を指し示すのに使う。

実は id attribute でアンカーにするのは、どんな element でもできる。

  • リンクは hrfe attribute に #id を指定することで、特定の部分へを指し示す
  • このリンクが activate されると、その id を持つ element へ飛ぶ。
  • id はアルファベットと数字で始まり、スペースを含むことはできない

Don't leave any ambiguity about what you're linking to

ユーザはリンクがあるとそれを辿って見れると思うが、リンク先が存在しなかったりユーザが利用できない形式だったりで見れないこともある。

Providing extra inforamtion with a title attribute

他の多くの HTML element と同様、a element にも title attribute で追加的な情報を与えることができる。これはブラウザではマウスポインタを重ねておくとツールチップとして表示される。

ユーザはこれをいちいち見るほど辛抱強くもないし、screen reader には title attribute を読み上げる機能があるけどデフォルトで off になってるので、以下のような重要な情報は title attribute を当てにしてはいけない。

  • HTML ではないリソース（PDF、画像、ビデオ など）
  • そのサイトを離れ、別のサーバーへ行く
  • 別のフレームに表示される、あるいはポップアップする
Linking to non-HTML resources -- don't make people guess

ブラウザがどう扱えばいいのかわからないものへのリンクはウザい。ビデオはブラウザをクラッシュさせやすいし、大きなファイルならブラウザで開くのではなくダウンロードしたいかもしれない。
ユーザにクリックしたときどうなるか憶測させるのではなく、何が起こるのか教えるようにしよう。

<ul>
   <li>Find more information on the <a href="...">Yahoo Developer Network site (external)</a></li>
   <li>Download the <a href="...">DOM Cheetsheet (PDF, 85KB)</a></li>
   <li>Pick and <a href="...">download different Opera versions from their FTP (external)</a></li>
   <li>Check out a <a href="...">Photo of my book (JPG, 200KB)</a></li>
</ul>

こうやってファイルの種類とサイズを表示しておけば、ユーザのブラウザとかあるアプリがインストールされてるかとか気にする必要はない。上手くスタイルを適用すればより直感的にできる。もっと安全にするなら、ファイルタイプとかそれを扱うアプリの入手先を説明するヘルプを用意するとか。

External vs. internal links

自分のサイトを離れて他のサイトへ移ってしまうのを恐れるあまり、それを防ごうとする方法について（？）

Frames and popups -- just say no

フレームとは、ブラウザに表示されるページをいくつかのフレームに分割して、それぞれのフレームに文書を表示するもの。これはほんとひどいことになるからやめれ。

  • 検索エンジンは（フレームを使った）ページ丸ごとではなく、（フレームで使われる）ページの一部をインデックスする。フレームがないと意味不明になる。
  • ユーザはページをブックマークできない。
  • screen reader でフレームのページを操作するのはとても困難である。
  • 他のサイトのページはフレーム内に表示されるべきものではなく、"framebreaker" を使ってフレームを解除しているかもしれない。これは犯罪者がユーザに、たとえば銀行のサイトのようにみえるページでクレジットカードの情報を入力させる（フィッシング）のを防ぐため。

フレーム内の文書にあるリンク、どのフレームにリンク先の文書を表示するかを target attribute を見て判断する。もし フレームが存在しない場合、これらのリンクは新しいブラウザを起動してしまう。

新たにブラウザを起動させるという手法（script によるものも、target attribute を "_blank" にするものも）もあるが、最近のブラウザは popup blocker とかついてるから無駄。

要約: target attribute は使うな（何をしているのか本当にわかっている場合を除く）。最近のブラウザはタブとかあるから、ユーザは裏で開いておきたいならそうできる。

Benefits of outbound and inbound links

たとえそれが競合する相手であっても、外部のサイトにリンクする価値はある。
# 日本語にするのがめんどくなったので省略

Link wording

リンクは単なる文章の一部ではなく、ユーザが操作する対象でもある。たとえば Opera で C-S-l を押すとそのページに含まれる全てのリンクを列挙する。
リンクテキストは、それだけを抜き出しても何/どこへのリンクなのかわかるようにするべき。
それだけでなく、同じリンクテキストで違うリソースを指すリンクは避けるべき。"click here" とか "more" とか。長々としたリンク先の説明を表示したくないなら

  • 画像をリンクとし、その代替テキストとして説明を入れる
  • "more" 以降のリンクテキストを span element とし、CSS で非表示にする
Link styling

リンクの見た目は重要である、リンクにはいくつかの状態がある。

link
最初の状態。デフォルトでは青色。
visited
既に行ったことのあるリンク。デフォルトでは紫色。
hover
マウスが乗っかってる状態のリンク。
active
active なリンク。ブラウザが次のページを読み込んでる間とか。そのページに戻ってきたときに、前回 active だったリンクにも使われる。

Summary

  • a element の構造
  • リンクとしての a element（href attribute)と、アンカーとしての a element（id attribute）
  • アンカーの id はユニークでなければならない
  • リンク先の情報の必要性（ファイルタイプとファイルサイズ）
  • 追加的な情報を title attribute に入れる方法と、それは信頼できないと言うこと
  • 外部リンクと内部リンク
  • 昔ながらのフレームやポップアップについて
  • 外部サイト(へ|から)のリンクの恩恵
  • 適切なリンクテキストの与え方と、なぜそれが必要なのか
  • リンクのスタイルに関する基礎的なこと

Exercise questions

what is wrong with the following link: `<a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>`?
  • リンク先のファイルの情報が title に入ってる。それはリンクテキストに含めるべき。
  • それなんのレポート？
What is the target attribute in links for and are there any good uses for it?
  • リンク先をどのフレームに表示するか。あるいは別窓に表示するとか。
  • popup blocker を開発するときとかは使う必要あるよね（なんで俺ってこんなにひねくれてるんだろう）。
I've talked about link relationships and connections between links and anchors. Is there an attribute for links that describes relationships between documents, too?

`<link rel="next" ...>` とか、だっけ？

How can you write a link that sends the visitors to an element further down the page when they click it? What do you need to make sure of beforeand?

下の方にアンカーを置いといて、そのアンカーへのリンクをつくる。