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

画像:HTMLタグリファレンス

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

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

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

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 フレーム分割を解除してウィンドウ全体に表示。

rel属性

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

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

hreflang属性

リンク先文書の記述言語を表します。例えば日本語のページから英語のページにリンクをする場合など、リンク先の言語を指定します。

リンク種別 説明
hreflang ja、en、zh等

type属性

リンク先 URL のメディアタイプの形式を表します。

リンク種別 説明
type text/html、image/png、video/mp4等。