HTML初心者必見!linkタグとaタグの違いについてわかりやすく解説

この記事ではHTMLのlinkタグを使う方法について解説します!linkタグは基本的にはheadタグの中で、CSSなどの外部ファイルを読み込むときに使われています。

ただ、aタグとはどう違うのか、また外部ファイルを読み込む以外の使い道はあるのかなど、よく分からないという方もいるかもしれません。この記事では、

linkタグの使い方を知りたい。
aタグとの違いを知りたい。

といった方に向けて、

  • aタグとの違い
  • linkタグの基本的な使い方

について解説していきます。易しいサンプルコードも掲載していくのでぜひご覧ください!

linkタグとは

まずはlinkタグがどのようなものなのかを知っておきましょう。linkタグはそのページと関係する他のページを関係づけるためのタグになります。といっても、このタグがWebサイトの見栄えに直接関係することはありません。

なので、基本的にはheadタグの中で書かれます。このlinkタグはよく、外部ファイルになっているCSSやJavaScriptを読み込んだり、faviconと呼ばれるWebサイトのアイコンを読み込むために使われています。

aタグとは

リンクという単語から、aタグを連想した方もいるかもしれません。aタグはHTMLの文章の一部をハイパーリンクにするタグになります。

一般的にリンクといえばハイパーリンクを指すので、文章中でリンクを作る場合はこのタグを使う必要があります。

linkタグとaタグの違い

ここでlinkタグとaタグの違いについてを一旦整理しておきましょう。linkタグは先程解説したように、Webサイトの見栄えに直接関係することはありません。ただaタグはインライン要素として、文章の中でハイパーリンクを作ります。

基本的なハイパーリンクを作りたい場合はaタグを使い、HTMLから他のファイルを読み込みたい場合はlinkタグを使いましょう。

linkタグの使い方

それでは実際にlinkタグの使い方を見ていきましょう。ここでは代表的な、

  • CSSやJavaScriptを読み込む方法
  • faviconを設定する方法

について解説していきます。

CSSやJavaScriptを読み込む方法

それではCSSやJavaScriptなどを読み込んでみましょう。これらのファイルはHTMLとは切り離して、.cssファイルや.jsファイルとして外部に保存している場合があります。

そしてそのファイルは先程のlinkタグを使って読み込む必要があります。こちらのコードを見てみましょう。

HTML

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
    <div class="text">text</div>
</html>

CSS

.text {
    color: blue;
    }

実行結果

このように、style.cssに書き込まれたCSSがlinkタグによって、実際に動いていることがわかるかと思います。rel属性ではこのHTMLとCSSとの関係(relation)を、href属性には読み込みたいファイルのパス(場所)を指定しています。

faviconを設定する方法

次はfaviconを設定してみましょう。faviconはWebサイトを訪問したときやブックマークに登録したときに見られる小さなアイコンのことです。

faviconの例

これを読み込むときも、linkタグを使います。こちらをご覧ください。

<link rel="icon" href="favicon.ico">

この一文を追加することでfavicon.icoというアイコンをfaviconに設定することができます。ただ、.icoという画像ファイルを使う機会は少ないと思います。そこで、

<link rel="icon" type="image/png" href="favicon.png">

のように、type属性を設定することで.pngや.gifなどの画像ファイルもfaviconとして設定することができます。

まとめ

この記事ではlinkタグの基本的な解説についてをしてきました。linkタグの使い方については分かっていただけたでしょうか?

linkタグは本文中では使うことはありませんが、faviconを設定したり、CSSやJavaScriptを外部ファイルとして使う場合は必須になるタグです。ぜひこの記事でlinkタグの使い方について学習してみてください。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍テック編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー