ハイパーリンク

他ページへのリンク

<a href="(※)">任意の文字列</a>

(※)にリンク先のURIを書きます.絶対指定( http:// から書く方法)と相対指定(そのファイルがあるフォルダからの場所を指定する方法)があります.

例えば, http://www.hogehoge.net/ に index.html と index2.html が存在し, index.html から index2.html へリンクするとします.絶対指定なら http://www.hogehoge.net/index2.html ,相対指定なら index2.html と書きます.

また, http://www.hogehoge.net/hoge/ に index.html が, http://www.hogehoge.net/ に index2.html があり, index.html から index2.html へリンクするとき,絶対指定なら http://www.hogehoge.net/index2.html ,相対指定なら ../index2.html と書きます.

Caution

「ここ」や「こちらのページ」といった文字列にハイパーリンクをはるのは好ましくありません.例えば,ハイパーリンクの部分を抽出して音声で読み上げる装置(スクリーン・リーダ)で,読み上げられた語句が「ここ」や「こちらのページ」では,何を意味するか分かりません.

また,リンクをたどる動作はマウスのクリックとは限りません.キーボードによる操作を好んだり,障害によりマウスを使えない人もいます.よって,「ここをクリック」というような言葉も好ましくありません.

マーカー

<a id="(※)">任意の文字列</a>

(※)には任意の名前をつけます.マーカーをつけると,同一ページや別のページから,ページの特定部分へジャンプすることができます.例えば, index.html に hogehoge というマーカーをつけ, index.html の別の場所から hogehoge にジャンプするには,

<a href="#hogehoge">任意の文字列</a>

と書きます.また,別のページから index.html の hogehoge というマーカーをつけた場所にジャンプするには,

<a href="index.html#hogehoge">任意の文字列</a>

と書きます.なお,id属性には日本語は使用しない方が安全です.

メールの送信

<a href="mailto:(※)">任意の文字列</a>

(※)に送信先メールアドレスを書きます.メールの件名を指定するときは,

<a href="mailto:hogehoge@hogehoge.com?subject=(※)">任意の文字列</a>

とし,(※)に題名を書きます.件名は半角英数字のみにした方が無難です.

Caution

mailto: をキーワードにロボットをとばしてメールアドレスを収集する場合があります.よって,どうしてもメールアドレスを知られたくないなら, mailto: は使わない方が良いでしょう.

通話

<a href="tel:(※)">任意の文字列</a>

(※)に電話番号を半角数字で書きます.ハイフンは不要です.携帯ウェブサイトでの利用が考えられます.mailto: と同じで,電話番号も個人情報ですから,取り扱いには注意して下さい.

Column

私は,某テレビ局のニュース番組でこの記述を知りました.2000-2001年のときだったと思います.勝手に通話する悪質なプログラムとして取り上げられていました.ソースは暴露されていたに等しいです.電話番号にモザイクをかけただけで, tel: の部分が丸見えでした.

暇だったので,テレビ局の公式ウェブサイトから投書しましたが,その投書は公開されませんでした(笑).

オブジェクト

画像

<img src="sample.jpg" alt="サンプル画像" width="200" height="40" />

src属性に画像ファイル名(絶対指定または相対指定),alt属性に画像の説明,width属性とheight属性は,それぞれ画像の横幅ピクセル数,縦幅ピクセル数を表します.src属性とalt属性の指定は必須です.width属性とheight属性は,指定した方がページの表示が早くなる可能性があります.出力結果は以下です.

サンプル画像

なお,width属性とheight属性は,画像のサイズ通りである必要はありません.例えば,上の例は200×40の画像なのでwidth属性に200,height属性に40と書きました.これらを,それぞれ400,80と指定すると画像が伸びて表示されます.小さい値を指定して画像を縮小することも可能です.ただし,この属性を変化させてもファイルの読み込み速度は変わりません.オリジナルのファイルを読み込むことに変わりがないからです.サムネイルを表示する場合は,別の画像を用いる必要があります.

また,画像に関する長い説明が書かれたURIを記述するlongdesc属性が指定できます.

No Good

無地の画像を使って,width属性とheightを変化させてレイアウトを整える方法は論外です.img要素はレイアウト用の要素ではありません.画像が表示できない環境では表示が大幅に乱れる可能性が高いです.

Netscape Navigatorspacer要素も同様の理由で理解に苦しみます.これはブラウザ独自の要素なので,動作する環境がさらに制限されます.

object要素

<object (MPEGムービー用の属性を指定)> <object (PNG画像用の属性を指定)> <p>代替テキスト</p> </object> </object>

この例では,MPEGムービーを貼りつけたもので,もしMPEGムービーが再生できない場合は,PNGイメージが表示されます.PNGイメージも表示されない場合は,代替テキストが表示されます.