XHTML でのハイパーリンク タグの使用に関するチュートリアル

ハイパーリンク。「リンク」とも呼ばれます。ハイパーリンクは、私たちが閲覧する Web ページのいたるところにあると言えます。Web ページ上のリンク アドレスをクリックすると、別の Web ページにリンクされます。これがハイパーリンクの動作です。
ハイパーリンクを定義するには、<a></a> タグを使用します。構文は次のとおりです。
<a href="url">表示されるテキストまたは画像</a>
例：

ブラウザ表示効果:
Baidu へのリンク 上記の「Baidu へのリンク」という文字をクリックすると、ブラウザは Baidu のホームページにリダイレクトされます。

ハイパーリンクのプロパティ
ハイパーリンクのプロパティ:
href リンク アドレス。絶対的な Web アドレスまたは相対的なアドレスを指定できます。
target リンクターゲット。値が _blank の場合、リンク アドレスは新しいウィンドウで開きます。デフォルトでは、リンク アドレスは現在のウィンドウで開きます。
名前アンカーリンクについては、以下で別途説明します。

相対ウェブリンクアドレス:

この例では相対アドレスを使用していますが、上記の Baidu にリンクされている例では絶対アドレスを使用しています。

ターゲット属性を追加した例:

リンクをもう一度クリックすると、ブラウザは新しいページを開いてリンク アドレスを開きますが、元のページ ウィンドウは保持されます。
ヒント: リンク アドレスが現在のトピックまたはプロセスと密接に関連していない場合、通常は target="_blank" 属性が有効になります。それ以外の場合は、閲覧者に使いやすいブラウジング エクスペリエンスを提供するために、新しいウィンドウを有効にしないようにしてください。
ページが複数のページフレームで構成されている場合、ターゲット属性には他の値も設定できます。

メールハイパーリンク
メールリンクの例:

このリンクをクリックすると、デフォルトの電子メール クライアントで電子メールを作成できるようになります。

アンカーリンク
アンカー リンクはページ内のリンクを指しますが、現在ではテキスト ハイパーリンクもアンカー リンクと呼ぶ人が増えています。
アンカーの役割を説明するために例を見てみましょう。
たとえば、よく書かれた記事があれば、多くの人がコメントを投稿しますが、コメント用のウィンドウは通常、コメントの下部にあります。ウェブサイトは、コメントが投稿される場所にアンカー リンクを設定し、「コメントを投稿する」など、コメントが表示されるアンカー リンクへのリンクを設計します。他の人が残したコメントを閲覧せず、すぐにコメント入力ウィンドウにジャンプしたい場合は、「コメントを投稿」をクリックすると、この業界内のコメント入力ウィンドウにすぐにジャンプします。このデザインは間違いなく視聴者のユーザーエクスペリエンスを向上させます。
アンカー リンクを使用してアンカーを作成する例:

アンカーへのハイパーリンクを作成します。

例からわかるように、アンカーにアクセスするには、リンク アドレスの後に「#」記号とアンカーの名前を追加するだけです。上記の例では、このページのアンカーにリンクしているため、前のリンク アドレスは無視されます (注: 実際に無視されるのは相対アドレスですが、ここでは説明しません)。
ヒント: このアンカー タグの使用を試してみたい場合は、効果を確認するために、Web ページ上でアンカーへのハイパーリンクとアンカー タグの間に十分なスペースを確保するように注意してください。これをテストするには、上で学習した改行タグを使用して、上下に十分な空白を作成できます。
他のページにリンクするアンカー タグを作成することもできます。例:

もちろん、テスト アンカー タグは www.abc.com ページに存在している必要があります。そうでない場合、www.abc.com ページにのみリンクされ、アンカー タグは無視されます。