💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
HTML aタグでリンクを貼る方法｜hrefの書き方と例
📌
結論
<a href="URL">テキスト</a>
📝 実際のコードはこちら
<a href="https://google.com">Google</a>aタグの構造
<a>| パーツ | 役割 | 例 |
|---|---|---|
| 開始タグ | タグの始まり |
href="URL" | 飛び先のアドレス | 属性と呼ぶ |
| テキスト | クリックされる文字 | リンクテキスト |
href属性のポイント
href はhypertext reference（ハイパーテキスト参照）の略です。ここにURLを指定します。
📝 実際のコードはこちら
<!-- 外部サイトへのリンク -->
<a href="https://google.com">Google</a>
<!-- 同じサイト内のリンク -->
<a href="/about">自己紹介</a>https:// から始めるのがルール。同じサイト内なら / から始めればOKです。
セキュリティの補足
外部サイトへのリンクでは、新しいタブで開くことが多いです。その場合はtarget="_blank" と rel="noopener noreferrer" を付けます。今の段階では覚えなくてOKですが、後の記事で詳しく解説します。
まとめ
・リンクは<a href="URL">テキスト</a>https:// から、サイト内は / から
・href を忘れるとリンクにならない
演習で試してみよう
Googleへのリンクを作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
Googleというテキストで、https://google.com へのリンクを作ってください。
詰まったらヒント
aタグのhref属性にURLを指定します。