• 基本的な使い方
• target属性でリンクの開き方を制御
• rel属性でリンクの関係性を指定
• download属性でファイルをダウンロード
• メール・電話リンク
• ページ内リンク
• JavaScriptを実行するリンク
• 検索エンジンにリンクをたどらせない
• ボタン風のリンク

基本的な使い方

<a>タグは、ハイパーリンクを作成するためのHTML要素です。最も基本的な使い方は、他のページに遷移するリンクを作ることです。

<a href="https://example.com">Exampleサイト</a>

上記のコードでは、「Exampleサイト」というテキストをクリックすると、https://example.com に移動します。

target属性でリンクの開き方を制御

target属性を指定することで、リンクの開き方を変更できます。

• _self（デフォルト）: 現在のタブで開く
• _blank: 新しいタブで開く
• _parent: 親フレームで開く
• _top: 最上位のフレームで開く

<a href="https://example.com" target="_blank">新しいタブで開く</a>

rel属性でリンクの関係性を指定

rel属性は、リンク先との関係をブラウザや検索エンジンに伝えます。

• nofollow: 検索エンジンがリンクをたどらないようにする
• noopener: セキュリティ対策（target="_blank"のとき推奨）
• noreferrer: リファラ情報を送らない
• external: 外部サイトへのリンク

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイトへ</a>

download属性でファイルをダウンロード

download属性を使うと、リンクをクリックしたときにファイルをダウンロードさせることができます。

<a href="document.pdf" download>PDFをダウンロード</a>

メール・電話リンク

mailto: や tel: を使うと、メール送信や電話発信が可能になります。

• メール送信: mailto:
• 電話発信: tel:

<a href="mailto:example@example.com">メールを送る</a>

<a href="tel:+819012345678">電話をかける</a>

ページ内リンク

ページ内の特定の要素へジャンプするリンクを作成できます。

<a href="#section2">セクション2へ</a>
...
<h2 id="section2">セクション2</h2>

JavaScriptを実行するリンク

href="javascript:void(0);" を使うと、リンクをクリックしてもページ遷移せずにJavaScriptを実行できます。

<a href="javascript:void(0);" onclick="alert('クリックされました');">アラートを表示</a>

検索エンジンにリンクをたどらせない

SEO対策として、rel="nofollow" を付けると検索エンジンがリンクを評価しなくなります。

<a href="https://example.com" rel="nofollow">検索エンジンに影響を与えないリンク</a>

ボタン風のリンク

リンクをボタンのように見せるには、CSSを適用しますが、基本のHTMLは次のようになります。

<a href="https://example.com" style="display:inline-block; padding:10px; background:#007bff; color:#fff; text-decoration:none; border-radius:5px;">ボタン風リンク</a>