HTML要素辞書 by Sentaro

<a>

アンカー（Anchor）要素。ハイパーリンクを作成するための基本的なHTML要素です。

info

概要

<a> 要素（アンカー要素）は、href 属性を用いることで、別のウェブページ、同じページ内の別の場所、ファイル、メールアドレス、電話番号などへのハイパーリンクを作成します。
Webの根幹をなす最も重要な要素の一つです。

play_circle

デモ (静的表示)

HTML (Source)

<a href="https://search3958.github.io" target="_blank"> 私について </a> <br><br> <a href="#" class="button-link"> ボタンスタイルのリンク </a>

Preview (Result)

私について

ボタンスタイルのリンク

list

属性 (Attributes)

属性名	説明
href	リンク先のURL。絶対に指定すべき最も重要な属性です。URL、ID（#id）、mailto:、tel:などが指定可能です。
target	リンクをどこで開くかを指定します。 `_self`: 現在のタブ（デフォルト） `_blank`: 新しいタブまたはウィンドウ
download	リンク先のURLへ移動するのではなく、ファイルをダウンロードするようにブラウザに指示します。値としてファイル名を指定することも可能です。
rel	リンク先ドキュメントとの関係性を示します。例: `noopener`, `noreferrer`, `nofollow`
hreflang	リンク先リソースの言語コード（例: `ja`, `en`）を指定します。
type	リンク先リソースのMIMEタイプ（例: `application/pdf`）を示します。

code

実用例

1. 別タブで開くリンク（セキュリティ対策付き）

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

2. メール送信と電話発信

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

<!-- 電話 -->
<a href="tel:+819000000000">090-0000-0000</a>

3. ページ内リンク（アンカー）

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

lightbulb

知っておくべき重要事項

security

セキュリティに関する注意 (target="_blank")
target="_blank" を使用して新しいタブでページを開く場合、セキュリティとパフォーマンスのリスクがあります。必ず rel="noopener" （または noreferrer）を付与して、リンク先のページが元のページを操作できないようにしてください。

accessibility_new

アクセシビリティ
「ここをクリック」のような曖昧なリンクテキストは避けましょう。「製品情報を見る」「お問い合わせページへ」のように、どこへ行くのかが具体的にわかるテキストを設定することが推奨されます。

私について利用規約プライバシーポリシー