HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML入門】相対URLを使ってページをリンクする方法をわかりやすく解説

HTMLでWebサイト内のページ同士をリンクさせるには、<a>タグのhref属性を使用します。特に相対URL（Relative URL）は、同じサイト内の別ページへリンクを貼る際に便利な記述方法で、たとえば /contact や /about_team のような形式で指定します。

aタグの主な属性一覧

<a>〜</a>タグで囲まれたテキストや画像はすべてハイパーリンクとして機能します。<a>タグでよく使われる主な属性は以下の通りです。

No.属性と説明
1 href
リンク先のURLを指定します。相対パスでも絶対パスでも指定可能です。
2 rel
現在のドキュメントとリンク先ドキュメントとの関係性を指定します。「nofollow」「external」「author」「bookmark」などの値が使用できます。
3 target
リンク先をどこに開くかを指定します。「_self」（現在のタブ）、「_blank」（新しいタブ）、「_parent」、「_top」などの値があります。

相対URLと絶対URLの違い

相対URLは「現在のページの位置を基準としたパス」であるのに対し、絶対URLは「https://example.com/about/team.htm」のようにドメインから完全な形で指定する方法です。サイト内リンクには相対URLを使うことで、ドメイン変更時にもリンクを修正する手間が減り、コードもすっきりします。

相対パスの指定方法の例

  • 同一ディレクトリ内のファイル： href="team.htm"
  • 下の階層のファイル： href="about/team.htm"
  • 上の階層のファイル： href="../index.htm"
  • ルートからのパス： href="/about/about_team.htm"

実際のコード例

次のコードを実行すると、相対URLを使ってサイト内のチーム紹介ページへリンクを設定できます。

<!DOCTYPE html>
<html>
<head>
  <title>HTML 相対URLのサンプル</title>
</head>
<body>
  <p>
    私たちの <a href="/about/about_team.htm">チーム</a> は、
    プログラマー、ライター、アナリストで構成されています。
  </p>
</body>
</html>

このように、href属性に相対パスを指定するだけで、簡単にサイト内リンクを作成できます。ブラウザで表示すると「チーム」というテキストがクリック可能なリンクになり、指定したページへジャンプします。

まとめ

HTMLでのページ間リンクは、<a>タグと相対URLを組み合わせることで効率的に実装できます。サイト規模が大きくなっても管理しやすいよう、サイト内リンクは相対URL、外部サイトへのリンクは絶対URLという使い分けを意識するとよいでしょう。

  1. HTML link要素のhref属性の使い方を解説

    HTMLの<link>要素におけるhref属性は、外部リソースのURLを指定するために使用します。スタイルシートなどの外部ファイルを読み込む際に、その場所をブラウザに伝える重要な役割を担います。 構文 href属性の基本的な構文は以下のとおりです。 <link href="url"> 上記の「url」には、リンク先のドキュメントのURLを指定します。それでは、<link>要素のhref属性を使った具体的な例を見てみましょう。 使用例 <!DOCTYPE html> <html> <head> <l

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800