検索

キーワード


【HTML】リンクタグについて

  • 公開日:2020-09-17 20:09:19
  • 最終更新日:2020-11-17 15:01:39
【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。

ここでは、HTMLのリンクタグについて説明します。

HTMLについて勉強している方の参考になれば幸いです。


リンクタグとは

リンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(<a>~</a>タグ)のことをいいます。

このタグを使うことによって、文字列や画像にリンクを設定することができます。


<link>タグと<a>タグの違い

HTMLには<link>タグというものがあります。

タグ名から、<a>タグと同じような使い方のように思われますが、実際は異なります。

<link>タグは、CSSファイルなどの他のファイルとHTMLファイルを結びつけるために、head要素内で使用するタグです。

<head>
	<link rel="stylesheet" href="sample.css" type="text/css">
</head>


このように記述すると、記述したHTMLファイルでsample.cssを読み込みます。


リンクタグの使い方

文字列にリンクを設定する

文字列をリンクにするには、リンクを設定したい文字列を<a>~</a>タグで囲み、リンク先をhref属性の値として指定します。

<a href="https://works.forward-soft.co.jp/blog">お役立ちBlog</a>


実行結果

お役立ちBlog


上記の「お役立ちBlog」をクリックすると、お役立ちBlogのTOPページに移動します。


画像にリンクを設定する

画像をリンクにするには、リンクを設定したい画像を<a>~</a>タグで囲み、href属性の値にリンク先のアドレスを指定します。

<a href="https://works.forward-soft.co.jp/blog"><img src="001.png"></a>


実行結果

画像にリンクタグを設定した例

上の画像をクリックすると、お役立ちBlogのTOPページに移動します。


画像を表示させる方法は、以下の記事をご覧ください。

【HTML】画像を表示させるには


リンク先を別タブで開く

リンク先を別タブまたは新しいウィンドウで開くようにするには、target属性の値に「_blank」という値を指定します。

<a target="_blank" href="https://works.forward-soft.co.jp/blog">お役立ちBlog(別タブで開きます)</a>


実行結果

お役立ちBlog(別タブで開きます)


上記の「お役立ちBlog(別タブで開きます)」をクリックすると、別タブまたは新しいウィンドウでお役立ちBlogのTOPページが開きます。


相対パスを使ったリンクの指定

今までのサンプルコードでは、リンク先は絶対パスで指定していましたが、相対パスでも指定することができます。

<a href="abc/sample.html">サンプルページ</a>


ただし、相対パスで指定できるのは、自サイト内部のファイル(同じサーバ内のファイル)を指定する場合です。

リンク先が外部のサイトである場合は絶対パスを使わなければなりません。


相対パスと絶対パスについては、以下の記事をご覧ください。

【HTML/CSS】絶対パスと相対パス



【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事