html: リンクの張り方とオプション

このページの最終更新日: 2021/06/18

リンクの張り方 - a tag -

リンクを張るときは <a href="ファイルのパスまたはURL">リンクを張りたい文字列</a > とする。閉じタグをみればわかるように、この a がタグである。anchor の略で、他のページへのリンクだけでなく、指定したメールアドレスに対するメールソフトの起動なども行うことができる。

href の情報をファイルのパスで指定する方法を相対リンクという。たとえば、このページから informatics の目次のページにリンクを張る場合には、次のように考える。

このページのパスは informatics/html/html_basic_link.html である。つまり informatics というフォルダがあり、その中にさらに html というフォルダがある。html の中の html_basic_link.html というファイルがこのページである。
ここから、informatics の目次のページにリンクを張りたい。そのページのパスは informatics/informatics_meta/index_informatics.html である。
この場合、href="../informatics_meta/index_informatics.html" とする。../ は一つ上の階層という意味である。

一方、href の中に URL を指定する方法を絶対リンクという。href = "https://ultrabem-branch3.com/informatics/informatics_meta/index_informatics.html" のようになる。

両者のメリットとデメリットをまとめてみよう。

サーバーを移転した場合は普通 URL が変わるので、絶対リンクだと張り直さなければならない。これはかなり手間。相対リンクなら必要なし。ただし、TextSS や TextWrangler のような複数ファイルのテキストを一括置換できるソフトもあるので、これらを使えば問題ない。
コンピューター内で (local で) ファイルの場所を移動すると、相対リンクだとリンク切れになってしまう。
相対リンクの方が記述が短くてすむ。わずかであるが、データ転送量を考えると有利かもしれない。

基本的にはどちらでも OK だが、上記の 1 を重視して、相対リンクを進めているサイトが多いようである。

属性	説明
href	href="ファイルのパスまたは URL"。相対パス、絶対パスのどちらも指定することができる。
title	title="補足情報", マウスをリンク上に合わせたときに表示される情報を含めることができる。リンク先のサイト名などを表示させたいときに用いる。
target	target="_blank" のようにして、リンクを新しいウィンドウで開くかどうかなどを指定できる (3)。 _blank: 新規ウィンドウでリンクを開く _self: 現在のウィンドウでリンクを開く _parent: 親フレームでリンクを開く _top: フレーム分割を解除してメインウィンドウでリンクを開く
rel	詳細は次の項目 SEO 対策と rel 属性を参照のこと。 rel="nofollow" で Google などのクローラーがリンクを辿らないようにする。

他のページから被リンクがあるかどうかは、依然として SEO の重要な項目の一つである (2)。これは、リンク元のページからリンク先のページへとある種のパワーを送っているという形で評価されているため、自分のページのパワーを渡したくない場合には rel="nofollow" を使うことになる。

価値のないサイトへの発リンク、とくにスパムの可能性があるサイトへのリンク (2)。

同様に、作りかけのページなど、価値のないページへの内部リンクでも、rel="nofollow" を使うべきである (2)。

html と html5 で記述法が異なる。

目指す場所 (飛ばしたいキーワード) に a タグの name 属性でタイトルを指定する。

<a name="title">キーワード</a>

リンクには、href のところに上記の title を # とともに指定する。

<a href="#title">キーワードのところまでジャンプ</a>

html5 でも基本は同じであるが、キーワードの指定には name でなく id 属性を使う。さらに、id は h1, p, div などのさまざまなタグで使用できるため、基本的に html よりも便利になっている。

<a id="title">キーワード</a>

<a href="#title">キーワードのところまでジャンプ</a>

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)

Date	Name	Comment