SYNCER

SYNCER

<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:に続けて宛先のメールアドレスを指定して下さい。

HTML

<!-- メールソフトを立ち上げるリンク -->
<a href="mailto:info@syncer.jp">メールをする</a>

デモを開く

電話番号

モバイルのブラウザでクリックすると電話をかけるリンクを作れます。tel:に続けて電話番号を指定して下さい。

HTML

<!-- 電話をかけるリンク -->
<a href="tel:010-1234-5678">電話をかける</a>

デモを開く

リンクの開き方

リンクの開き方はtarget属性で指定できます。

同じウィンドウで開く

同じウィンドウで開くには、target属性を省略するか、値に_selfを指定します。

HTML

<!-- デフォルト -->
<a href="./page.html">リンク</a>

<!-- 明示的に指定する場合 -->
<a href="./page.html" target="_self">リンク</a>

デモを開く

新しいウィンドウで開く

新しいウィンドウで開くには、target属性に_blankを指定します。

HTML

<!-- 新しくウィンドウを開く -->
<a href="./page.html" target="_blank">リンク</a>

デモを開く

ダウンロード

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>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>