Webページ同士をつなぐために欠かせないのが リンクタグ（aタグ） です。
ブログ記事・ボタン・画像リンクなど、ほぼすべてのサイトで使われる重要タグですが、初心者がまず覚えるべきポイントは多くありません。
この記事では、aタグの基本的な書き方、hrefの意味、target属性の役割、注意点 を
初心者向けにわかりやすく解説します。
aタグとは？
aタグ（anchorタグ）とは、別のページへ移動するためのリンクを作るHTMLタグです。
最も基本的な形は次の通りです。
<a href="https://example.com">リンクテキスト</a>
- a：リンクの開始
- href：飛び先のURL
- リンクテキスト：クリック部分
これだけでリンクになります。
基本の書き方（href属性）
基本の形式
<a href="URL">テキスト</a>
例
<a href="https://ken-wplog.com/">KEN-BLOGへ移動する</a>
リンクで一番重要なのは href属性 です。
ここに正しいURLが入っていないとリンクになりません。
外部リンク・内部リンクの書き方
外部リンク（別サイトに飛ばす）
<a href="https://google.com">Googleへ</a>
内部リンク（自サイト内の記事へ）
<a href="/html-course/">HTML講座トップへ</a>
内部リンクは 相対パス（/slug/） が基本。
WordPressでは絶対パスでも動きますが、相対パスの方がサイト移動時に壊れにくいです。
target属性の役割と使い分け
target属性は “リンクをどのウィンドウで開くか” を指定するものです。
target=”_self”（同じタブで開く）【初期値】
<a href="page.html" target="_self">同じタブで開く</a>
✔ デフォルト（指定しない場合と同じ）
✔ 内部リンクは基本 _self 推奨
→ 読者がサイト内をスムーズに回れるため
target=”_blank”（新しいタブで開く）
<a href="https://google.com" target="_blank">Googleへ</a>
✔ 外部リンクによく使う
✔ ユーザーが元のページに戻りやすい
✔ アフィリエイトリンクにも使われる
⚠ ただし _blank は セキュリティ上の注意点がある ため、
次の rel 属性 の設定が必須です。
rel=”noopener noreferrer” を必ずセットで使う
target=”_blank” を使うと、
外部サイトがあなたのページを 操作できてしまう 可能性があります。
そのため、必ず次のように書きます。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイトを開く
</a>
✔ セキュリティ対策（noopener）
✔ 参照情報を渡さない（noreferrer）
✔ SEO上も問題なし
WordPress でも自動的に付く場合がありますが、手動で書くのが確実です。
ボタン風のリンクの作り方（実用）
<a href="/html-course/" class="btn">HTML講座を見る</a>
CSS側でこうするとボタンになります：
.btn {
background: #1E88E5;
color: #fff;
padding: 10px 20px;
display: inline-block;
border-radius: 6px;
text-decoration: none;
}
.btn:hover {
background: #1565C0;
}
✔ CTAボタン（記事誘導）にも使える
✔ テキストリンクよりクリック率が高い
よくある間違い
hrefを入れ忘れる
<a>リンク</a>
→ クリックしても反応しない
# だけのリンク
<a href="#">テスト</a>
→ ページ上部へスクロールしてしまう
（※ テスト時にやりがち）
target=”_blank” の relなし
→ セキュリティNG
URLの前後にスペース
<a href=" https://〜 "> ←NG
→ WordPressではエラーになることも
まとめ
- aタグはページ間をつなぐ基本的なリンクタグ
- hrefにURLを入れるのが最重要
- 内部＝同じタブ
_self - 外部＝新しいタブ
_blank _blankには rel=”noopener noreferrer” が必須- ボタンリンクにも応用できる
リンクの理解は、HTML学習の中でも特に初心者が成長を感じやすい部分です。
著者からのひと言
リンクはHTMLの中でも使用頻度が非常に高く、覚えると一気にサイト制作が楽しくなります。
特に target や rel の組み合わせは最初は難しく感じるかもしれませんが、何度も書いているうちに自然と身につきます。焦らず、ひとつひとつ理解していきましょう。
次回の記事は「strong・emタグの違いと正しい使い方」についてです。
