HTMLのsrc属性やlinkタグなどの意味と基礎知識

自分のブログやwebサイトを制作してみたいと考えているなら、HTMLのsrc属性やlinkタグなどについて理解しておくことは必須です。

HTMLとはwebサイトを作るための言語で、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。その中でタグと呼ばれる識別の目印を使って、サイトの構成要素に意味付けを行います。

HTMLを使うと、クリックでほかのページへ移動したり、画像や動画を埋め込んだりすることができます。

この記事では、そのHTMLで使用されるタグの意味や、構成要素の属性を説明してまいります。

HTMLタグ「href」と「src」

最初にHTMLタグの記述がどのようなものかをご紹介します。

画像を表示させることを例にしてみましょう。
すると記述は以下のようになります。

<img src=”http://” alt=”” width=”” height=”” border=”0″/>

各要素に記述することは以下のとおりです。

・src　（ソース）→　画像のURL
・alt　（オルト）→　画像の説明
・width　（ワイズ）→　横幅
・height　（ハイト）→　高さ
・border　（ボーダー）→　境界線指定

仮に動物の画像を表示させるとした場合で、タグを記述してみます。

まず画像のURLが以下のものだとしましょう。

https://aqcg.jp/wp-content/uploads/2020/07/umigame.png

すると、HTMLタグの記述はこうなります。

<img src=”https://aqcg.jp/wp-content/uploads/2020/07/umigame.png” alt=”ウミガメの画像” width=”300″ height=”225″ border=”0″ />

これで下のように画像が表示されるはずです。

ホームページでの画像や文字デザインを作る、CSS（スタイルシート）の「img」に枠線の指定をしていれば、ここでの「border」の記述は必要ありません。

このようにHTMLで各要素の説明や指定をすることで、webサイトは出来あがっていきます。

「href」と「src」の意味

ではHTMLタグでよく使われる2つを解説していきます。

それは「href（エイチレフ）」と「src（ソース）」です。「src」は前述の画像表示の記述の中にも出てきました。

それぞれの言葉の意味ですが、「href」は、「hyper reference（ハイパーリファレンス）」の略で、参照、参考という意味があり、主にリンク指定の際に使用します。

そして「src」は「source（ソース）」の略で、出典、由来の意味です。主に画像を埋め込む際に使います。

使われるタグ

この「href」と「src」が使われるタグは、

・href　→　a（アンカー）、link（リンク）、base（ベース）、area（エリア）
・src　→　img（イメージ）、script（スクリプト）、iframe（インラインフレーム）、embed（エンベッド）

これらが代表的なものとして挙げられるタグです。

ちなみにbaseはリンク先URLの基準となるURLなどの指定、areaは画像内の一部でリンクを行う場合に使用されます。
imgとinframeはページ内に他の画像やページを表示する場合で、embedは動画や音声を埋め込む際に使います。

「a」「link」「script」に関しては後で詳しく説明してありますので、そこで意味や使い方を勉強していきましょう。

「href」と「src」の違いとは

「href」と「src」は一見すると役割が似ているので、混同しがちです。
では、この2つはどのような違いがあるのでしょうか。

「href」は、他のHTMLへのリンクを指定するタグなので、ページに関する情報の指定となります。
「src」は、画像などをHTMLに埋め込むファイルの情報の指定です。

つまり、指定する情報の種類が違います。
逆に記述してしまうと正しく表示されないので、間違って覚えないよう注意しましょう。

src属性

ここでは、絶対パスや相対パスの指定ができるsrc属性値について解説します。

絶対パスと相対パス

絶対パスは、URLでページの場所を指定し、ファイルの読み込み元を直接表します。

（例）
<img src=”https://〇〇.com/images/〇〇.jpg” alt=”画像”>

相対パスは、現段階のファイルの階層を基準として、ファイルの読み込み元を表します。

（例）
<img src=”/images/〇〇.jpg” alt=”画像”>

これらは、ドメインが同じだとしても、「〇〇.jpg」というファイルを指定していることになります。

相対パスでのさまざまな指定方法

（例1）
現在のURLが「https://〇〇.com/」の場合
<img src=”/images/〇〇.jpg” alt=”画像”>

（例2）
現在のURLが「https://〇〇.com/」の場合
<img src=”images/〇〇.jpg” alt=”画像”>
<img src=”./images/〇〇.jpg” alt=”画像”>

（例3）
現在のURLが「https://〇〇.com/about」の場合
<img src=”../images/〇〇.jpg” alt=”画像”>

例1と例2について

例1と例2は同様に、現在のURLが「https://〇〇.com/」の場合です。
しかし、比較してみるとURLの先端部分が少し異なります。

例1の場合は、/（スラッシュ）から始まっています。その場合、URLに指定できるのはドメインを省略した段階からになります。

例2の場合は、2つのパターンがありますが、これらは同様の意味をもちます。
「./（ドットスラッシュ）」と指定するパターンの場合は、基準にしているのが現在の段階からになっています。

例3について

例3は現在のURLが「https://〇〇.com/about」の場合です。

こういった場合は、階層を1つ前に戻す必要があるため、「../（ドットドットスラッシュ）」となっています。

src属性を使用しているタグ一覧

src属性が使われているタグは下の表から確認できます。

linkタグとaタグ

続いては、HTMLのlinkタグについて説明します。

linkタグに似ているaタグも一緒に紹介しますので、2つの違いもしっかり理解しておきましょう。

まずlinkタグですが、別々のページ同士を関連づけるためのタグです。
それぞれのページ間で、順序や階層関係がある場合はその関係を記述していきます。

HTMLはhead部分とbody部分がある

HTMLにはhead部分とbody部分があります。
head部分に記述するものは、ページの訪問者には見えない情報や設定です。
一方body部分は、訪問者に見える情報、つまりタイトルや文章などを記述します。

linkタグはhead部分に記述します。
ブラウザや検索エンジンに向けてページの関連性を伝えるタグなので、訪問者に見えない情報ということになります。

head部分には具体的になにを書く？

では具体的にhead部分にどんな情報を記述すべきでしょうか。
ブラウザや検索エンジンに向けた情報ということは先ほど述べました。
つまり、表示する文字コードや読み込むCSSファイルの指定、検索結果に出すタイトルなどを記述します。

記述例
<link rel=”関連性” href=”ファイルの場所”>

aタグとは

linkタグとは別に、aタグというものがあります。
リンクを記述する点では同じですが、用途も記述方法も違います。

linkタグはhead部分に記述すると説明しましたが、aタグはbody部分に記述をします。
aタグ内の情報は訪問者に見えるものということなのです。

aタグには具体的になにを書く？

aタグは別ページへのリンクを促す意味合いを持つタグです。

先に説明した「href」を使ってリンクを指定します。
また、文字だけでなく画像などもリンクにすることができます。

記述例
<a href=”リンク先のURL”>リンクテキスト、画像</a>

linkタグとaタグは全然ちがう

同じリンクでも、linkタグとaタグでは大きな違いがあることが理解できたでしょうか。

linkタグはページ同士の関連付けで、検索エンジンやブラウザ向けの情報なのでhead部分に記述します。
aタグはリンクを貼るためで、訪問者に見られる情報なのでbody部分に記述します。

似ているようですが、記述する内容も場所も違うことを理解しておくことが大切です。

linkタグ「rel」と「href」

linkタグで使われる属性は多岐に渡ります。
これらを全て覚えるのは容易ではありません。
まずは基本の属性を理解して使いこなせるようになりましょう。

ここでは「rel（レル）」と「href（エイチレフ）」についてご説明していきます。
href属性に関しては前述でも説明していますが、rel属性とともによく使われるので要点を覚えておくと便利です。

「rel」と「href」の意味

上のタグは外部のCSS（スタイルシート）を読み込むlinkタグです。

この中で記述されている情報は以下のような内容になります。

まず「rel」はファイルとの関係性が記されています。
そして「href」でそのファイルの場所を記述していることがわかります。

「rel」とは「relation（リレイション）」の略で「関係性・関連性」という意味があります。
つまり、hrefに記述しているファイルとの関係はどんなものなのかを示しているということです。

「canonical」とは

続いては上のlinkタグを解説していきます。
これは検索エンジンに対して、正しいURLを伝える記述になります。

「canonical（カノニカル）」は「正規の」という意味です。
例えば、同じ内容なのに違うURLのページが存在することがあります。
「/（スラッシュ）」がURLの末尾に付いているものと、そうでないものなどが一例です。

こうなると、検索エンジンは別のページと判断してしまいます。
そこでcanonicalを使うと、正しいURLを認識してくれるのです。

そのほかの属性

ここまで「rel」「href」を指定したlinkタグを説明しましたが、それ以外の属性を指定する場合の例として上のリンクを参考にしてみてください。

しかし基本は「rel」と「href」なので、この2つを押さえておけば良いでしょう。

ちなみに上のリンクにある「media（メディア）」は適応するデバイスを指定する属性、「type（タイプ）」はリンク先の形式を指定する属性です。
これ以外にも多くの種類が存在しています。

HTMLを見てみよう

ではここで、実際にHTMLはどのように記述されているのかを見てみましょう。

どんなサイトでもいいので、ページ内の適当な場所を右クリックします。
そしてメニューの中から「ページのソースを表示」を選ぶと、下のような画面が表示されます。

これがサイトを構成しているHTMLです。
ひとつのページはたくさんのHTMLで構成されていることがわかります。

いろいろな種類のサイトに行って、どのようなHTMLで構成されているかを見るだけでも勉強になるはずです。

ショートカットキーでlinkタグを検索

では今まで説明してきたlinkタグが、どのように記述されているのかをHTMLの表示画面で確認してみます。
しかし、このHTML表示画面は文字が小さく羅列されていて、linkタグが見つけにくいのではないのでしょうか。

こういうときはショートカットキーが便利です。
「Ctrl＋F」で検索ができるので、「link」と入力してみましょう。
Macの場合は、「⌘＋F」を使います。

このショートカットキーは、どの場面でも使えるので覚えておくと便利です。

検索されたlinkタグを見ると、<head>内に入っていることがわかります。
サイトと見比べながら理解を深めていくと、知識がより身に付くはずです。

「script」要素とは

続いてはscript要素について説明していきます。

script要素は　<script 属性=”属性値”>~</script>　と記述します。

ここには、クライアントサイドスクリプトのコードを埋め込みます。
クライアントサイドスクリプトとは、サイトを表示するブラウザ上のプログラムです。
ここでJavaScriptというプログラミング言語を使って、動的な表現をしていきます。

script要素内にJavaScriptをsrc属性で読み込むか、直接ソースコードを記述します。

カテゴリー	・フレージングコンテンツ ・フローコンテンツ ・メタデータコンテンツ
コンテンツモデル	・src属性が指定されていない場合、type属性の値と一致するスクリプト ・src属性が指定されている場合は空、もしくはJavaScriptにおけるコメントテキスト
使用できる文脈	・メタデータコンテンツが期待される場所 ・フレージングコンテンツが期待される場所

使用する属性

script要素内で使用できる属性をご紹介します。

・async（エイシンク）
src属性が指定されている場合のみ、scriptの実行タイミングが指定できます。
これは論理属性と呼ばれる、値の指定が必要のない属性です。
属性が導く働きに真か偽の2種類しかありません。
つまり、属性が指定されているときが真となり実行され、指定されていないときは偽となり実行されません。

・charset（キャラクター・セット）
ここでもsrc属性が指定されている場合のみ、埋め込まれたscriptの文字コードが指定できます。
これによって、文字化けなどを防ぎます。

・defer（ディファー）
この属性はasync属性と同じ効果です。
async属性が対応しない環境において有効になります。
逆にasync属性に対応している環境では、async属性とdefer属性を同時に指定すると、async属性が有効、defer属性は無効になります。

・src（ソース）
JavaScriptの外部リソースURLを、文書内に指定できます。

・type（タイプ）
埋め込まれる外部リソースの文書やファイルの形式を指定します。

タグ、属性の読み方

HTMLタグや属性には、読み方が難しいものが多いと感じている人は多いのではないでしょうか。
略されているものもあり、なかなか覚えづらいですよね。

読み方と意味を理解すると、覚えやすくなるだけでなく使い方も身に付きやすくなります。

ここでは、代表的な読みづらいタグや属性を3つ解説していきます。

「a」

「アンカー」と読みます。
「anchor」の略で、先にも説明したとおり別ページへのリンクを指定するタグです。

記述例
<a href=”リンク先URL”>サイト上の表示テキストなど</a>

「href」属性を使って、リンク先の指定ができます。

「alt」

「オルト」と読みます。
「Alternative」の略で、画像の代わりとなるテキストを指定するHTML属性です。

ネットワークの問題などでサイト上の画像が表示されないことがあります。
そのときに、どんな画像なのか説明するテキストを表示させることができるのです。

alt属性を指定しておけば、検索エンジンが画像の内容を読み取ってくれるので、画像検索結果に表示されます。
サイトの訪問者を増やすためにも、使用するべき属性です。

記述例
<img src=”画像の場所” alt=”テキスト” />

「br」

「ブレイク」と読みます。
「Break」の略で、改行の指定ができるHTMLタグです。

記述例
Aテキスト<br>Bテキスト

上の例のように記述するとbrの部分で改行する指示が送られるので、

Aテキスト
Bテキスト

という表示になります。

このタグを使うと、サイズやフォントが違っても同じように表示されるのです。

「!DOCTYPE」

「ドックタイプ」と読みます。

「Document Type Definition」の略で、文章の先頭に書く宣言文です。

「dfn」

「ディフィニション」と読みます。

「Definition」の略で、用語の意味を解説する際に使用するHTMLタグです。

「dir」

「ディレクトリ」と読みます。

「Directory」の略で、リストを表示する際に使用するHTMLタグです。

「em」

「エンファシス」と読みます。

「Emphasis」の略で、強調文字や斜体文字などを指定する際に使用するHTMLタグです。

「a href」

「アンカー　エイチレフ」と読みます。

「Hypertext REFerence」の略で、文字や画像にリンクを埋め込む際に使用します。

「i」

「イタリック」と読みます。

「italic」の略で、テキストを斜体にする際に使用するHTMLタグです。

「p」

「パラグラフ」と読みます。

「paragraph」の略で、「ピー」とも呼ばれています。
一つの段落であることを表す際に使用するHTMLタグです。

「param」

「パラメータ」と呼びます。

パラメータを指定する際に使用するHTMLタグです。

「q」

「クォート」と呼びます。

「Quote」の略で、引用文であることを表す際に使用するHTMLタグです。

「sub」

「サブスクリプト」と呼びます。

「Subscript」の略で、下付き文字を表示する際に使用するHTMLタグです。

「sup」

「スーパースクリプト」と呼びます。

「Superscript」の略で、上付き文字を表示する際に使用するHTMLタグです。

「u」

「アンダーライン」と呼びます。

「Underline」の略で、テキストに下線を引く際に使用するHTMLタグです。

「ul」

「アンオーダードリスト」と呼びます。

「unordered list」の略で、番号がないリストを作る際に使用するHTMLタグです。

「ol」

「オーダーリスト」と呼びます。

「order list」の略で、番号ありのリストを作る際に使用するHTMLタグです。

「rowspan」

「ロウスパン」と呼びます。

テーブルのセルを縦方向に結合する際に使用するHTML属性です。

「colspan」

「コルスパン」と呼びます。

テーブルのセルを横方向に結合する際に使用するHTML属性です。

まとめ

今回ご紹介した知識は、思い描いたデザインのブログやwebサイトを、自分で制作するための基礎につながります。

もちろんほかにも多くのHTMLタグがあり、高度なサイトを作るにはさらに知識が必要となります。
昨今ではCSSなどHTMLだけでは表現できないプログラミングが主流となりつつありますが、HTMLはサイト作りの基礎ですので、簡単なタグの理解から始めることが重要です。

ブログサイトによっては自動でlinkタグを出力してくれることもありますが、本格的に挑戦するなら自分でHTMLタグを駆使し、オリジナリティあふれるページを作ってみてください。