HTML入門 | HTML基本要素 | HTMLリンク(link)

Tags:

Webページには、別のページや別のサイトへ接続する多くのハイパーリンク(hyperlink)が存在する。このようなハイパーリンクは単にリンク(link)とも呼ばれ、HTMLでは<a>タグで表現する。“a"はアンカー(Anchor)を意味する。

文法

<a href="Link URL">リンクタイトル</a>

以下の例は、クリックするとページが移動する。

<a href="//www.devkuma.com">DevKuma</a>

コード実行

target属性

属性値 説明
_blank リンク先の文書を新しいウィンドウまたは新しいタブで開く。
_self リンク先の文書を現在のフレーム(frame)で開く。デフォルト設定。
_parent リンク先の文書を親フレーム(frame)で開く。
_top リンク先の文書を現在のウィンドウの最上位フレーム(frame)で開く。
frame 名前で指定したフレーム(frame)でリンク先の文書を開く。

例

<div><a href="/books/5" target="_blank">_blank</a></div>
<div><a href="/books/5" target="_self">_self</a></div>
<div><a href="/books/5" target="_parent">_parent</a></div>
<div><a href="/books/5" target="_top">_top</a></div>
<div><a href="/books/5" target="myframe">frame</a></div>
 
<iframe name="myframe" style="width:50%; height: 100%"></iframe>

コード実行

リンクの状態(state)

HTMLリンクの状態には、次の4種類がある。

状態 説明
link まだ一度も訪問したことがない状態。デフォルト設定。
visited 一度でも訪問したことがある状態。
hover リンクの上にマウスを置いている状態。
active リンクをマウスで押している状態。

Webブラウザでリンクが設定されたテキストの色は次のようになる。

  • デフォルトでは、リンクされたテキストには下線が付き、テキスト色は青に変わる。
  • visited状態のリンクには下線が付き、テキスト色は紫に変わる。
  • active状態のリンクには下線が付き、テキスト色は赤に変わる。
 <style>
        a:link    { color: blue; }
        a:visited { color: green; }
        a:hover   { color: yellow; }
        a:active  { color: red; }
</style>

コード実行

ページのブックマーク(Bookmark)

<a>タグのname属性を使うと、簡単なブックマーク(Bookmark)を作成できる。まず、ブックマークで移動したい位置に<a>タグを作り、name属性を記述する。次に、そのname属性値を使って別の<a>タグからリンクを設定すればよい。

<a href="#bookmark25">タイトル25へ移動</a>
...
<h2><a name="bookmark25">タイトル25</a><h2>

コード実行