トップページ  > HTML5  > <a>

★HTML5タグリファレンス

<a> …… ハイパーリンクを指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10
広告

このページでは、HTML5のa要素を解説しています。
a要素の最新情報は、以下を参照してください。

HTML Living Standardリファレンス

<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。

<a>は、anchor(アンカー)の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。

相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスとは、http://~で始まるURLを指定する方法で、別のドメイン名のURLにリンクする際などに利用されます。

HTMLソース

<a href="a.shtml">相対パスでリンクします</a><br>
<a href="https://www.htmq.com/html5/a.shtml">絶対パスでリンクします</a><br>
<a href="../index.htm">ひとつ上のディレクトリへ</a><br>
<a href="mailto:[email protected]">メール</a><br>
<a href="../index.htm"><img src="../images/logo.gif" alt="HTMLクイックリファレンス"></a>
↓↓↓

target属性はハイパーリンク先のターゲット、つまり、リンク先をどのように開くかを指定する際に使用します。 target属性の値には以下の4種類、または、任意のターゲット名を指定することができます。 任意のターゲット名を指定する際には、リンク先にそのターゲット名を付けておきます。 ターゲット名は、一文字目がアンダースコア( _ )以外で始まる値でなければいけません。

■リンク先ターゲット(target属性)の値

_self
現在のウィンドウでリンク先を開く
_parent
現在のウィンドウの親ウィンドウでリンク先を開く
_top
現在のウィンドウの最上位階層のウィンドウでリンク先を開く
_blank
新しいタブやウィンドウでリンク先を開く
任意のターゲット名
任意の名前を付けたウィンドウでリンク先を開く

HTMLソース

<a href="a.shtml" target="_blank">別画面を開いてリンクします</a><br>
<a href="a.shtml" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="a.shtml" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="a.shtml" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="a.shtml" target="abc">abcという名前のフレームにリンクします</a><br>
↓↓↓

※このサイトではフレームを使用していないので、target="_parent"とtarget="_top"の動作はtarget="_self"と同じになります。 またabcという名前のフレームは設定していないのでtarget="abc"の動作はtarget="_blank"と同じになります。

rel属性・media属性・hreflang属性・type属性は、リンク先のリソースがどんな性質を持つかを、ユーザーがリンクをたどる前に知らせるための属性です。 rel属性は現在の文書とハイパーリンク先との関係性、 media属性はハイパーリンク先のメディア、 hreflang属性はハイパーリンク先の言語、 type属性はハイパーリンク先のMIMEタイプを、それぞれ指定する際に使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、a要素のname属性は廃止されています。 HTML4.01におけるname属性は、ウェブページ内の特定個所に名前を付けて、ページ内リンクを作成する際などに使用していました。 HTML5で同様の機能を作成する場合にはid属性を使用します。 id属性は、ひとつの文書の中では重複して同じ名前を付けることはできないので、ウェブページ内の場所を一意に特定できます。

HTMLソース

<a id="abc">ファイルの途中にabcという名前を付けます</a><br>
<a href="#abc">abcと名前を付けた場所へリンクします</a><br>
<a href="index.shtml#tex">別ファイルの名前を付けた場所へリンクします</a>
↓↓↓

HTML4.01ではa要素はインライン要素であったため、ブロックレベル要素全体をリンクを指定することはできませんでした。 例えば、段落全体を<a>~</a>で囲んでリンクするような指定方法は認められていませんでした。

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。

HTMLソース

<aside class="ad">
<h1>広告</h1>
<a href="https://www.htmq.com/ad/?adid=00001">
<section>
<h1>美味しいお取り寄せ</h1>
<p>北海道の毛ガニ・鮭・イクラがお買い得!</p>
<p>ワケあり商品で最大通常の80%OFF!</p>
</section>
</a>
<a href="https://www.htmq.com/ad/?adid=00002">
<section>
<h1>グルメなスイーツ特集</h1>
<p>行列のできる有名店のスイーツが大集合!</p>
<p>期間限定で送料無料キャンペーン実施中!</p>
</section>
</a>
</aside>
↓↓↓

HTML5では、a要素にhref属性が指定されていない場合には、プレースホルダーを意味する要素となるとされています。 ここでいうプレースホルダーとは、暫定的に代わりに配置しておくものという程度の意味です。

例えば、コンテンツの一部がまだ作成されていない場合などに、ナビゲーションメニューからリンクを指定するURLが存在しないということがあるかと思います。 そのような場合に、将来的にはリンクメニューが入る予定のその位置に、href属性を持たないa要素を暫定的に配置しておくことができます。

尚、href属性を指定しない場合には、target属性・rel属性・media属性・hreflang属性・type属性も同じく指定できません。

■属性

href属性
ハイパーリンク先のURLを指定
target属性
ハイパーリンク先を開く際のターゲットを指定
rel属性
ハイパーリンク先との関係性を表す(<link>のrel属性と同じ)
media属性
ハイパーリンク先のメディアを指定
hreflang属性
ハイパーリンク先の言語を指定
type属性
ハイパーリンク先のMIMEタイプを指定(MIMEタイプとは、"タイプ名/サブタイプ名"でファイル形式を指定する文字列のこと、例えば、リンク先がHTMLファイルならtype="text/html"となる)
ping属性
ユーザーがハイパーリンクをたどった際にpingを送信する先のURLを指定。値にはスペースで区切って複数のURLのリストを指定することができる。pingの送信先では一般的にユーザーのアクセス記録・集計・解析などが行われる
download属性
リンク先URLへの移動ではなく、リンク先ファイルをダウンロードするようブラウザに示すHTML5から追加

■使用例

HTMLソース

<nav>
<ul>
<li><a href="../">トップページ</a></li>
<li><a href="../html5/">HTML5リファレンス</a></li>
<li><a href="../css3/">CSS3リファレンス</a></li>
<li><a>CANVASリファレンス</a></li>
<li><a href="../images/ico32.gif">アイコンファイルへリンク</a></li>
<li><a href="../images/ico32.gif" download="icon">アイコンファイルをダウンロード</a></li>
</ul>
</nav>
↓↓↓
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ