<a要素> - ハイパーリンク
公開日:
a要素はハイパーリンクを表す要素です。リンクを設置できます。ユーザーはリンクをクリックすると、そのページに移動できたり、そのファイルをダウンロードできたりします。
概要
- 名前
- a (Anchor)
- カテゴリー
- Flow content
- Phrasing content
- Interactive content: href属性がある場合のみ。
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Transparent content。ただし、Interactive content、または、別のa要素の祖先になってはいけない。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLAnchorElement
- デフォルトのスタイル
a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-a-element
属性
href
ハイパーリンクのURL。
target
リンクを開く時の挙動。ブラウジングコンテキスト(ブラウザのウィンドウ)の名前、またはキーワードで指定する。
- _blank
- 新しいウィンドウで開く。
- _parent
- 1つ親のブラウジングコンテキストで開く。親がない場合は
_self
と同じ。 - _self
- 同じブラウジングコンテキストで開く。初期値。
- _top
- 最上位の祖先のブラウジングコンテキストで開く。親がない場合は
_self
と同じ。
download
この属性を付けると、リンク先に移動するのではなく、リンク先のリソースをローカルにダウンロードするようにユーザーエージェントに促します。値は省略できますが、指定した場合は、その値がダウンロードするファイル名となります。
ping
a要素をクリックした時に、Pingを送信するURL。
rel
ドキュメントと、リンク先のリソースとの関係をキーワードで指定する。半角スペース(
)で区切って複数指定可。仕様書はLink typesを参考。仕様書以外でも広く使われているキーワードはmicroformats.orgを参照。
hreflang
リンク先のリソースの言語。
type
リンク先のリソースのMIMEタイプ。
referrerpolicy
リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。
- no-referrer
- リファラーを送信しない。
- no-referrer-when-downgrade
- https接続以外ではリファラーを送信しない。
- origin
- スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
- origin-when-cross-origin
- 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
- unsafe-url
- https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
ハイパーリンクの種類
href属性の指定方法は、絶対パス、相対パス、サーバー相対パスなど、多岐に渡ります。用途にあった形式を選択しましょう。
絶対パス
URLを指定します。
HTML
<!-- URLにアクセス -->
<a href="https://syncer.jp/">リンク</a>
相対パス
現在の位置からの、相対的な位置を指定します。
HTML
<!-- 同じディレクトリのファイルにアクセス -->
<a href="./page.html">リンク</a>
サーバー相対パス
そのドメインの最上位ディレクトリからの相対的な位置を指定します。当サイトならhttps://syncer.jp/
です。
HTML
<!-- 最上位ディレクトリからの相対パスにアクセス -->
<a href="/directory/page.html">リンク</a>
<!-- 上記は、この絶対パスを指定したのと同じこと -->
<a href="https://syncer.jp/directory/page.html">リンク</a>
同じスキーマで接続
スキーマを省略すると、現在のスキーマがhttpだったらhttp、httpsだったらhttpsで繋がります。
HTML
<!-- 同じスキーマでURLにアクセス -->
<a href="//syncer.jp/">リンク</a>
ページ内リンク
ページ内リンクは、ハッシュ(#
)と移動先のid名を指定します。
HTML
<!-- ページ内の指定したidの位置にリンク -->
<a href="#section-1">ページ内の1章に移動</a>
<!-- 上記リンクの移動先 -->
<h2 id="section-1">1章</h2>
メールアドレス
クリックするとメールアドレスを開くリンクを作れます。mailto:
に続けて宛先のメールアドレスを指定して下さい。
電話番号
モバイルのブラウザでクリックすると電話をかけるリンクを作れます。tel:
に続けて電話番号を指定して下さい。
リンクの開き方
リンクの開き方はtarget属性で指定できます。
同じウィンドウで開く
同じウィンドウで開くには、target属性を省略するか、値に_self
を指定します。
HTML
<!-- デフォルト -->
<a href="./page.html">リンク</a>
<!-- 明示的に指定する場合 -->
<a href="./page.html" target="_self">リンク</a>
新しいウィンドウで開く
新しいウィンドウで開くには、target属性に_blank
を指定します。
ダウンロード
download属性を付けると、リンク先に移動するのではなく、リンク先のリソースファイルをダウンロードするようになります。ファイル名を元のファイルと別にしたい場合は、値で指定して下さい。
HTML
<!-- download属性を指定: image.pngで保存される -->
<a href="./image.png" download>ダウンロード</a>
<!-- download属性にファイル名を指定: hoge.pngで保存される -->
<a href="./image.png" download="hoge.png">ダウンロード</a>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<a要素> - ハイパーリンク</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/a/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>a要素はハイパーリンクをマークアップする要素です。</p>
<p><a href="https://syncer.jp/" target="_blank">SYNCERへのリンク</a></p>
</body>
</html>