PR

【HTML】aタグ(リンク)の基本を3分でわかりやすく

HTML

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

<!-- aタグの構文ルール -->

<a href="リンク先のURL">リンクのテキスト</a>

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

リンクとは?

リンクとは、1つのウェブページから別のウェブページにジャンプするための手段です。通常、テキストや画像などのハイパーテキストマークアップ言語で作成され、クリックすることで別のページに移動することができます。

リンクは、ウェブページを構成する要素の1つであり、他のウェブページへの参照を提供するだけでなく、SEO(検索エンジン最適化)の観点からも重要な役割を果たしています。

このページで学べる内容
  • <a>タグを利用してリンクを設定する方法
  • リンクの開き方の指定
    • 同じウインドウで開く方法
    • 別のウインドウで開く方法

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

スポンサーリンク

HTML:aタグの使い方

<!-- aタグの構文ルール -->

<a href="リンク先のURL">リンクのテキスト</a>

例えば、当ブログにリンクする場合は以下のように記述します。

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

実際の例→ ビズドットオンライン

aタグ 基本
イメージ:ブラウザ表示

<a>タグの使い方のポイントは以下の通りです。

  • href属性にリンク先のURLを指定
  • リンクのテキストをaタグの間に記述

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

「href」属性の読み方・意味

余談レベルの解説ですが、「href」は "エイチレフ" と読みます。

  • h・・・ Hypertext
  • ref・・ Reference

Referenceとは、「参照」という意味なので、"href" はURLを参照するハイパーテキストという意味になります。

aタグのオプション

上記でaタグの基本は以上。ここからはaタグを利用したより実践的なリンクの貼り方を解説します。

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

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

aタグ:tagert="_self"(同じウィンドウで開く)

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

具体例→ ビズドットオンライン

上記のリンクをクリックすると、今開いているウインドウ(またはタブ)でリンク先のページが開きます。

なお、target="self" はデフォルトです。そのため、target属性を指定しない場合も「target="self"」を指定した場合と同じ挙動(=同じウインドウで開く)になります。

<!-- どちらも同じウインドウで開く -->
<a href="https://it-biz.online/" target="_self">ビズドットオンライン</a>
<a href="https://it-biz.online/">ビズドットオンライン</a>

aタグ:tagert="_blank"(新しいウィンドウで開く)

リンク先のページを新しいウィンドウで開く場合は target属性に "blank" を指定します。

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

具体例→  ビズドットオンライン

別ウィンドウで開くことでユーザはリンク元のページに帰ってくることが容易となります。シーンに応じて適切に使い分けることが重要です。

aタグ:title属性(ツールチップの表示)

title属性は、ユーザーがリンク上にカーソルを合わせたときにポップアップ表示され、追加情報を表示することができます。

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

上記のコードを実際にブラウザ表示させた結果がこちら。

具体例→ ビズドットオンライン

リンク先のWebページのタイトルや、リンクがリンク元ページから開く新しいウィンドウのためのポップアップ広告であることを示す場合などに使用するのが一般的です。

aタグのまとめ
  • aタグはhref属性を使用してリンク先のURLを指定する。
  • aタグ内には表示するテキストを入力する。テキストがクリック可能なリンクとして表示される。
  • target属性を使用することでリンクが現在のウィンドウで開かれるか、新しいウィンドウで開かれるかを制御することができる。
  • title属性を使用することでリンク先についての追加情報を提供することができます。
<!-- aタグの構文ルール -->

<a href="リンク先のURL">リンクのテキスト</a>

Webエンジニアになりたい方は→完全無料のHTMLロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の1つがHTMLです。

以下のページでは、そもそもHTMLって何?何のために学習するの?という疑問に回答しつつ、HTMLを学習するためのロードマップ(全20記事)を整理しています

以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
HTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
タイトルとURLをコピーしました