aタグの使い方とルール - アンカー要素：HTML5リファレンス

aタグとはanchor(アンカー：錨)の略で、ハイパーリンクを意味します。一般的には略して「リンク」と呼ばれます。

このリンクにより、同じサイト内の別ページへのリンクや、別のウェブサイトへ移動する事が出来ます。勿論リンク先の指定はウェブサイトだけでなく、ファイルや画像に設定する事も出来ます。

この記事ではaタグで別タブを開くなど、aタグの使い方とルールを紹介します。

この記事の目次

1 aタグで指定出来る属性

aタグで指定出来る属性

aタグには沢山の属性がありますが、よく使う物を紹介しています。

href

ハイパーリンクが指す先のURL です。リンクは HTTPベースのURLだけではありません。ブラウザーが対応するあらゆるプロトコルを使用することが出来ます。

■色々なリンクの説明
<body>
<section>
　<a href="#sample">フラグメントへのリンク指定【#名前】</a>
　<a href="https://example.com">絶対パスでリンク指定</a>
  <a href="../index.htm">相対パスでリンク指定</a>
　<a href="tel:000-0000-0000">電話番号として認識される</a>
　<a href="mailto:○○○@gmail.com">メールアドレスとして認識される</a>
</section>
<section>
　<p id="sample">フラグメントのリンク着地場所</p>
</section>
</body>

例えば、ページ内の特定の場所へ移動するリンクを張ったり、スマホでは電話番号を打たなくてもクリックすれば電話をかける事が出来ます。

target属性

リンクをクリックした際、リンク先をどの様に表示させるのかの設定です。

属性	説明	値	説明
target	リンク先ページの表示方法。	_blank	新規のウィンドウに表示。
		_self	現在のフレーム（ウィンドウ）に表示。
		_parent	親フレームに表示。
		_top	フレーム分割を解除してウィンドウ全体に表示。

同一ページ内のリンクを「ページ内リンク」、他のサイトへのリンクを「外部リンク」と言ったりします。

今見ているページから移動せずに新しいページを表示させたり、新たに別タブを開いてリンク先を表示させる等の方法があります。

2024年4月13日

rel属性

aタグでよく使うrel属性をピックアップしました。
rel属性は現在の文書とハイパーリンク先との関係性を指定するのに使用します。

リンク種別	説明
nofollow	そのリンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合。
sponsored	リンク先が広告や有料リンクの場合。
ugc	コメントやフォーラム投稿など、ユーザー作成コンテンツ（UGC）のリンク。
noopener	これは信頼できないリンクを開く際に指定する。
noreferrer	別のページへ移動する際にリンク元ページのアドレスなどの値を送信しない。
next	現在のページが次のリソースへ移動するリンクであることを示す。
prev	現在のページが前のリソースへ移動するリンクであることを示す。