aタグリンク生成ツール：URLとリンク文を安全に整える

リンク先のURLと表示テキストを入力すると、HTMLの <a> タグを生成します。単にコードを出すだけでなく、内部リンク、外部リンク、新しいタブ、リンク文、AIが出したHTMLを貼る前の確認まで整理します。

記事末尾の関連記事、本文中の補足リンク、サイトマップへの導線、外部の公式マニュアルへのリンクを作る時に使ってください。

確認日とこのツールの使い方

確認日: 2026年6月12日。HTML初心者が、記事本文や関連記事リストにリンクを追加する前に、URL、リンク文、貼る場所、外部リンクの扱いを確認するためのページです。

作成方針: このページは、HTML仕様、MDNのHTMLリファレンス、Copicodeの実サイト運用をもとに整理しています。構成整理にはAIを補助的に使うことがありますが、危険操作、秘密情報、対象範囲、関連リンクは公開前に確認しています。

このツールで整理できること

内部リンク、外部リンク、ページ内リンク、メールリンクを分ける
リンク先URLとリンク文を、貼る前に確認する
新しいタブ指定とrel属性をセットで出力する
AIが出した <a> タグをそのまま貼ってよいか確認する
「こちら」だけの曖昧なリンク文を、内容が伝わる文へ直す

リンクを貼る前の確認順

リンクは、URL、リンク文、開き方、公開後確認の順で見ると、リンク切れや意図しない外部リンクを減らせます。

aタグを作る前に、リンク種別、URL、リンク文、新しいタブ、公開後確認を分ける流れ

先に結論

<a> タグは、読者を別の場所へ移動させるためのリンクです。フォーム送信、開閉、コピーなど、ページ内で何かを実行するボタンの代わりに使うものではありません。

AIが href="#" や javascript:void(0) のリンクを出した時は、本当にリンクなのか、ボタンにすべき操作なのかを先に分けてください。

生成前に分けること

確認すること	見る理由	例
リンクの種類	URLの書き方と開き方が変わるため	内部リンク / 外部リンク / ページ内リンク / メールリンク
リンク先URL	公開後のリンク切れを防ぐため	`/site-map.php`、`https://example.com/`
リンク文	読者がクリック前に行き先を理解するため	「こちら」ではなく「HTMLサイトマップを見る」
新しいタブ	外部サイトへ移動する時に読者が迷わないようにするため	公式マニュアル、外部サービス、PDF
貼る場所	本文、関連記事、ボタン風リンクで意味が変わるため	記事末尾の関連記事、本文中の補足リンク

aタグを生成する

URLとリンク文を入力して生成してください。入力した &、"、< などは、コピー用コードの中でHTMLとして壊れにくい形へ変換します。

リンク先のURL

表示テキスト

新しいタブで開き、rel="noopener noreferrer" を同時に指定する

生成前の簡易チェック

URLとリンク文を入力して生成すると、ここに確認メモが表示されます。

生成されたaタグ

<a href="/site-map.php">症状から探すHTMLサイトマップを見る</a>

内部リンクと外部リンクで分ける

種類	URL例	確認すること
同じサイト内のリンク	`/site-map.php`	公開URLで404にならないか、リンク文が行き先を説明しているか。
外部サイトへのリンク	`https://example.com/`	新しいタブが必要か、外部サイトだと読者に伝わるか。
ページ内リンク	`#section-name`	同じページ内に対応する `id` があるか。
メールリンク	`mailto:info@example.com`	公開してよいメールアドレスか、迷惑メール対策が必要か。

AIが出したaタグを貼る前に確認する

ChatGPTやCodexがリンクコードを出した場合でも、リンク先URL、リンク文、貼る場所は人間側で確認します。特に本番サイトへ貼る前は、リンク切れ、意図しない外部リンク、管理画面URLの混入がないかを見ます。

AIが出したaタグを貼る前に確認したいです。

貼ろうとしている場所:
例: 記事本文 / 関連記事 / ナビ / ボタン風リンク

生成されたaタグ:

リンク先URL:

リンク文:

内部リンクか外部リンクか:

新しいタブで開く必要:

確認済み:
- 公開URLで404にならない:
- 管理画面URLや非公開URLではない:
- リンク文が「こちら」だけではない:
- target="_blank" の時は rel も確認した:
- ボタン操作なら aタグではなく button を検討した:

秘密情報、管理画面URL、FTP情報、APIキー、個人情報は伏せています。
貼ってよいか、直すべき点があれば指摘してください。

公開前後の確認

生成コードを貼る前に、リンク先URLをブラウザで開く
内部リンクなら、URLが / から始まるか、相対パスで迷っていないかを見る
外部リンクなら、新しいタブで開く必要と rel 属性を確認する
公開後に対象ページを開き、リンクをクリックして404や違うページに飛ばないか見る
Search Consoleや記事改善で使う内部リンクなら、リンク文が行き先を説明しているか見直す

公式情報で確認するところ

確認したいこと	参照先	この記事での使い方
`<a>` の基本属性	HTML Standard: The a element	`href`、`target`、`rel` の役割を確認します。
アンカー要素の使い方	MDN: The Anchor element	新しいタブ、リンクの意味、ボタン代用を避ける考え方を確認します。
`rel="noopener"`	MDN: rel="noopener"	外部リンクを新しいタブで開く時の安全側の指定を確認します。