【HTML Living Standard】url属性値の使い方
url属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
urlプロパティは、Web上のリソースの場所を示す統一リソース識別子（URI）または統一リソースロケータ（URL）の形式の値を保持するプロパティです。HTML Living Standardにおいて、このurlという名前が示す値の形式は、多くのHTML要素の属性に設定され、ブラウザがWeb上の外部リソースを特定し、アクセスするために利用されます。
例えば、<a>（アンカー）要素のhref属性にurlを指定することで、クリック時にリンク先のWebページへ移動できます。また、<img>（画像）要素のsrc属性にurlを指定することで、Webページに画像を表示できます。他にも、<script>要素のsrc属性で外部のJavaScriptファイルを読み込んだり、<link>要素のhref属性で外部スタイルシートやファビコンをWebページに関連付けたりするなど、多岐にわたる場面で利用されます。
これらのurlは、Webサイトのルートからの絶対的な位置を示す「絶対URL」と、現在のドキュメントからの相対的な位置を示す「相対URL」の二種類があります。正確なurlの記述は、Webページが意図したリソースを正しく参照し、Webアプリケーションが期待通りに機能するために不可欠です。システムエンジニアを目指す上では、Webアプリケーションがどのように外部リソースと連携しているかを理解し、適切なurlを利用することは、Web開発の基本として非常に重要なスキルとなります。
構文(syntax)
1<a href="https://www.example.com/path/document.html"></a>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLでURLリンクを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML URL リンクの例</title> 7</head> 8<body> 9 <!-- <h1>タグは文書の見出しを作成します --> 10 <h1>外部ウェブサイトへのリンク</h1> 11 12 <!-- <p>タグは段落を作成します --> 13 <p> 14 以下のリンクは、ウェブページへのナビゲーションを提供します。 15 ウェブサイトのURLを指定するには、<a>タグのhref属性を使用します。 16 </p> 17 18 <!-- <a>タグはハイパーリンク（リンク）を作成します --> 19 <!-- href属性には、リンク先のURL（ウェブアドレス）を指定します --> 20 <a href="https://www.example.com">Example.comへアクセス</a> 21</body> 22</html>
HTMLにおけるURL（Uniform Resource Locator）は、ウェブ上の情報源（ウェブページ、画像など）の場所を示す一意のアドレスです。ここでいう「url」は、特定の関数やメソッドを指すものではなく、HTML要素の属性として指定される値そのものを表します。そのため、プログラミング言語における引数や戻り値といった概念は存在しませんが、HTML文書内で他のウェブコンテンツへの接続を確立するために非常に重要な役割を果たします。
特に、ハイパーリンクを作成する<a>（アンカー）タグは、ウェブページ間の移動を可能にする基本的な要素です。この<a>タグのhref属性に、目的のウェブサイトやウェブページのURLを指定することで、クリック可能なリンクが生成されます。サンプルコードの<a href="https://www.example.com">Example.comへアクセス</a>という記述は、ユーザーが「Example.comへアクセス」というテキストをクリックすると、https://www.example.comというアドレスのウェブサイトへ移動することを示しています。
このように、URLはHTML文書内で外部のリソースへ誘導するための情報を与えるものです。システムエンジニアを目指す上で、HTMLにおけるURLの正しい指定方法を理解することは、ウェブサイトの構造設計やユーザーナビゲーションを適切に実装するために不可欠な基礎知識となります。
HTMLでリンクを作成する際は、<a>タグのhref属性にリンク先のURLを正確に記述することが最も重要です。外部サイトへリンクする場合、https://のようなプロトコルから始まる「絶対URL」を省略せずに記述してください。URLのスペルミスやタイプミスは、リンク切れの原因となりますので注意が必要です。
自身のサイト内のページへリンクする場合は、現在のファイルからの位置を示す「相対URL」も利用できますが、最初は絶対URLで確実に記述することをお勧めします。不明なURLや信頼できないサイトへのリンクは、セキュリティリスクを伴う場合がありますので、必ず安全性を確認してから設置するように心がけてください。
HTMLでURLを埋め込む方法
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTMLにおけるURLの埋め込みサンプル</title> 7</head> 8<body> 9 <h1>HTMLにおけるURLの埋め込み例</h1> 10 11 <!-- <a>タグのhref属性にURLを指定し、リンクを埋め込みます。 --> 12 <p>リンクの例: <a href="https://www.example.com">Example.comへ移動</a></p> 13 14 <!-- <img>タグのsrc属性にURLを指定し、画像を埋め込み、ページに表示します。 --> 15 <p>画像の例:</p> 16 <img src="https://via.placeholder.com/150" alt="サンプル画像"> 17 18 <!-- <iframe>タグのsrc属性にURLを指定し、別のウェブページを埋め込み、ページ内に表示します。 --> 19 <p>ウェブページ埋め込みの例:</p> 20 <iframe src="https://www.example.com" width="600" height="400" title="埋め込みExampleページ"></iframe> 21</body> 22</html>
HTMLにおいてurl（Uniform Resource Locator）とは、ウェブ上の特定のリソース（ウェブページ、画像、動画など）がどこにあるかを示すアドレス情報のことです。これは特定のHTMLタグや関数を指すものではなく、様々なHTML要素の属性値として利用される非常に重要な概念です。リファレンス情報で「引数: なし」「戻り値: なし」と記載されているのは、urlという概念自体がプログラミング言語の関数のように直接引数を受け取ったり、処理結果を返したりするものではないことを意味します。
その代わりに、URLはHTML要素が持つ特定の属性に「値」として与えられます。この属性がURLという情報を受け取る「引数」のような役割を果たし、ブラウザはその値に基づいてコンテンツを読み込んだり、表示したり、移動させたりする挙動を起こします。
例えば、<a>タグのhref属性にURLを埋め込むと、クリック可能なリンクが作成され、そのURLへ移動する動作が発生します。これはhref属性がURLという値を「入力」として受け取り、ブラウザが「ページ遷移」という結果を返すようなものです。また、<img>タグのsrc属性にURLを指定することで、そのURLが示す画像をウェブページ内に表示できます。さらに、<iframe>タグのsrc属性に別のウェブページのURLを指定すると、そのページ全体を現在のページ内に埋め込んで表示することが可能です。
このように、HTMLにおけるURLの埋め込みは、ウェブコンテンツに外部の情報を統合し、ユーザーに豊かな体験を提供するために不可欠な要素となっています。
HTMLでURLを埋め込む際は、指定するURLが正しい形式であり、実際にアクセス可能か確認することが重要です。http://やhttps://といったプロトコルを忘れずに記述し、セキュリティの観点からhttps://の利用を強く推奨します。URLには、完全なアドレスを示す絶対パスと、現在のファイルからの位置を示す相対パスの2種類がありますが、サンプルコードでは絶対パスを使用しています。特に<iframe>で外部ウェブページを埋め込む場合、埋め込むコンテンツの信頼性を必ず確認し、悪意のあるコンテンツの埋め込みによるセキュリティリスクを避けてください。また、<img>タグのalt属性や<iframe>タグのtitle属性のように、埋め込むコンテンツの説明を記述する属性も適切に設定し、アクセシビリティを向上させましょう。