【HTML】３分で解説―リンクの貼り方・aタグ

HTML

2020.01.20

HTMLの初心者向けにリンクの貼り方・aタグの利用方 について解説します。

HTMLでは、aタグを利用するだけで指定したURLへのリンクを貼ることができます。画像にURLを埋め込んだり、別ウィンドウでURLを開く設定にしたり様々なオプションをHTMLで指定することもできます。

本ページで学べる内容

HTMLを学習したての人や、Web担当者の方であれば絶対に知っておきたい内容をまとめています。

HTML：リンクの貼り方

<a href= "https://~~" >テキスト</a>

リンクの設定は、次の２ステップで簡単に行えます。

タグの囲み方についてはHTMLの基本構文ルールにしたがって記述すればOK。aタグの属性「href」※に対象のURLを書き込めばリンクの設定が完了します。

※タグの属性については下記の記事で詳しく解説しております。

余談レベルの解説ですが、通常「href」は「エイチレフ」と読みます。見慣れない文字列のため記憶から抜けそう（「あれ・・？なんだっけ？」）になってしまいますが、「href」は以下2つの単語から成り立っています。

Referenceとは、「参照」という意味なので、「href」は「URLを参照するハイパーテキスト」という意味になります。これで、なんとなく意味が分かるので忘れることがなくなってきます。（実際、あれ何だっけ？で調べればすぐ見つかるとは思いますが・・・。）

話を戻して、よりaタグについてのイメージを深めるため、サンプルコードとして実際に本ブログのトップページへのリンクを貼るHTMLを書いてみます。

<a href="https://it-biz.online/">ビズドットオンライン</a>

このコードをブラウザで表示してみると・・・

こうなります。実際にこちらのリンク「ビズドットオンライン」で試していただければわかりますが、本ブログのトップページに飛ぶようになっています。

さて、たったこれだけでHTMLでリンクを設定する方法は終わりです。ただし、より実践的にリンクを貼れるようになるためには、以下の内容についてもマスターしておくと尚Goodです。

合わせて覚えておきたいaタグの実践的な使い方

ここからは、aタグの使い方「応用編」の解説に移ります。

同じリンクでも、同じウィンドウで開いたり、別のウィンドウで開いたり指定することが可能です。

この章では、リンクの開き方を指定する方法について解説します。

まず、先ほど解説した通りの基本形で構文を書いてみます。

<a href="https://it-biz.online/">ビズドットオンライン</a>

上記コードを書いてみた結果　⇒　ビズドットオンライン

特に何も指定しない場合は同じウィンドウで開きます。リンクを貼る元のページに戻ってくることを前提としない場合は同じウィンドウで開くようにしておきます。

別のウィンドウで開きたい場合はTarget属性にブランクを指定します。

<a href="https://it-biz.online/" target="blank">ビズドットオンライン</a>

上記コードをブラウザで表示した結果　⇒　ビズドットオンライン

別のウィンドウで開くようになっていることが分かるかと思います。別ウィンドウで開くことで、ユーザは元のページに戻ってくることが容易になりますが、あまりにも使いすぎると、ウィンドウがどんどん多くなってしまうので多用はNGです。

title="ツールチップ名"

title属性を使うと、リンクテキストにマウスをホバーしたタイミング（マウスを重ねたタイミング）にツールチップを表示することができます。

<a href="https://it-biz.online/" title="ビズドットオンラインのトップページだよ">ビズドットオンライン</a>

こちらが上記コードの実物です。ツールチップって何？という方も含めて合わせてご覧ください。

HTML/CSSを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。