@ HTML

a 要素

a 要素はアンカー(Anchor)の略で、リンクの出発点と到達点を指定するために使われます。リンクの出発点では href 属性でリンク先を指定します。

ファイルの特定の場所を到達点とする場合には、name 属性か id 属性を使用して、その場所に名前(識別子)をつけます。

a 要素の使用例を次に示します。

elements_a.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <div style="margin-top:20px">
    <p>■ リンクを設定する</p>
    <a href="target.html">target.htmlへ</a>
  </div>
  <div style="margin-top:20px">
    <p>■ ページ内の指定した場所にジャンプする</p>
    <a href="#bottom">ページの最後へ</a>
  </div>
  <div style="margin-top:20px">
    <p>■ リンクタイトルを設定する</p>
    <a href="target.html" title="target.htmlへ">target.htmlへ</a>
  </div>
  <div style="margin-top:20px">
    <p>■ 新しいウィンドウにリンク先を表示する</p>
    <a href="target.html" title="target.htmlへ" target="_blank">target.htmlへ</a>
  </div>
    <div style="margin-top:20px">
    <p>■ 画像にリンクを設定する</p>
    <a href="target.html" title="target.htmlへ"><img src="images/logo.gif" alt="ロゴ"></a>
  </div>
  <div style="margin-top:800px;">
    <p id="bottom">ページの最後</p>
  </div>
</body>

</html>

demo

href 属性が指定されていない a 要素は、プレースホルダ(場所取り)を表すことになります。

「リンクは機能させたくないが、その内容だけは表示しておきたい」また、「リンク先が準備中である」場合に使用します

example

<nav role="navigation">
  <ul>
    <li><a href="/">トップページ</a></li>
    <li><a href="/news/">ニュース</a></li>
    <li><a>事例紹介</a></li>
    <li><a href="/legal/" target="_blank">使用許諾条件</a></li>
  </ul>
</nav>

HTML5 では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。

example

<aside class="ad">
  <h1>広告掲載について</h1>
  <a href="/example.html" title="広告掲載詳細ページへ">
    <section>
      <h1>広告募集中です</h1>
      <p>月額 100円から掲載可能です。</p>
      <p>詳しい料金設定などはこちらのページをご確認ください。</p>
    </section>
  </a>
</aside>
a 要素の属性
属性名 説明
download リソースをダウンロードするためのリンクを表し、ダウンロード時のファイル名を指定する属性です。
href ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。
hreflang リンク先のリソースの言語を示します。
media リンク先のリソースが適用されるメディアを指定します。
ping ユーザがハイパーリンクをたどる際にping属性で指定したURLに対して通知/pingを送信します。
rel href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。
target この属性は、リンク先のリソースをどこに表示するかを指定します。
_self: 応答を現在のブラウズ・コンテキストに読み込みます。
_blank: 応答を新しい名前の付けられていないブラウズ・コンテキストに読み込みます。
_parent: 応答を現在の親ブラウズ・コンテキストに読み込みます。
_top: 応答をトップレベルのブラウズ・コンテキストに読み込みます。
type この属性は、リンク対象の MIME タイプの形式を表すメディアタイプを指定します。

属性の使用例を以下に示します。

example

<ul>
  <li>メールアドレス: <a href="mailto:user@example.com">user@example.com</a></li>
  <li><a href="english.html" hreflang="en">英語ページ</a></li>
  <li><a href="photo.jpg" type="image/jpeg">拡大写真を見る</a></li>
  <li><a href="print.html" media="print">印刷ページへ移動</a></li>
</ul>