HTMLでのリンクの貼り方 | 株式会社ウィコネット

ホーム
BLOG
html
リンクの貼り方

html
2018.11.16

リンクの貼り方

はじめに

リンクを貼って見たいのですが、どうすればいいですか？

リンクを貼るためには、aタグといわれるものを使用するとリンクを設定することができますよ

aタグを使えば他のページにとばすことができるようになるんですね。

他には、aタグを使って、電話番号をクリックすると電話がかかるようにもできるようになりますよ。

あ　それよく見ますね。電話番号押すとそのお店に電話がかかるようになってすごい便利です。

そうですね。他にもメールアドレスを押すとメールが開いたりするときにも使えますよ

なるほど・・ただ他のページに飛ばすだけじゃないんですね。

そうですね。では簡単に説明していきましょうか。

リンクを貼ってみよう

リンクを設定するためには、aタグといわれるタグを指定します。a(anchor)の略称で、指定した場所と場所とつなぎ止める役割を持っています。URLを指定する際には、href属性を使用します。

基本的な使い方は次のような形になります。(※aタグの部分だけ抜粋）

<a href="指定先のURL">リンクの文字　</a>

また、別タブで開いてページ遷移させたいときは次のようにtarget=”_blank”を指定しましょう。target属性はリンク先を開くときにどのように開くかを指定するときに使用します。

<a href="指定先のURL" target="_blank">リンクの文字　</a>

電話番号、メールなどを指定したい場合は次のように設定します。

<a href="tel:電話番号(ハイフンを抜いた状態で数字をそのまま書いてください）" >リンクの文字　</a>
<a href="mailto:メールアドレス(送信元）" >リンクの文字　</a>

サンプルコード

<html>
 <!DOCTYPE head>
  <meta charset="UTF-8">
  <title>htmlのリンクを貼ります。</title>
 </head>
 <body>
  <a href="https://weconet.co.jp">weconetのトップへ</a>
  <a href="https://weconet.co.jp" target="_blank">weconetのトップへ（別タブで開きます）</a>
  <a href="tel:012345678" >012-234-5678　</a>
  <a href="mailto:info@weconet.co.jp" >info@weconet.co.jp</a>
 </body>
</html>