【HTML】aタグの使い方と外部リンクでの注意点

チャッピー

どこかで見た事ある人がいた様な…

こばゆた

普段何気なく使用していますが意外と奥が深いのがリンクです

きなこ

文中にあるリンクであったり、バナーであったりWeb上にはリンクがたくさんあるよね

こばゆた

またただのリンクだけではなく、工夫しだいでボタンなども作ることが出来ます。

こばゆた

今回はそんな便利なリンクの基本を説明していこうと思います。

1.aタグ

1-1.aタグとは？

<a>タグは”anchor(アンカー)”の略でテキストを<a></a>で囲い、”href属性=値”と書く事でリンクを作ることができます。

<a href="https://example.com">テキスト</a>

hrefの中はページ内のリンク、外部リンク、メーラーなど用途に応じて変えます。

例：

文中に挿入する場合は以下のように書きます。

<p>わからないことがあれば<a href="https://www.google.com/">google先生</a>に聞こう！</p>

こばゆた

http://やhttps://を書き忘れるとページを移動できないので注意。また” “で囲うこともたまに忘れてしまうことがあるので注意しましょう！！

初期値にはテキストに色とアンダーラインが引かれていますが。後から消したり色を変えたりもできます。これはCSSというもので操作します。

詳しくはこちらの記事に書いてありますのでよろしければどうぞ。

【初心者向け】色に関するプロパティと値 rgbaとは？カラーコードとは？【CSS】

色を変える時に使うcolorプロパティとその値の指定方法3種類を解説しております。

▶ 記事を読む 2025.06.13

【text-align】テキストを中央などに自由に配置する【CSS】

文章を好きなところに配置するには”text-align”プロパティというものを使うととても簡単に配置できます。とても簡単でよく使うのでぜひマスターしましょう！

▶ 記事を読む 2025.06.13

1-2.href=”#”

これはaタグを使う事は決まっているが具体的なリンク先が決まっていない時にとりあえず入れておこう的なものになります。

こばゆた

デザインの時によく使います

<a href="#">リンク</a>

こばゆた

クリックするとページトップに遷移します

1-3.画像をリンクにする場合

 バナーのように画像をクリックするとサイトを移動するようなものを作るにはimgタグをaタグで囲えばおkです。

<a href="https://www.youtube.com/">
  <img src="youtube.png" alt="YouTubeへのリンク">
</a>

チャッピー

画像をクリックしたら別サイトに行けた！

2.リンクを別タブで開く

2-1.リンクを別タブで開く方法

通常、リンクをクリックすると現在のタブで遷移しますが、リンクを別のタブで開きたい場合はtarget属性を使い値を_balnkとすることで別タブでリンク先を開く事ができます。

<a href="https://www.youtube.com/" target=”_blank”>YouTubeへ</a>

2-2.リンクを別タブで開く際の注意点

リンクを別タブで開く方法を学びましたが、リンクをどう開くかは「訪問者に決めさせる」というインターネット倫理の基本原則があるので無暗に多用しない方が良いとされています。

きなこ

クリックする度にタブが開いていくと鬱陶しいってのもあるもんね

ですのでセキュリティの問題などから target=”_blank”を使う際にはrel=”noopener”を加えて書くのがベターとされています。

<a href="https://www.youtube.com/" target=”_blank” rel="noopener">YouTubeへ</a>

その辺りはこちらのブログさんで詳しく書かれているので一度ご覧ください。

「別タブで開く」リンク()は脆弱性あり？【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ

外部向けリンクを別タブで開くためにHTMLでtarget = _blank属性を指定するのは実はヤバい? このaタグの使い方には、脆弱性やセキュリティ、パフォーマンスの点で問題があるとグーグルのエンジニアが指摘しています。他にも、SEOコン...

webtan.impress.co.jp

3.まとめ

<a href="#">リンク</a> 

<p>リンクは<a href="#">コチラ！！</a></p> 

<a href="#">
　　<img src="○○.png" alt="youtubeの画像">
</a>

<a href="#"　target=”_blank” rel="noopener">詳細はコチラへ</a>　

HTML/CSSをもっと学びたい方はこちらもオススメです！