HTMLの絶対URLを使ってページにリンクする方法をわかりやすく解説
絶対URLによるリンクの基本
HTMLで絶対URLを使用してページにリンクするには、<a>タグのhref属性を利用します。絶対URLは、外部のWebサイトへのリンクを張る際に使用されるもので、「https://」から始まる完全なアドレスを指定します。例えば、https://www.qries.com/questions.php のような形式です。
<a>タグで囲まれたテキストや画像は、すべてハイパーリンクとして機能します。クリックすることで、指定したURLのページへ移動できるようになります。
<a>タグの主な属性一覧
| 番号 | 属性と説明 |
|---|---|
| 1 | href リンク先のURLを指定します。絶対URLでも相対URLでも指定可能です。 |
| 2 | rel 現在のドキュメントとリンク先ドキュメントとの関係性を指定します。「nofollow」「external」「author」「bookmark」などの値が使用できます。 |
| 3 | target リンクをどこで開くかを指定します。「_self」（同じウィンドウ）、「_parent」（親フレーム）、「_blank」（新しいタブ）などの値があります。 |
絶対URLと相対URLの違い
絶対URLはプロトコルから始まる完全なアドレスであり、主に自社サイト以外の外部サイトへリンクする場合に使われます。一方、相対URLは現在のページを基準としたパス指定で、同じサイト内のページ移動に適しています。用途に応じて使い分けることで、管理しやすいHTMLを作成できます。
コード例
以下のコードを実行すると、HTMLで絶対URLを使ってページにリンクする動作を確認できます。
<!DOCTYPE html> <html> <head> <title>HTML 絶対リンク</title> </head> <body> <h1>Qries</h1> <p> <a href="https://www.qries.com/questions.php">Qries</a>では、 ゲーム、政治、教育、地質学、スポーツなど、 さまざまなトピックに関する情報を入手できます。 </p> </body> </html>
この例では、テキスト「Qries」がリンクになり、クリックすると外部サイトの該当ページがブラウザで開きます。デフォルトでは同じタブ内で遷移しますが、新しいタブで開きたい場合はtarget="_blank"を追加しましょう。
-
HTML link要素のhref属性の使い方を解説
HTMLの<link>要素におけるhref属性は、外部リソースのURLを指定するために使用します。スタイルシートなどの外部ファイルを読み込む際に、その場所をブラウザに伝える重要な役割を担います。 構文 href属性の基本的な構文は以下のとおりです。 <link href="url"> 上記の「url」には、リンク先のドキュメントのURLを指定します。それでは、<link>要素のhref属性を使った具体的な例を見てみましょう。 使用例 <!DOCTYPE html> <html> <head> <l
-
HTMLでダウンロードリンクを作成する方法をわかりやすく解説
HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800