<a>ハイパーリンクを指定

<a>タグはハイパーリンクを示す場合に使用する要素です。 指定されたファイルへリンクするには、<a>タグにhref属性を指定し、そこでリンク先のurlを設定します。

<a>タグの「a」とは、「船をつなぎとめる錨」などを意味するアンカー(anchor)の略で、特定の場所へリンクが設定されている場合の、その出発点と到達点の事となります。 a要素を利用すると、そのどちらも指定する事ができます。

例えばa要素をリンクの出発点とする場合は、href属性(hyper referenceの略)で到達点となるリンク先のurlを指定します。 同一ページ内の特定の場所を到達点としたい場合は、その位置にid属性で名前をつけ、a要素のhref属性で「#id名」と指定する事で同一ページ内の特定の位置へ移動することができます。 (別ページの特定の位置へリンクしたい場合は「url#id名」と指定)

またリンク先のURLの指定は絶対パス・相対パスのどちらでも指定することができます。 リンク先を別のウィンドウで開きたい場合はtarget属性を使用します。

HTML5での変更点

HTML4.01以前のa要素は、インライン要素として機能していました。 ですがHTML5では、a要素の親要素に入れられる要素であれば(従来でいう)ブロックレベル要素であっても内容として含める事ができます。

※他のリンクやフォームボタンなどインタラクティブコンテンツを含む事はできません。

例えば、段落やテーブル、リストなどブロックレベル要素全体に対して利用したりする事などができます。 またhref属性を利用しない場合は、プレースホルダーを意味する要素になるなどの変更もHTML5では行われています。

なおHTML5ではcharset属性、rev属性、shape属性、coords属性、name属性が廃止されています。 特定の位置へリンクしたい場合は、name属性の代わりにid属性を使用します。

またHTML5.1ではrev属性が復活し、a要素にhref属性を指定しない場合はインタラクティブ・コンテンツとして扱われなくなりました。

書式

  • <a 属性="値">~</a> ……… ハイパーリンクを指定する

属性

href="url" ハイパーリンク先のアドレスを指定
target="" ハイパーリンク先の開き方を指定
  • _self …… 現在のウィンドウにリンク先を表示
  • _parent …… 現在のウィンドウの親ウィンドウにリンク先を表示。
  • _top …… 階層の最上位のウィンドウにリンク先を表示
  • _blank …… 新しいウィンドウ・タブにリンク先を表示
  • 任意の名称 …… 任意のウィンドウ名・フレーム名のウィンドウにリンク先を表示
rel="" ハイパーリンクの種類を指定
media="" メディアタイプを指定
hreflang="" ハイパーリンク先の言語を指定
type="" ハイパーリンク先のMIMEタイプを指定(例えばHTMLファイルならtype="text/html"となる)
download="" ダウンロード用のリンクを指定

href属性

href属性を指定する事で、そのa要素を出発点としたリンクが定義されます。 href属性の値にはリンク先のパス(url)を指定します。指定するパスは絶対パス、相対パスのどちらでも利用できます。

相対パスとは現在のファイルの位置から見て、相対的なパスを指定する方法で、例えばリンク先のファイルが同じ階層にある場合なら、href属性の値にファイル名を指定するだけでリンクする事ができます。 絶対パスとは「http://」からはじまるurlを指定する方法で、別のドメインへリンクする際などに使用されます。

またHTML4.01以前では、a要素のhref属性は必須でしたが、HTML5では必須属性ではなくなりました。 a要素にhref属性を指定しない場合は、プレースホルダーであると示されます。

例えば連載記事などの場合、連載前の目次などにhref属性をつける必要はなく、a要素だけを指定することで「リンクはしないが、プレースホルダーとして存在してる」という意味を与える事ができます。

<ul>
  <li><a href="sample1.html">スノーボードの未来</a></li>
  <li><a>オリンピックに出場</a></li>
  <li><a>スノーボードのこれから</a></li>
  <li><a>活躍した選手たち</a></li>
</ul>

target属性

target属性では、href属性で指定したハイパーリンク先をどのように表示するか、つまりそのターゲット指定することができます。 target属性の値には、上記で掲載した4種類、または任意の名前を指定することができます。

任意の名称を指定する場合は、通常はiframe、javascriptなどで指定したウィンドウ名が該当します。 例えば、現在のウィンドウ内でiframe、javascriptなどでウィンドウ名・フレーム名を指定している場合に、その任意で指定した名前を値として使う事ができます。

※任意の名称を値とする場合、1文字目がアンダースコア(_)で始まるような値にしてはいけません。

<a href="sample.html" target="_self">現在のフレーム</a>
<a href="sample.html" target="_parent">親フレーム</a>
<a href="sample.html" target="_top">ウィンドウ全体</a>
<a href="sample.html" target="_blank">新規ウィンドウ</a>
<a href="sample.html" target="abc">名前が「abc」のフレームにリンク</a>

その他の属性

type属性では、ハイパーリンク先のMIMEタイプを指定します。 MIMEタイプとは「タイプ名/サブタイプ名」でファイルの形式を指定する文字列の事です。

またhreflang属性では、ハイパーリンク先の言語を、rel属性では現在のHTML文書とハイパーリンク先の関係性を指定します。 これはlink要素のrel属性と同様の方法となります。

リンク先をフォローしたくない場合はrel属性の値にnofollowを設定します。

使用した時の例

<a href="https://www.yuu-diaryblog.com/">
<h4>ブロック全体にリンクした場合</h4>
<p>ブロック全体にリンクした例です。<br />
a要素で囲まれた範囲をクリックするとリンク先へ移動します。<br />
この場合トップページへ移動します</p>
</a>

<p><a href="/hp-web/html5/">リファレンスへ戻る</a></p>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <a href="">~</a> カテゴリ フローコンテンツ, フレージングコンテンツ, インタラクティブコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツだけを含む場合はフレージングコンテンツ、それ以外ならフローコンテンツ 子要素 トランスペアレント
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~