a (Anchor) タグ


a (Anchor) タグ の機能

 a タグはハイパーリンクを作成します。idタグ(HTML4ではnameタグ) を指定するとページ内のジャンプ先を定義することもできます。

 下の例で 1行目は単純なハイパーリンクです。2行目はタブを新しく開いてそこにリンク先のウェブページを表示します。3行目はリンク先のウェブページを開き、"section1"という位置にジャンプします。 4行目は 3行目のジャンプ先の設定例です。同じページ内でジャンプする場合は、5行目のようにページ名を省略できます。

<a href="http://www.yahoo.co.jp">Yahoo! Japan</a>
<a href="http://www.yahoo.co.jp" target="_blank">Yahoo! Japan</a>
<a href="http://192.168.1.100/doc/page1.html#section1">はじめに</a>
<a id="section1">はじめに</a> (HTML4では <a name="section1">はじめに</a>)
<a href="#section1">はじめに</a>

a タグの属性 (HTML5)

 以下にHTML5で有効なaタグの属性一覧を示します。たくさんありますが、実際によく使われるのは、hrefとtargetです。特にhrefはジャンプ先の指定に使うので、これがないとaタグの意味がなくなります。targetはリンク先のページをどう開くかの指定で、新しいタブで開くときは"_blank"を指定します。

 この他にすべてのタグに共通な属性として id, class, style 等(グローバル属性)があります。特に id は HTML4までにあったname属性の代わりに使います。つまり、ページ内のジャンプ先の設定に使用します。

属性説明
downloadfilename (例) filename="home.png"ダウンロードするファイル名
hrefURL (例) href="http://www.yahoo.co.jp"リンク先のURL
hreflang言語コード (例) hreflang="ja"リンク先ページの言語
media(例) media="print"リンク先のメディアやデバイスの属性
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
(例) rel="author"
当該ウェブページとリンク先の関係を示す。
target _blank
_parent
_self
_top
framename
(例) target="_blank"
リンク先のページをどこに開くかを指定する。_blankを指定すると新しいタブで開く。
typeメディアタイプ (例) type="image/jpeg" リンク先のメディアタイプ

(注意) この他、すべてのタグで共通の属性 id, class, style 等 があります。name属性はHTML5では廃止されています。代わりに id 属性を使用します。

JavaScriptの実行

 aタグのhref属性は、URLの代わりにJavaScriptのコードを書くことができます。これはhref属性の中に"javascript: ..."とすることで、hrefの内容がJavaScriptであるとブラウザが解釈し実行されます。

<p><a href="javascript:alert('Hello!');">hello</a></p>

hello