HTMLのリンクタグ<aタグ>の使い方 〜初心者〜

HTMLのリンクタグ<aタグ>の使い方 〜初心者〜

<aタグ>何だか難しそうだな。と思っていましたが、とても簡単に使うことができました。
<aタグ>とは、どのようなタグなのでしょうか?

1.リンクタグ<a>タグとは?

リンクタグ<a>タグとは、Web上の文章中の一部分をクリックすることで、
クリックしたリンクのページに飛ぶようにすることができる、HTMLタグです。

2.<a>タグの基本の書き方

●書き方
<a href="リンク先のURL">〜</a>

<a>タグに挟まれた〜の部分の文字が、リンクのボタンになります。

【HTML表示】
<a href="https://note.com/decotto703″>Decotto703</a>

【ブラウザ表示】
Decotto703

noteもやっているので、noteのURLを例にして書いていこうと思います。
このブログ名も『Decotto Note』なので、ややこしいですが・・・

文章中にリンクを入れる場合は、<p>タグの中に<a>タグを入れる。

【HTML表示】
<p>こちらから<a href="https://note.com/decotto703″>decotto703</a>のnoteに
飛べます。</p>

【ブラウザ表示】

こちらからdecotto703のnoteに飛べます。

3.リンク先を別のタブで開くようにする書き方

●書き方
<a href="リンク先のURL"_target="_blank">〜</a>

<a>タグに書いたURLの後に半角のスペースを空けて、target="_blank"と入力する。

【HTML表示】
<a href="https://note.com/decotto703″_target="_blank">decotto703</a>

【ブラウザ表示】
decotto703

4.画像をリンクボタンにする書き方

●書き方
<a href="リンク先のURL">
<imgの画像のタグ>
</a>

<a>タグで画像(imgタグ)を挟むだけです。

【HTML表示】
<a href="https://note.com/decotto703″>
<img src="note-rogo.jpg">
</a>

【ブラウザ表示】


このように、とても簡単に使うことができました。
便利なタグなので、どんどん使っていこうと思います。

HTML

Posted by decotto703